The application needs user authentication before accessing any part of it. Although this is easy to achieve in any MVC based framework, its a whole new thing when dealing with Ajax requests.

In a normal request/response based MVC application, if a user is not authenticated and tries to view a webpage, the request is redirected to the Login page. Almost all MVC framework comes with this functionality. When the request gets redirected to Login page, the Status Code 403 (Forbidden) is set in HTTP header. 403 Forbidden is a HTTP status code returned by a web server when a user agent requests a resource that the server does not allow them to.

But when using Ajax for getting the content, if the request is redirected to Login page, it is difficult to handle this scenario.

Here is a simplest solution that can be implemented in your Ajax based application. Just add this code in your Javascript file.

    $(document).ready(
        function() {
            $("body").ajaxError(
                function(e,request) {
                    if (request.status == 403) {
                        window.location.reload();
                        //window.location.href = "/myapp/login";
                    }
                }
            );
        }
    );

In above code, we have added a handler function to ajaxError which gets called by jQuery whenever there is an error in the HTTP Response. The function checks if the status code is 403, if it is then it simply tries to reload the URL. This generate a new request to the server which automatically gets redirected to the login page. The only disadvantage of reloading the page is that you generate a new HTTP request which server has to handle and redirect to Login page.

You may wish to directly redirect user to login page from client code itself. Check the Line XX where we are changing the windows location and redirecting user. I personally dont like this method as you have to hard code the path for login page in javascript. I prefer using the previous solution to reload the page.

I am sure there must be several way of implementing this in Javascript. Share yours if you think you have a better one

jQuery provides simple yet powerfull functions which have extended the JavaScript AJAX methods and provide more flexible way. Let us see different ways of doing AJAX things in jQuery.

GET Request method using jQuery

Load a remote page using HTTP GET request method. This is an easy way to send a simple GET request to a server. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code).

jQuery.get( url, [data], [callback], [type] )

url: (String) The URL of the page to load.
data (Optional): (Map) Key/value pairs that will be sent to the server.
callback (Optional): (Function) A function to be executed whenever the data is loaded successfully.
type (Optional): (String) Type of data to be returned to callback function: “xml”, “html”, “script”, “json”, “jsonp”, or “text”.
e.g.

$.get(
	"http://some-remote-site",
	"{key:value}",
	function(data) { alert(data); },
	"html"
);

$.get(
	"http://some-remote-site",
	function(data) { alert(data); },
);

POST Request method using jQuery

Sending post method is also very easy with jQuery. All you have to do is just to call jQuery.post () method instead of jQuery.get (). Following is the syntax of post method.

jQuery.post( url, [data], [callback], [type] )

url: (String) The URL of the page to load.
data (Optional): (Map) Key/value pairs that will be sent to the server.
callback (Optional): (Function) A function to be executed whenever the data is loaded successfully.
type (Optional): (String) Type of data to be returned to callback function: “xml”, “html”, “script”, “json”, “jsonp”, or “text”.

$.post("test.php", { func: "getNameAndTime" },
  function(data){
    alert("Hello");
  }, "json");

Get JSON using jQuery

JavaScript Object Notation (JSON) is a popular light weight format that can be used to get data from server. JSON has became very popular since that web pages have became interactive using AJAX. JSON format is easy to create from the server and easy to parse at client as it is the basic object representation in JavaScript.

JQuery provides a function that can be used to make an AJAX call and get the data in JSON format. Normally the data that we get from AJAX is converted in JSON by calling eval () method of JavaScript. But the function provided by JQuery handles this internally and provides direct JSON object as output.

jQuery.getJSON( url, [data], [callback] )

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
        });

AJAX Start/End using jQuery

While you make an AJAX call and get some data from server, it is good to show a progress bar or image to user so that (s)he knows that something is going on. Hence Loading… text is common in AJAX enabled application.

What if you web application is making many AJAX calls like gmail. You may want to display a Loading… text while any of AJAX call is proceeding. To achieve this ajaxStart() and ajaxComplete() methods of jQuery can be used.

ajaxStart() method registers a function handler that will be called by jQuery internally whenever an AJAX call is made. If already a request is active than the handler is not called. We can use this method to register a handler function that will display our progress bar.

$.ajaxStart(function() {
	$("div#loading").text("Loading...");
});

