-C-O-N-C-E-P-T- Series : Making simultaneous AJAX calls to the same servlet

AJAX calls are "asynchronous" in nature. So what does this mean? You can have multiple requests to same (or different) servlets with each request processed asynchronously. Right, so are you speaking anything new?? Yes I am :) When you make simultaneous AJAX calls to the same servlet, the last call overlaps the response text with the previous, so as a result you get only the last requet's response text i.e. HTTP requests are overlaped. I faced this this problem in one of our Project, so I thought to share some views on it.

Examples:

Traditional code:


function ajaxRequest() {
...
myRequest.onreadystatechange = callBack; // assign callback function
...
}

function callBack() {
if (myRequest.readyState == 4) {
if (myRequest.status == 200) {
// Update DOM
}
}
}


Rearranging the above code:

Now we make some rearrangement of the AJAX code so that multiple HTTP requests can go on simultaneously. To do this, the XMLHTTP request object must be instantiated inside the Javascript function that calls the server. Furthermore, all code related to the request must be inside this function. The callback function must be an anonymous inner function within the ajaxRequest() function, and the code which updates the page after the callback must also be within the anonymous inner function.


function ajaxRequest() {
...
myRequest.onreadystatechange = function()
{
if (myRequest.readyState == 4)
{
if (myRequest.status == 200)
{
// update DOM with results
}
}
} // end anonymous inner function (callback)
...
}


Doing this I was able to handle multiple AJAX calls simultaneously.

Please feel free to correct me at any point :)

Preventing Cross Site Scripting (XSS) Attacks

I came across very nice & informative article by Greg Murray on his blog here.
He had explained the XSS attacks & how to prevent them very nicely. Really worth reading :)

Eclipse projects for AJAX development

The Eclipse Foundation announced milestone releases in two AJAX-related Eclipse projects — the ATF (AJAX Toolkit Framework)[incubator project] and the RAP (Rich AJAX Platform). These projects provide innovative new Eclipse-based technology to be utilized by AJAX developers.

RAP can be downloaded from http://www.eclipse.org/rap/

Looking forward to use these new projects...

Dynamic TABLE operations in HTML using JavaScript

Today I created one full fledged app using simple HTML, JavaScript & AJAX, which dynamically create, edit & delete the TABLE row (in the UI), which in turn is reflected in the database itself. While doing all these operations, no page REFRESH / RELOAD takes place, which gives feel that all these operations are done very faster than that of traditional approach.

As I've used JavaScript majorly, I've tested the app in IE(6.0), Mozilla Firefox(2.0.0.4) & Opera(9.20). It works fine without any browser compatibility issues. For AJAX, i've used JSON, which is supported by these browsers.

I think it's really great achievement for me as I've tried to create most user-friendly & interactive app.

Following is the snap of my app:
[All the operations takes place in the single page itself without refresh / reload]

My first AJAX program in Java

Finally I have created my first AJAX program in Java. It's to convert an entered number to the string representation. What I've done is created one JSP page and one Servlet to process the client request. In the JSP page I took one text box to enter the number & then passed it to the Servlet in the form of of request. There I converted the number to the string & passed it back to the requesting client in the form of XML/Text response. This response text is in the form of XML, but in my case as there is only one field, the XML is overkill.

AJAX is really interesting to study. It's not a technology but it's a group of ideas that, used together, are proven very powerful. I'll be exploring a lot in it. :)