ccomplete ajax tutorialomplete ajax tutorial

Asynchronous JavaScript and XML (AJAX) is the art of exchanging data with a server, andupdating parts of a web page -- without reloading the whole webpage. In other words, AJAXallows web pages to be updated asynchronously by exchanging small amounts of datawith the server behind the scenes. If application are not using AJAX, then it will have toreload the webpage on every request user made.

In this tutorial, I will be covering all basic and important facts you should know beforeworking on ajax based application, to fully utilize the power of ajax.

Sections in this post

How ajax works?

Ajax request and response objects

- Useful methods (open(), setRequestHeader(), send(), abort())

Synchronous and Asynchronous requests

- onreadystatechange event, Handling server response

Demo application

- Asynchronous example, Synchronous example

Some popular ajax capable libraries

- JQuery, Prototype

Download source code

Get the Best Java Hostingdailyrazor.comJava/JSP, Servlet Hosting $9.95/mo Hibernate, Struts, Spring, JSF, MVC

SCRIPTING

Complete AJAX tutorialJUNE 21, 2013 | LOKESH+ 40 COMMENTS

How To Do In Java

Complete AJAX tutorial - How To Do In Java http://howtodoinjava.com/2013/06/21/complete-aj...

1 of 22 01.09.2014. 17:44

How ajax works?

It is important to understand that Ajax is not a single technology, but a group of technolo-gies e.g. HTML, CSS, DOM and JavaScript etc. HTML and CSS can be used in combinationto mark up and style information. The DOM is accessed with JavaScript to dynamically dis-play, and allow the user to interact with, the information presented. JavaScript and theXMLHttpRequest object provide a method for exchanging data asynchronously betweenbrowser and server to avoid full page reloads.

In recent years, essence of XML has been reduced. JSON (JavaScript Object Notation) isoften used as an alternative format for data interchange, although other formats such aspreformatted HTML or plain text can also be used for data purpose.

Normally, an ajax call to server and getting back response (life cycle events) from server in-volve following steps:

You type the URL of a webpage in browser’s address bar and hit enter. Page is loaded inbrowser window.Some action triggers an event, like the user clicking a button.Event �res the ajax call, and sends a request to a server using xml or json.The server service takes the input from ajax/http request, and processes the request. Italso prepare the response data if required.Server sends the data back to the original webpage that made the request.Another JavaScript function, called a callback function, receives the data, and updatesthe web page.

Easy enough, right? Lets see all the action in below given picture.


2 of 22 01.09.2014. 17:44

How AJAX works?

Ajax request and response objects

The core of AJAX is the XMLHttpRequest object (available in client side scripting lan-guages like javascript). The XMLHttpRequest object is used to exchange data with a serverbehind the scenes. All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have abuilt-in XMLHttpRequest object. If you are using IE 5 or IE6 (I wonder if someone still usesit), then ActiveXObject will be used for server communication to send ajax requests.

A new object of XMLHttpRequest is created like this :

This xmlhttp variable can be re-used to send multiple ajax requests, without creating newobjects. XMLHttpRequest is subject to the browser’s same origin policy for security rea-sons. It means that requests will only succeed if they are made to the same server thatserved the original web page.

Useful methods to work with XMLHttpRequest

To send request and set request attributes, XMLHttpRequest object has some methods.Lets have a look onto them:

a) open(method, url, isAsync, userName, password)

The HTTP and HTTPS requests of the XMLHttpRequest object must be initialized throughthe open method. This method speci�es the type of request (GET, POST etc.), the URL, andif the request should be handled asynchronously or not. I will cover this third parameter innext section.

The fourth and �fth parameters are the username and password, respectively. These pa-

12345678910

//Creating a new XMLHttpRequest objectvar xmlhttp;if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari}else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5}


3 of 22 01.09.2014. 17:44

rameters, or just the username, may be provided for authentication and authorization if re-quired by the server for this request.

Example:

b) setRequestHeader(name, value)