In above code snippet, we used ajaxStart() method to register a function that set the innerHTML of div to Loading…

Similarly ajaxComplete() method can be used to register a handler function which gets called by jQuery when an AJAX request get completed and any other active request are not in progress.

$.ajaxComplete(function() {
	$("div#loading").text("");
});

Serialize html form using jQuery

While submitting a form using AJAX, one has to create a input string that contains the value of all the input elements on the screen. It is very difficult to create this string if your form is very big. Hence we can use jQuery’s serialize() and serializeArray() method to do so.

serialize()

Serializes a set of input elements into a string of data. Serialize is typically used to prepare user input data to be posted to a server. The serialized data is in a standard format that is compatible with almost all server side programming languages and frameworks. In order to work properly serialize requires that form fields have a name attribute. Having only an id will not work.

var str = $("form").serialize();
$("#results").text(str);

In above code snippet, we created a serialize output of the form. This value can be sent to server by an AJAX call.

serializeArray()

serializeArray() does the similar job. Except it creates JSON output.

[
     {name: 'firstname', value: 'Hello'},
     {name: 'lastname', value: 'World'},
     {name: 'alias'}, // this one was empty
]

If you read this far, you should follow me on twitter here.

The JSON format is often used for transmitting structured data over a network connection in a process called serialization. Its main application is in AJAX web application programming, where it serves as an alternative to the traditional use of the XML format.

Supported data types

1. Number (integer, real, or floating point)
2. String (double-quoted Unicode with backslash escapement)
3. Boolean (true and false)
4. Array (an ordered sequence of values, comma-separated and enclosed in square brackets)
5. Object (collection of key/value pairs, comma-separated and enclosed in curly brackets)
6. null

Syntax

The following example shows the JSON representation of an object that describes a person. The object has string fields for first name and last name, contains an object representing the person’s address, and contains a list of phone numbers (an array).

{
    "firstName": "John",
    "lastName": "Smith",
    "address": {
        "streetAddress": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postalCode": 10021
    },
    "phoneNumbers": [
        "212 732-1234",
        "646 123-4567"
    ]
}

Creating JSON data in Java

JSON.org has provided libraries to create/parse JSON data through Java code. These libraries can be used in any Java/J2EE project including Servlet, Struts, JSF, JSP etc and JSON data can be created.

Download JAR file json-rpc-1.0.jar (75 kb)

Use JSONObject class to create JSON data in Java. A JSONObject is an unordered collection of name/value pairs. Its external form is a string wrapped in curly braces with colons between the names and values, and commas between the values and names. The internal form is an object having get() and opt() methods for accessing the values by name, and put() methods for adding or replacing values by name. The values can be any of these types: Boolean, JSONArray, JSONObject, Number, and String, or the JSONObject.NULL object.

import org.json.JSONObject;

...
...

JSONObject json = new JSONObject();
json.put("city", "Mumbai");
json.put("country", "India");

...

String output = json.toString();

...

Thus by using toString() method you can get the output in JSON format.

JSON Array in Java

A JSONArray is an ordered sequence of values. Its external text form is a string wrapped in square brackets with commas separating the values. The internal form is an object having get and opt methods for accessing the values by index, and put methods for adding or replacing values. The values can be any of these types: Boolean, JSONArray, JSONObject, Number, String, or the JSONObject.NULL object.

The constructor can convert a JSON text into a Java object. The toString method converts to JSON text.

JSONArray class can also be used to convert a collection of Java beans into JSON data. Similar to JSONObject, JSONArray has a put() method that can be used to put a collection into JSON object.

Thus by using JSONArray you can handle any type of data and convert corresponding JSON output.

Using json-lib library

JSON-lib is a java library for transforming beans, maps, collections, java arrays and XML to JSON and back again to beans and DynaBeans.

Json-lib comes in two flavors, depending on the jdk compatibility. json-lib-x.x-jdk13 is compatible with JDK 1.3.1 and upwards. json-lib-x.x-jdk15 is compatible with JDK 1.5, includes support for Enums in JSONArray and JSONObject.

Download: json-lib.jar

Json-lib requires (at least) the following dependencies in your classpath:

1. jakarta commons-lang 2.5
2. jakarta commons-beanutils 1.8.0
3. jakarta commons-collections 3.2.1
4. jakarta commons-logging 1.1.1
5. ezmorph 1.0.6

Example

package net.viralpatel.java;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import net.sf.json.JSONObject;

public class JsonMain {
	public static void main(String[] args) {

		Map<String, Long> map = new HashMap<String, Long>();
		map.put("A", 10L);
		map.put("B", 20L);
		map.put("C", 30L);

		JSONObject json = new JSONObject();
		json.accumulateAll(map);

		System.out.println(json.toString());

		List<String> list = new ArrayList<String>();
		list.add("Sunday");
		list.add("Monday");
		list.add("Tuesday");

		json.accumulate("weekdays", list);
		System.out.println(json.toString());
	}
}

Output:

{"A":10,"B":20,"C":30}
{"A":10,"B":20,"C":30,"weekdays":["Sunday","Monday","Tuesday"]}

Using Google Gson library

Gson is a Java library that can be used to convert Java Objects into their JSON representation. It can also be used to convert a JSON string to an equivalent Java object. Gson can work with arbitrary Java objects including pre-existing objects that you do not have source-code of.

There are a few open-source projects that can convert Java objects to JSON. However, most of them require that you place Java annotations in your classes; something that you can not do if you do not have access to the source-code. Most also do not fully support the use of Java Generics. Gson considers both of these as very important design goals.

Gson Goals

• Provide simple toJson() and fromJson() methods to convert Java objects to JSON and vice-versa
• Allow pre-existing unmodifiable objects to be converted to and from JSON
• Extensive support of Java Generics
• Allow custom representations for objects
• Support arbitrarily complex objects (with deep inheritance hierarchies and extensive use of generic types)

Google Gson Example

import java.util.List;
import com.google.gson.Gson;

public class Test {

    public static void main(String... args) throws Exception {
        String json =
            "{"
                + "'title': 'Computing and Information systems',"
                + "'id' : 1,"
                + "'children' : 'true',"
                + "'groups' : [{"
                    + "'title' : 'Level one CIS',"
                    + "'id' : 2,"
                    + "'children' : 'true',"
                    + "'groups' : [{"
                        + "'title' : 'Intro To Computing and Internet',"
                        + "'id' : 3,"
                        + "'children': 'false',"
                        + "'groups':[]"
                    + "}]"
                + "}]"
            + "}";

        // Now do the magic.
        Data data = new Gson().fromJson(json, Data.class);

        // Show it.
        System.out.println(data);
    }

}

class Data {
    private String title;
    private Long id;
    private Boolean children;
    private List<Data> groups;

    public String getTitle() { return title; }
    public Long getId() { return id; }
    public Boolean getChildren() { return children; }
    public List<Data> getGroups() { return groups; }

    public void setTitle(String title) { this.title = title; }
    public void setId(Long id) { this.id = id; }
    public void setChildren(Boolean children) { this.children = children; }
    public void setGroups(List<Data> groups) { this.groups = groups; }

