Forum:

HTML Pages with CSS and JavaScript

AJAX

Ranch Hand

Posts: 3852

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Does any one have implemented AJAX (Asynchronous Javascript And XML)???

Can any one tell the basic logic behind it???

Thanks.

Eric Pascarello

author

Posts: 15385

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

There is plenty of information out there. Do a serch on Google for what you are looking for. AKA. Ajax Servlets / Ajax JSP / AJAX Double Combo / Etc.

Eric

Christophe Verré

Sheriff

Posts: 14691

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Ajax Servlets / Ajax JSP / AJAX Double Combo / Ajax In Action

[My Blog]
All roads lead to JavaRanch

ankur rathi

Ranch Hand

Posts: 3852

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks.

I know, I can get detailed material on net but I am looking for a basic idea in user friendly, simple language.

Vikrant Pandit

Ranch Hand

Posts: 245

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi

Check out this Ajax Wiki

Vikrant Pandit

David O'Meara

Rancher

Posts: 13459

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have an extremely simple demo which I can post, but unfortunately i do not have access to it at the moment. I'll try to post it in the next day or two.

Vishnu Prakash

Ranch Hand

Posts: 1026

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I'll try to post it in the next day or two.

That's so nice of you bartender.

Servlet Spec 2.4/ Jsp Spec 2.0/ JSTL Spec 1.1 - JSTL Tag Documentation

ankur rathi

Ranch Hand

Posts: 3852

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by David O'Meara:
I have an extremely simple demo which I can post, but unfortunately i do not have access to it at the moment. I'll try to post it in the next day or two.

Thank you so much David.

Pradeep bhatt

Ranch Hand

Posts: 8944

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

http://demo.script.aculo.us/shop

Groovy

Brett McLaughlin

author

Posts: 30

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

OK, I can't resist... if you really are coming to Ajax completely new, then Head Rush Ajax is an ideal book. It takes you from ground zero to a well-rounded Ajax developer, and you'll get a really strong grounding in asynchrony, the role of the browser, data formats, etc. Check it out...

Sorry, self-promotion. But that was too much of a softball to resist :-)

Thanks
Brett

Series Editor, Head First<br />Author of <a href="http://www.amazon.com/exec/obidos/ASIN/0596102259/newinstance-20" target="_blank" rel="nofollow">Head Rush Ajax</a> and <a href="http://www.amazon.com/Head-First-Object-Oriented-Analysis-Design/dp/0596008678/ref=pd_bbs_sr_1/104-5348268-5670331?ie=UTF8&s=books&qid=1192568453&sr=8-1/newInstance-20" target="_blank" rel="nofollow">Head First OOA&D</a>

Sahul Yasin

Ranch Hand

Posts: 48

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

I have recently implemented Ajax in my project. Really impressive.

In our portal server application, firing a "dynamic data request" from a portlet was refreshing the whole page & reloaded all the porlets in the portal server page.

By using Ajax, we simply retrieved the data without refreshing the whole page & that improved the system performance.

Regards.

Regards,<br />Yasin<br />SCJP,SCWCD,SCBCD

Christophe Verré

Sheriff

Posts: 14691

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sorry, self-promotion

That is what the book promotion is for

[My Blog]
All roads lead to JavaRanch

David O'Meara

Rancher

Posts: 13459

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I emailed the demo to Rathi, but here is an extremely simple demo...

Servlet:
(Takes a request with a number, returns the number and a random number as xml)

package com.javaranch.davo.ajax;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class RandomServlet extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/xml");
PrintWriter out = response.getWriter();
String inNum = request.getParameter("count");
if (inNum == null)
{
sendError("count not found", out);
return;
}
Random rand = new Random();
String outNum = String.valueOf(rand.nextInt());
 
sendResponse(inNum, outNum, out);
}
 
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
doGet(request, response);
}
 
private void sendResponse(String inNum, String outNum, PrintWriter out)
{
out.write("<?xml version=\"1.0\" ?>\n");
out.write("<response>\n");
out.write("<inNum>");
out.write(inNum);
out.write("</inNum>\n");
out.write("<outNum>");
out.write(outNum);
out.write("</outNum>\n");
out.write("</response>");
}
 
private void sendError(String error, PrintWriter out)
{
out.write("<?xml version=\"1.0\" ?>\n");
out.write("<response>\n");
out.write("<error>");
out.write(error);
out.write("</error>\n");
out.write("</response>");
}
}

Web page:
(clicking the link sends an asnch request, receives and decodes the response then pops the data in an alert box)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
<title>Simple Ajax Demo</title>
<link rel='stylesheet' type='text/css' href='ajax.css'/>
<script type='text/javascript' src='net.js'></script>
<script type='text/javascript'>
//
</script>
</head>
<body>
<p><a href='javascript:sendCall()'>send</a></p>
</body>
</html>

The 'net.js' is a modified version taken from Eric's book
Note you need to swap on_error and on_load and remove the underscore before it will work.

/* namespacing object */
var net=new Object();
 
net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;
/*--- content loader object for cross-browser requests ---*/
net.ContentLoader=function(url,on_load,on_error,method,params,contentType){
  this.req=null;
  this.on_load=on_load;
  this.on_error=(on_error) ? on_error : this.defaultError;
  this.loadXMLDoc(url,method,params,contentType);
}
net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){
  if (!method)
  {
method="GET";
  }
  if (!contentType && method=="POST")
  {
contentType='application/x-www-form-urlencoded';
  }
  if (window.XMLHttpRequest)
  {
this.req=new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
this.req=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (this.req)
  {
try
{
  var loader=this;
  this.req.onreadystatechange=function()
  {
net.ContentLoader.onReadyState.call(loader);
  }
  this.req.open(method,url,true);
  if (contentType)
  {
  this.req.setRequestHeader('Content-Type', contentType);
  }
  this.req.send(params);
}
catch (err)
{
  this.on_error.call(this);
}
  }
}
net.ContentLoader.onReadyState=function(){
  var req=this.req;
  var ready=req.readyState;
  if (ready==net.READY_STATE_COMPLETE){
var httpStatus=req.status;
if (httpStatus==200 || httpStatus==0){
  this.on_load.call(this);
}else{
  this.on_error.call(this);
}
  }
}
net.ContentLoader.prototype.defaultError=function(){
  alert("error fetching data!"
+"\n\nreadyState:"+this.req.readyState
+"\nstatus: "+this.req.status
+"\nheaders: "+this.req.getAllResponseHeaders());
}

Hopefully you know how to join the three together

Enjoy,
Dave.
[ April 29, 2006: Message edited by: David O'Meara ]

Liyaquat Ali

Ranch Hand

Posts: 156

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hey this is really good, pretty usefull, I think I'll try it out...

Excuse me while I kiss the sky (Jimi Hendrix)

Eric Pascarello

author

Posts: 15385

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Dave,

Can I ask why in the world are you checking
if (http_request.readyState == 4){(http_request.status == 200)

inside the function when the content loader does that before it calls the next step.

Eric

David O'Meara

Rancher

Posts: 13459

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hey it was there when I copied it!

Do you have a recommendation of how it should be?

(Sorry, I copied the ContentLoader part from one of your examples. If you have a problem feel free to remove it)

Eric Pascarello

author

Posts: 15385

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

The content loader does th check already for the 4 and 200. Look at contentLoader and you will see that. It does the check with the costant holding 4 and then looks for 300. If it is a match it calls your function that handles the request.

So you basically just need to remove the if statements in your code that are performing the same check. Only way that code will be called is it it is complete.

Eric

David O'Meara

Rancher

Posts: 13459

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Ah I see what you mean, it was being done in the ContentLoader and the callback method. I had missed that. Thanks

Linda Walters

Ranch Hand

Posts: 100

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have implemented an Ajax application to provide "lazy loading" of a tree-like structure that is part of the enterprise IT Service Management (ITSM) product on which I work. The actual JavaScript code is pretty simple because the XML that I get back from the backend server throught the web servlet is rather straight-forward and the DOM parsing features of JavaScript make short work of it. The web servlet side of things was pretty much just a pass through of the request from the browser to the backend server and then passing back the XML from the backend down to the browser.

Even when all laid out nice and pretty, with white space, well placed braces, one statement to a line, comments, etc. the JavaScript code is only about 750 lines.

It was much easier than I had expected.

<a href="http://labryssystems.net/pblog/index.php" target="_blank" rel="nofollow">Javaville Gazette</a><br />Non-cooperation with evil is a duty. -- Mahatma Gandhi

With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.