Upon successful initialization of a request, the setRequestHeader method of theXMLHttpRequest object can be invoked to send HTTP headers with the request.

Example:

c) send(payload)

To send an HTTP request, the send method of the XMLHttpRequest must be invoked. Thismethod accepts a single parameter containing the content to be sent with the request.The content is necessary in POST requests. For GET methods, imply pass null as parame-ter.

Example:

4) abort()

This method aborts the request if the readyState of the XMLHttpRequest object has not yetbecome 4 (request complete). The abort method ensures that the callback method doesnot get invoked in an asynchronous request.

Syntax:

123

xmlhttp.open("GET","report_data.xml",true);xmlhttp.open("GET","sensitive_data.xml",false);xmlhttp.open("POST","saveData",true,"myUserName","somePassord");

12

//Tells server that this call is made for ajax purposes.xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

12

xmlhttp.send(null); //Request with no data in request body; Mostly used in GET requestsxmlhttp.send( {"id":"23423"} ); //Request with data in request body; Mostly used in POS

1 //Abort the processing


4 of 22 01.09.2014. 17:44

Apart from above method, onreadystatechange event listener is very important which wewill discuss in next section.

Synchronous and Asynchronous requests

XMLHttpRequest object is capable of sending synchronous and asynchronous requests, asrequired within webpage. The behavior is controlled by third parameter of open method.This parameter is set to true for an asynchronous requests, and false for synchronous re-quests.

The default value of this parameter is “true” if it is not provided.

Asynchronous Ajax Requests do not block the webpage and user can continue to interactwith other elements on the page, while the request is processed on server. You should al-ways use asynchronous Ajax Requests because a synchronous Ajax Request makes the UI(browser) unresponsive. It means user will not be able to interact with the webpage, untilthe request is complete.

Synchronous requests should be used in rare cases with utmost care. For example, syn-chronous Ajax Request should be used if you’re embedding a new JavaScript �le on theclient using ajax and then referencing types and/or objects from that JavaScript �le. Thenthe fetching of this new JS �le should be included through using a synchronous Ajax Re-quest.

Example synchronous request

Example asynchronous request

2 xmlhttp.abort();

12

xmlhttp.open("GET", "report_data.xml", true); //Asynchrnonos request as third parameterxmlhttp.open("GET", "report_data.xml", false); Synchrnonos request as third parameter i

123456789101112

var request = new XMLHttpRequest();request.open('GET', '/bar/foo.txt', false); //"false" makes the request synchronousrequest.send(null);

if(request.status === 200) { //request successful; handle the response}else{ //Request failed; Show error message}


5 of 22 01.09.2014. 17:44

In above example, onreadystatechange is a event listener registered with XMLHttpRequestrequest. onreadystatechange stores a function that will process the response returnedfrom the server. It will be called for all important events in request’s life cycle. Every time anstep is completed in request processing, the value of readyState will be changed and set tosome other value. Lets have a look at possible values:

0 : request not initialized1 : server connection established2 : request received3 : processing request4 : request �nished and response is ready to be handled

Handling returned response from server

To get the response from a server, responseText or responseXML property of theXMLHttpRequest object is used. If the response from the server is XML, and you want toparse it as an XML object, use the responseXML property. If the response from the server isnot XML, use the responseText property.

responseText : Get the response from server as a stringresponseXML : Get the response from server as XML

Example code:

1234567891011121314151617

var request = new XMLHttpRequest();request.open('GET', '/bar/foo.txt', true); //"true" makes the request asynchronous

request.onreadystatechange = function() { if (request.readyState == 4) { if (request.status == 200) { //request succeed } else { //request failed } }};

request.send(null)

123

if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) {


6 of 22 01.09.2014. 17:44

Demo application code

For demonstration purpose, I am creating a very simple hello world application. In this ap-plication, webpage sends a ajax GET request to query the current server’s system time. Inresponse, server sends the current time. Easy enough.

Asynchronous request example

To enable the webpage to send such request, I have written following javascript code inJSP page:

456789

document.getElementById("message").innerHTML = xmlhttp.responseText; } else { alert('Something is wrong !!'); }}

1234567891011121314151617181920

function ajaxAsyncRequest(reqURL){ //Creating a new XMLHttpRequest object var xmlhttp; if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5 } //Create a asynchronous GET request xmlhttp.open("GET", reqURL, true); //When readyState is 4 then get the server output xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { document.getElementById("message").innerHTML = xmlhttp.responseText; //alert(xmlhttp.responseText); }


7 of 22 01.09.2014. 17:44

and to �re the ajax request, a button should be clicked which is written as:

To handle the request on server side, I have written a servlet like this:

Above code will return the current server time in response in text form, which client code re-ceives and prints on webpage.

Synchronous request example

To send synchronous ajax request, change the javascript code in index.jsp �le with this:

212223242526272829

else { alert('Something is wrong !!'); } } }; xmlhttp.send(null);}

1 <input type="button" value="Show Server Time" onclick='ajaxAsyncRequest("get-current-ti

123456789101112131415

public class GetTimeServlet extends HttpServlet { private static final long serialVersionUID = 1L;

public void doGet (HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { response.setHeader("Cache-Control", "no-cache"); response.setHeader("Pragma", "no-cache"); PrintWriter out = response.getWriter(); Date currentTime= new Date(); String message = String.format("Currently time is %tr on %tD." out.print(message); }}


8 of 22 01.09.2014. 17:44

You do not need to check the ready state in synchronous requests, because response willbe available only when request is completed. Till the time, page will be blocked.

Some popular ajax capable libraries

As it is evident that ajax is very popular technology nowadays for making webpages highlyinteractive and user friendly. To ease the development of ajax related components, variousframeworks are available for developers in market today. The good thing is that they all arefree to use.

1) JQuery

JQuery is probably the post popular among its alternatives. It has got its own developercommunity which is highly active also. A sample code for sending ajax request usingjquery will be like is:

12345678910111213141516171819202122232425

function ajaxSyncRequest(reqURL){ //Creating a new XMLHttpRequest object var xmlhttp; if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6, IE5 } //Create a asynchronous GET request xmlhttp.open("GET", reqURL, false); xmlhttp.send(null); //Execution blocked till server send the response if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { document.getElementById("message").innerHTML = xmlhttp.responseText; } else { alert('Something is wrong !!'); } }}

12345

//Current request reference; can be used else wherevar request;

/* attach a submit handler to the form */$("#buttonId").submit(function(event) {


9 of 22 01.09.2014. 17:44

2) Prototype

Prototype is another popular framework for the same purpose. But, please beware that pro-totype is known to be incompatible with some other frameworks. A example code for send-ing ajax request using prototype will look like this:

That’s all for now. I will write more posts on ajax in future. You may like to register youremail id for update noti�cations.

6789101112131415161718192021222324252627282930313233

// abort any pending request if (request) { request.abort(); } /* stop form from submitting normally */ event.preventDefault();

/*clear result div*/ $("#result").html('');

/* get some values from elements on the page: */ var values = $(this).serialize();

/* Send the data using post and put the results in a div */ request =$.ajax({ url: "ajaxRequest", type: "post", data: values, success: function(){ $("#result").html('submitted successfully'); }, error:function(){ $("#result").html('there is error while submit'); } }); });

123456789101112

new Ajax.Request('/some_url',{ method:'get', onSuccess: function(transport) { var response = transport.responseText || "no response text"; }, onFailure: function() { alert('Something went wrong...'); }});


10 of 22 01.09.2014. 17:44

Dijeli 79 99

Like

Like TweetTweet 11

Source code download

Happy Learning !!

Share this:

Related Posts:RESTEasy javascript/ajax client demo1.JAX-RS custom validation example using ajax2.Complete lambda expressions tutorial3.Asynchronous and synchronous exceptions in java4.JavaScript: Correct way to de�ne global variables5.Complete Java Annotations Tutorial6.

40 THOUGHTS ON “COMPLETE AJAX TUTORIAL”

AJAX LIFE CYCLE AJAX TUTORIAL JAVASCRIPT ONREADYSTATECHANGE XMLHTTPREQUEST


11 of 22 01.09.2014. 17:44

JULY 17, 2014 AT 7:07 AM

Hello Lokesh,I have a problem in developing code for Gridview using AJAX with JavaScript.So, give me some sample code for reference. How to develop gridviews usingAJAX with JavaScript.

JULY 17, 2014 AT 7:16 AM

I have no working knowledge on ASP. If you can tell any speci�c problemin using ajax, I may help you.

AUGUST 9, 2014 AT 6:57 PM

Hi sir I m new to ajax & jquery, so plz suggest the best way to learnthose.

AUGUST 10, 2014 AT 1:06 AM

Rules are same for jquery and ajax as well :http://howtodoinjava.com/2014/07/14/best-way-to-learn-java/

AUGUST 26, 2014 AT 7:01 AM

Hi sir, can u explain how to work flow?

Ravi Arveti

Lokesh

Sambad

Lokesh

Harikrishna

123456789101112131415

$.ajax({ type: 'POST', contentType: 'application/json', url: rootURL, dataType: "json", data: formToJSON(), success: function(data, textStatus, jqXHR){ alert('Wine created successfully' $('#btnDelete').show(); $('#wineId').val(data.id); }, error: function(jqXHR, textStatus, errorThrown){ alert('addWine error: ' + textStatus); }});


12 of 22 01.09.2014. 17:44

}

AUGUST 26, 2014 AT 7:18 AM

In short, jQuery API will create a browser native XMLHttpRe-quest object and set the parameters passed as options[type,contentType,url,dataType,data]. Then it will send the re-quest to server. Upon getting the response back, either it willcall success or error function. More details are already givenin above tutorial.And if you really want to go deeper for seeking any speci�cfact; the read the of�cial documentationhttp://api.jquery.com/jquery.ajax/.

JUNE 30, 2014 AT 8:15 PM

how to create calender option to choose any particular date in java language andto how to store it in database ?

JULY 2, 2014 AT 9:32 AM

Here is one example for creating java calendar. Modify it for your need.

http://www.dreamincode.net/forums/topic/25042-creating-a-calendar-viewer-application/

JUNE 4, 2014 AT 11:05 AM

hello sir,i have a requirement like if user click on like link count increase without refreshthe page.i did it though passing argument to javascript fuction likefunction likecomment(arg){

document.location = ‘/LikeComment?id=’+arg;}i want to make like link as ajax then that without refreshing the page i want to likethe comment.

Lokesh

Abhilash

Lokesh

Madhavi


13 of 22 01.09.2014. 17:44

JUNE 4, 2014 AT 11:12 AM

I wrote some pseudo code for you. Make it working in your application.

MAY 9, 2014 AT 5:47 AM

what is readyState() and onreadyStateChange() in ajax pls explain

MAY 9, 2014 AT 5:53 AM

readyState: Holds the status of the XMLHttpRequest. Changes from 0 to4:0: request not initialized1: server connection established2: request received3: processing request4: request �nished and response is ready

Lokesh

1234567891011121314151617181920212223242526

function likeCommentRequest(requestURL){ //Creating a new XMLHttpRequest object var xmlhttp; if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //Change if you want to POST the data xmlhttp.open("GET", reqURL, true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { //Increase the like count here in html } else { //Show some error } } }; xmlhttp.send(null);}

Kammiti Krishna

Lokesh


14 of 22 01.09.2014. 17:44

onreadystatechange: Stores a function (or the name of a function) to becalled automatically each time the readyState property changes

MAY 9, 2014 AT 5:33 AM

Hi lokesh, tell me what is protocol status==200 and request status

MAY 5, 2014 AT 9:14 AM

I have a Registration page.. I need to pass the input values to servlet using ajaxand json..And also i need to retrieve it in servlet…

MAY 5, 2014 AT 9:38 AM

I can help you here if you already have attempted something and struckanywhere. Starting from scratch is not possible for me due to my busyschedule.

APRIL 28, 2014 AT 1:33 PM

How come to know whether you response type is String or XML ????

APRIL 29, 2014 AT 3:08 AM

You must know before hand when you are hitting a service/server re-source.

MARCH 14, 2014 AT 10:47 AM

Hey, I’m learning AJAX . I know a little bit of Java, HTML,CSS and JavaScript. Itried to implement your example & I couldn’t. I’m posting my code here. Pleasetell me where I’m going wrong.

The HTML Page : get-current-time,html is the �le name.

Hello World in Ajax!

function ajaxAsyncRequest(reqURL)

Kammiti Krishna

Hema

Lokesh

shaswat

Lokesh

Rama Kamath


15 of 22 01.09.2014. 17:44

{//Creating a new XMLHttpRequest objectvar xmlhttp;if (window.XMLHttpRequest){xmlhttp = new XMLHttpRequest(); //for IE7+, Firefox, Chrome, Opera, Safari} else {xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”); //for IE6, IE5}//Create a asynchronous GET requestxmlhttp.open(“GET”, reqURL, true);

//When readyState is 4 then get the server outputxmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200){document.getElementById(“message”).innerHTML = xmlhttp.responseText;//alert(xmlhttp.responseText);}else{alert(‘Something is wrong !!’);}}};

xmlhttp.send(null);}

Message from Server::

The Servlet is : GetTimeServlet.java

import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.PrintWriter;import java.util.Date;


16 of 22 01.09.2014. 17:44

/*** Servlet implementation class GetTimeServlet*/public class GetTimeServlet extends HttpServlet {private static �nal long serialVersionUID = 1L;

/*** @see HttpServlet#HttpServlet()*/public GetTimeServlet() {super();// TODO Auto-generated constructor stub}

/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse re-sponse)*/protected void doGet(HttpServletRequest request, HttpServletResponse re-sponse) throws ServletException, IOException {// TODO Auto-generated method stubresponse.setHeader(“Cache-Control”, “no-cache”);response.setHeader(“Pragma”, “no-cache”);PrintWriter out = response.getWriter();Date currentTime= new Date();String message = String.format(“Currently time is %tr on %tD.”,currentTime, cur-rentTime);out.print(message);}

/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse re-sponse)*/protected void doPost(HttpServletRequest request, HttpServletResponse re-sponse) throws ServletException, IOException {// TODO Auto-generated method stub}

}


17 of 22 01.09.2014. 17:44

Please help me out. if possible.

MARCH 15, 2014 AT 4:41 PM

Really I can not provide much help with this much information. I would liketo know what is the problem you are facing. What’s environment in whichapp is running. OR, please zip your project sourcecode and send me athowtodoinjava[at]gmail[dot]com.

MAY 1, 2014 AT 7:03 PM

You didn’t put url. Create a page name like india.jsp and give it into that urlit will work

FEBRUARY 20, 2014 AT 11:12 AM

please can u explain different advantages and disadvantages with the prototypeajax call and jquery ajax call? And which parameter should help to decide whichmodel will be more convenient to use at certain place?


Here is a good discussion on topic. http://stackoverflow.com/questions/2644556/prototype-vs-jquery-strengths-and-weaknesses

FEBRUARY 3, 2014 AT 5:51 PM

good info lokesh..


Nice article. Thanks for sharing. Plz share JSON-AJAX implementation example.

DECEMBER 19, 2013 AT 11:10 AM

Excellent tutorial, thanks for such nice and in-depth explantion

Lokesh

Vivek Balachandran

pankaj Saboo

Lokesh

nuka

swapnil

vivek

suresh


18 of 22 01.09.2014. 17:44

DECEMBER 1, 2013 AT 7:00 PM

Though not a developer, tutorial is excellent – and removed the great confusion.Till now, I didn’t understand and afraid of the word – AJAX.Thanks

NOVEMBER 2, 2013 AT 2:21 PM

Great tutorial. Can I fetch data from a Database using Ajax?? If so, how?

OCTOBER 15, 2013 AT 6:57 PM

Hi LokeshI am implementing an module to access unique id of an remote url, I am usingiframe to load remote url eg http://www.thirdpartyurl.com I need to accessunique id from this page element. for eg image or any element which is in thirdparty url.

I did it using javascript and jquery and it is working �ne for local page eg. d:test-pageproduct.html but its not working for remoter url for eg http://www.shop-ping.com. I am unable to access the unique id.

I’m getting two kind of errors.1. Uncaught SecurityError: Blocked a frame with origin “null” from accessing aframe with origin “null”. Protocols, domains, and ports must match. (only inGOOGLE CHROME for both local and remote page)2. [18:52:10.608] Error: Permission denied to access property ‘nodeType’ @http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4 (FIREFOX)

So now i am planning to resolve this two issues by using java.

I kindly request you to provide tips and resources. It will be a great help for meand my time will be saved. I am a fresher in java.

Looking forward your helps.

ThanksGanesh

Deepu James

timothyganesh

Lokesh Gupta


19 of 22 01.09.2014. 17:44

OCTOBER 15, 2013 AT 11:04 PM

Ganesh, I do not know any such technique in java. You may use this infor-mation.

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

More help you may get from this:

http://en.wikipedia.org/wiki/Same-origin_policy#Workarounds

OCTOBER 16, 2013 AT 11:22 AM

Lokesh,Thanks for your suggestions. I will go through it. If I need furtherhelp please help me.

ThanksGanesh

OCTOBER 12, 2013 AT 7:51 AM

I want to learn many things from you please tell me your fees or atleast if i amable to get your notes on Spring,AJAX,Hibernate,Maven,RESTful

Please reply as i want to update myself.


My humble advice: “please have patience”. Next thing, I do not teach formoney and reason is I do not have time for this. Sorry if it disappoints you.Based on my very “busy” career of 7 years, I can advice you that nothingpays more than hard work. And let me tell you golden rule : “LEARNANYTHING NEW ***EVERYDAY***”.


Nice advice Mr. Lokesh. .Your site really helps to all because, compare to other tutorial sites,we can learn only the theory, but here you have provided sample

timothyganesh

Raja Rao

Lokesh Gupta

Rajeev


20 of 22 01.09.2014. 17:44

and it can be downloaded . . so really nice . .

if you can post about Spring,Struts and Hibernate, i will feel morehappy and sure i know that you will . . i’m waiting . .


Nice Article . Can you write a similar post for jquery?


I will try to �nd time for this.


Thanks

JUNE 21, 2013 AT 1:23 PM

IE5/6 rly? why not Netscape Navigator?

JUNE 21, 2013 AT 1:43 PM

Tough question. I have not really used netscape in my entire life. As muchI know, nobody does it today as there is whole range of modern browserswhich are just more than awesome.

JUNE 21, 2013 AT 4:06 PM

[...] As much I know, nobody does it today[...] similary as IE5/6

JUNE 22, 2013 AT 2:55 AM

IE6 is still being used for many companies at least inSpain… some of them changed to IE7 but you can get sur-prised sometimes…

vanshaj

Lokesh Gupta

vanshaj

b

Lokesh Gupta

b

Hugo Sandoval


21 of 22 01.09.2014. 17:44

Note:- In comment box, please put your code inside [java] ... [/java] OR [xml] ... [/xml] tagsotherwise it may not appear as intended.


22 of 22 01.09.2014. 17:44

ccomplete ajax tutorialomplete ajax tutorial

Documents