    public String toString() {
        return String.format("title:%s,id:%d,children:%s,groups:%s", title, id, children, groups);
    }

AJAX has really changed the way we build web applications.When I surf internet today, I find almost all the websites Ajaxified in some way. Writing an AJAX application is as simple as writing simple JavaScript methods and some server side code.

I have been writing AJAX codes since a long time now and believe me tge most difficult part is to handle errors and exceptions. Session timeout is one of the most trivial error that one needs to consider while creating an AJAX enabled application.

Normally, we use AJAX to deliever HTML content that we put in a DIV or SPAN tag and display it on screen. But suppose the request that we sent using AJAX was generated an error due to session timeout then the session timeout screen will be shown in DIV tag. Any error generated by server let say http 404 error or http 505 can lead to display such error in our display DIV.

Handle Session timeout errors

One solution that you can use to handle the session timeout errors is using JSON or XML format as output for your AJAX requests. You have to check for session in your script, say for example if you are using JSP then probably you can do something like this:

if(null == session || session.getAttribute("SOME_ATTR_THAT_I_PLACED_IN_SESSION")) {
	isSessionNull = true;
}
...
{
	<%
	if(isSessionNull) {
		out.println("status: error");
	}
	else {
		out.println("status: success");
	}
	%>
}

In short, create a status field in your JSON script or a status tag in your XML which will describe the status of the request.

I am looking for some more ways of checking session timeouts in AJAX. Kindly let me know if you have a good solution.

Handle Server HTTP errors in AJAX

HTTP errors like 404, 503 are sometimes tedious to handle using AJAX. There is a simple trick to solve this problem. First let us see simple AJAX handler function that we use to get response XML/text through AJAX.

xhr.open("GET", "http://someurl", true);
xhr.onreadystatechange = handleHttpResponse;
xhr.send(null);
...
...
function handleHttpResponse() {
	if (xhr.readyState == 4) {
		//handle response your way
		spanBodyContent.innerHTML = xhr.responseText;
	}
}

Normal AJAX handlers has a if to check readyState and if it is 4 (response arrived state) then we get the response from xhr.responseText or xhr.responseXML.

AJAX’s XMLHttpRequest object has attributes to check the status of your http request. You can use two attributes: status and statusText for knowing this.

xhr.status
..
xhr.statusText

Thus by checking status attribute from your AJAX xhr object can solve your problem.

xhr.open("GET", "http://someurl", true);
xhr.onreadystatechange = handleHttpResponse;
xhr.send(null);
...
...
function handleHttpResponse() {
	if (xhr.readyState == 4) {
		try {
		if(xhr.status == 200) {
			//handle response your way
			spanBodyContent.innerHTML = xhr.responseText;
		}
		}catch(e) {//error}
	}
}

Thus, if status is not 200, you may not want to update your DOM with the ajax result and display some error message on your web page.

Lightstreamer is product on similar line. Let us see what Lightstreamer official website has to say about it:

Lightstreamer is a scalable and reliable Server for pushing live data to Rich Internet Applications. Based on the AJAX-Comet paradigm, it streams real-time data to any Web browser, without installing anything on the client. Both HTML and Flex applications can receive live data from Lightstreamer, as well as traditional thick clients. See below for a quick example.

Lightstreamer has been used in many mission-critical production systems, where scalability, low network impact, bandwidth management, adaptive streaming, and other advanced features, have proven fundamental.

Lightstreamer can be used to push real time data to browser and render a graph. Trust me this looks really cool as the graph keeps on changing with time as new data gets streamed. Also you can paint a table where the values keeps on changing. For e.g. A Stock portfolio application where the current prices of stocks keep on changing and you can track real time prices. No need to hit Refresh, no need to make an Ajax call. Lightstreamer also support bandwidth control where you can actually control the bandwidth a connection can use.

Lightstreamer application has two components, a server component that is written in Java and deployed in Lightstreamer server and a client component that is written in JavaScript and run in browser. Server component keeps on pushing new data to client, which then renders it to the UI.

Ok, so Lightstreamer is soo cool.. then why I have never heard about it. ?? Well its because it is not free.. you have to pay a good amount of money to use it in production environment. There is a free copy available on Lightreamer site that you can use for evaluation. But you have to register for the free product and generate a “key” using mac address of machine where you want to run it.

There is an open source push technology framework available on internet called Cometd.

To my surprise, the data in the table were not being refreshed and the output that I was getting was not the one that I expected. Hence I tried to call the URL manually through browser. Say for example I was calling GetData.jsp from my AJAX code, so I copy/pasted this URL in browser and called it. This time I was getting the desired data in the browser.

Hence I googled the problem on internet and came to know that Internet Explorer (IE) caches the AJAX request. So if I make ajax queries with same URL, it tends to give me same result/output as IE caches the data that it gets from first query.

To overcome this problem, I used a simple hack. I appended a random number with my URL and voila, it worked.

For example, suppose below is my AJAX query. In this I am calling a URL GetData.jsp and passing one parameter requestNo.

var url = "GetData.jsp?requestNo=" + req;
xhr.open("GET", url, true);
xhr.onreadystatechange = handleHttpResponse;
xhr.send(null);

I changed the above code into:

var url = "GetData.jsp?requestNo=" + req  + "&random=" + Math.random();
xhr.open("GET", url, true);
xhr.onreadystatechange = handleHttpResponse;
xhr.send(null);

Note that, I appended one more parameter with the URL which is random and assigned Math.random() with it. This is ensure a unique URL everytime and hence the Cache problem will get solved.

jQuery load() method issue with Internet Explorer

If you are using jQuery load() function to load content of a URL into a DIV then you may face issue in IE. Sometimes IE doesn’t load anything in the DIV.

$("#mydiv").load("student.html");

You may want to add random url parameter to the load method so that IE doesn’t cache the content and it is properly loaded in the DIV.

$("#mydiv").load("student.html&random=" + Math.random()*99999);

Disable Cache in jQuery

Best way to avoid caching is by disabling it through jQuery setup. Following code snippet does this:

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

Try to use this method of disabling cache in case you using different Ajax loading techniques such as .load(), .getJSON() etc.

function getXMLHttpRequestObject()
{
  var xmlhttp;
  /*@cc_on
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
  @else
  xmlhttp = false;
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      xmlhttp = false;
    }
  }
  return xmlhttp;
}
var http = new getXMLHttpRequestObject();

var url = "FetchSomeData.jsp";
var parameters = "name=krishna&age=16";
http.open("GET", url+"?"+parameters, true);
http.onreadystatechange = function() { //Handler function for call back on state change.
	if(http.readyState == 4) {
		alert(http.responseText);
	}
}
http.send(null);

Now the same code can be re-written in order to send the request by POST method. Check the following code:

var url = "FetchSomeData.jsp";
var parameters = "name=krishna&age=16";
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters .length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Handler function for call back on state change.
	if(http.readyState == 4) {
		alert(http.responseText);
	}
}
http.send(parameters);

Now compare the two code snippets. The first change that you will see is in http.open() method.

//GET method
http.open("GET", url+"?"+parameters, true);

//POST method
http.open("POST", url, true);

In GET method, the parameters are appended with the URL and is passed in open() method, whereas in POST method the parameters are not passed with URL. The header is modified and the length of the parameter is set in it.

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters .length);
http.setRequestHeader("Connection", "close");

Hence in POST method, the parameters are send more as a form submission.

POST method using jQuery

Using jQuery one can easily send the request using POST method. See the following syntax.

$.post("GetData.jsp",
  { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  }
);

Here the first argument to is the script name that one needs to call. Second argument is the parameters that one needs to pass in JSON format. And finally the handler function that will be called once the request has been completed.

If you have read/seen it somewhere, then it is not through AJAX. File uploading occurs through an iframe in this case. You have to use a iframe to upload the files. So, you can use iframe to asynchronous upload (Like AJAX , but its not AJAX).

How file uploading is done in Gmail? Use following JavaScript function, if you want to achieve same functionality.

<html>

<script language="Javascript">
function fileUpload(form, action_url, div_id) {
    // Create the iframe...
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id", "upload_iframe");
    iframe.setAttribute("name", "upload_iframe");
    iframe.setAttribute("width", "0");
    iframe.setAttribute("height", "0");
    iframe.setAttribute("border", "0");
    iframe.setAttribute("style", "width: 0; height: 0; border: none;");

    // Add to document...
    form.parentNode.appendChild(iframe);
    window.frames['upload_iframe'].name = "upload_iframe";

    iframeId = document.getElementById("upload_iframe");

    // Add event...
    var eventHandler = function () {

            if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
            else iframeId.removeEventListener("load", eventHandler, false);

            // Message from server...
            if (iframeId.contentDocument) {
                content = iframeId.contentDocument.body.innerHTML;
            } else if (iframeId.contentWindow) {
                content = iframeId.contentWindow.document.body.innerHTML;
            } else if (iframeId.document) {
                content = iframeId.document.body.innerHTML;
            }

            document.getElementById(div_id).innerHTML = content;

            // Del the iframe...
            setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
        }

    if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
    if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

    // Set properties of form...
    form.setAttribute("target", "upload_iframe");
    form.setAttribute("action", action_url);
    form.setAttribute("method", "post");
    form.setAttribute("enctype", "multipart/form-data");
    form.setAttribute("encoding", "multipart/form-data");

    // Submit the form...
    form.submit();

    document.getElementById(div_id).innerHTML = "Uploading...";
}
</script>

<!-- index.php could be any script server-side for receive uploads. -->
<form>
<input type="file" name="datafile" /></br>
<input type="button" value="upload"
        onClick="fileUpload(this.form,'index.php','upload'); return false;" >
<div id="upload"></div>
</form>

</html>