Introduction to AJAX and its usage in combination JSP file

AJAX VOLUME 1 Introduction to AJAX Using AJAX in combination with JSP J. M. V. Swamy Naidu, M.C.A. [2009] [NAIDUMCA1@GMAIL.COM] Introduction to AJAX 2009 A JAX stands for Asynchronous Javascript And XML. What You Should Already Know Before you continue you should have a basic understanding of the following:  HTML / XHTML  JavaScript If you want to study these subjects first, find the tutorials at www.w3schools.com. AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications. With AJAX, your JavaScript can communicate directly with the server, using the JavaScript’s XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. The AJAX technique makes Internet applications smaller, faster and more user-friendly. AJAX is a browser technology independent of web server software. AJAX is Based on Web Standards     JavaScript XML [Extensible Markup Language] HTML [Hyper Text Markup Language] CSS [Cascading Style Sheet] The web standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent. AJAX is About Better Internet Applications. J. M. V. Swamy Naidu, M.C.A. Introduction to AJAX 2009 Web applications have many benefits over desktop applications; they can reach a larger audience, they are easier to install and support, and easier to develop. However, Internet applications are not always as "rich" and userfriendly as traditional desktop applications. With AJAX, Internet applications can be made richer and more userfriendly. You Can Start Using AJAX Today there is nothing new to learn. AJAX is based on existing standards. These standards have been used by most developers from several years. AJAX Uses HTTP Requests  In traditional JavaScript coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the "Submit" button to send/get the information, wait for the server to respond, and then a new page will load with the results.  Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.  With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object.  With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background. J. M. V. Swamy Naidu, M.C.A. Introduction to AJAX 2009 The XMLHttpRequest Object  By using the XMLHttpRequest object, a web developer can update a page with data from the server after the page has been loaded!  AJAX was made popular in 2005 by Google (with Google Suggest).  Google Suggest is using the XMLHttpRequest object to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.  The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.  Internet Explorer supports the AJAX in the form of an ActiveXObject, and it is named as Micosoft.XMLHTTP A Simple example for AJAX usage: Here we need two files to explain how to use the AJAX in web development. These two files are named as AJAXRequestHTML.htm AJAXResponseJSP.jsp The two files are self descriptive by their names, the first one is a simple HTML file that generates and sends the http request to the web server. Where as the second is a JSP file that is resides on the server side and runs on the server in response to the http request received by the web server. First we write code for the AJAXRequestHTML.htm and then AJAXResponseJSP.jsp files in the same order as they are accessed by the client. J. M. V. Swamy Naidu, M.C.A. Introduction to AJAX  Source code for the AJAXRequestHTML.htm file: 2009 The source code for HTML file is divided into 4 parts/functions for the better understanding purpose. 1. Browser checker and XMLHttpRequest object creator. 2. Sender request to server. 3. Response handler from server. 4. Response data displayer. Here we use two global variables, 1. request_URL 2. request_Object 1. Browser checker and XMLHttpRequest object creator:  Implementations for the XMLHTTPRequest object are different for different browsers.  For Mozilla Firefox it is implemented as XMLHttpRequest object.  For Internet Explorer it is implemented as Microsoft.XMLHTTP or Msxml2.XMLHTTP  So you need to check for the browser first. J. M. V. Swamy Naidu, M.C.A. Introduction to AJAX 2009 As you seen above the code first checks for the browser type and then create appropriate request object and finally returns the object created. 2. Send requsest to Server: Before going to write the code for this function you might have to meet some of the AJAX methods, they are: open(): Establishes the connection to the server. send(): Send the data to the server. abort(): Aborts the current transmission of data and terminates the connection. open(): This is the method that actually establishes the communication with the server. It takes three parameters, they are: 1. Type of Method: It either GET or POST. 2. Request handler’s URL: The URL for the request handler on the server’s side that generates the response. 3. Mode of transmission: It’s a Boolean value that indicates the Asynchronous transmission true or false. By default it is true. Caution: Care must be taken when giving URL value of the request handler that resides on the server side. Here I place these two files in the same directory that was the default directory for my server to sees for the files. For example in Tomcat, the file AJAXrequestHTML.htm is placed in the folder webapps/examples/jsp, now it can be accessible by the URL from the browser http://localhost:8080/examples/jsp/AJAXRequestHTML.htm. Now the request handler AJAXResponseJSP.jsp is also placed in the same folder as the AJAXRequestHTML.htm, then we use the URL from the Javascript code as http://localhost:8080/examples/jsp/AJAXResponseJSP.jsp If the path value is changed for the request handler the appropriate value should be provided for the path that should be resolved correctly. J. M. V. Swamy Naidu, M.C.A. Introduction to AJAX 2009 Some properties we are using here are: onreadystatechange. readyState. status. responseText. function makeAndSendRequest() { request_Object = createObject(); request_Object.open(“GET”, request_URL, true); request_Object.onreadystatechange = responseHandler; request_Object.send(null); } Here, In the first line of the code it’s a call to the method createObject(), that we’ve already created, that returns the XMLHttpRequest object. In the second line, it’s a call to the AJAX method open using GET method. In the third line, it’s the assignment of the value that is the name of the method *don’t use any parenthesis here+ used whenever the ready state changes a call to the assigned method is performed. In the last and fourth line, there is a call to the send method with null value [it requires value when using POST method instead of GET]. 3. Response Handler from server: The following code is executed whenever the desired values for the status and readyState properties are assigned. For example, status values are 200 – resource found, 404 – resource not found, 500 – server side error. readyState value is, 0– request not prepared yet. J. M. V. Swamy Naidu, M.C.A. Introduction to AJAX 2009 1-Request initialized. 2-Preparing request with data. 3-Prepare request for submission. 4-Request submitted successfully. So here we need the value for the status is 200 and for the readyState are 4. Now it’s time to write code. function responseHandler() { if( request_Object.readyState == 4 ) { if( request_object.status == 200 ) { displayResponse(request_Object.responseText); } } } 4. Display response: function displayResponse(val) { //Here divX is the id of the div tag inside the //AJAXRequestHTML.htm file, we set the value for that. document.getElementById(“divX”).innerHTML = “” + val + “”; } Here we are trying to set the innerHTML value for the div tag identified by it’s unique id divX. Now the integration of the above parts/segments of code into a single html file is, J. M. V. Swamy Naidu, M.C.A. Introduction to AJAX 2009 J. M. V. Swamy Naidu, M.C.A. Introduction to AJAX 2009

Enter your name: