AJAX

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

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

Thanks.

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

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

Thanks.

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

Hi

Check out this Ajax Wiki

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.

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

That's so nice of you bartender.

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.

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

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

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.

Sorry, self-promotion

That is what the book promotion is for

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 ]

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

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

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)

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

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

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.