Ajax The hype n n n Ajax sometimes

Ajax

The hype n n n Ajax (sometimes capitalized as AJAX) stands for Asynchronous Java. Script And XML Ajax is a technique for creating “better, faster, more responsive web applications” Web applications with Ajax are supposed to replace all our traditional desktop applications These changes are so sweeping that the Ajax-enabled web is sometimes know as “Web 2. 0” Ajax also cures cancer, ends hunger, and brings about world peace

The reality n Ajax is a technique for creating “better, faster, more responsive web applications” n n n GUIs are HTML forms (and you know how beautiful and flexible those are) The technology has been available for some time Nevertheless, Ajax is the “hot new thing” because: n n n But they still aren’t as responsive as desktop applications, and probably never will be Web applications are useless when you aren’t on the web Google uses it extensively, in things like Google Earth and Google Suggest It’s recently been given a catchy name Ajax is a useful technology, and a good thing to have on your resumé

How Ajax works 1. You do something with an HTML form in your browser 2. Java. Script on the HTML page sends an HTTP request to the server 3. The server responds with a small amount of data, rather than a complete web page 4. Java. Script uses this data to modify the page n This is faster because less data is transmitted and because the browser has less work to do

Underlying technologies n n Java. Script HTML CSS XML n n XML is often used for receiving data from the server Plain text can also be used, so XML is optional n HTTP n All these are open standards

Starting from the browser… n Your browser must allow Java. Script, or Ajax won’t work n n n Otherwise, there’s nothing special required of the browser Your browser has some way of providing data to the server—usually from an HTML form Java. Script has to handle events from the form, create an XMLHttp. Request object, and send it (via HTTP) to the server n n Nothing special is required of the server—every server can handle HTTP requests Despite the name, the XMLHttp. Request object does not require XML

The XMLHttp. Request object n n Java. Script has to create an XMLHttp. Request object For historical reasons, there are three ways of doing this n n For most browsers, just do var request = new XMLHttp. Request(); For some versions of Internet Explorer, do var request = new Active. XObject("Microsoft. XMLHTTP"); For other versions of Internet Explorer, do var request = new Active. XObject("Msxml 2. XMLHTTP"); The next slide shows a Java. Script function for choosing the right way to create an XMLHttp. Request object

Getting the XMLHttp. Request object function get. XMLHttp. Request { var request = false; try { request = new XMLHttp. Request(); } catch(err 1) { try { var request = new Active. XObject("Microsoft. XMLHTTP"); } catch(err 2) { try { var request = new Active. XObject("Msxml 2. XMLHTTP"); } catch(err 3) { request = false; } } } return request; } SAMS Teach Yourself Ajax in 10 Minutes, Phil Ballard, p. 85

Preparing the XMLHttp. Request object n n Once you have an XMLHttp. Request object, you have to prepare it with the open method request. open(method, URL, asynchronous) n The method is usually 'GET' or 'POST' n The URL is where you are sending the data n n If using a 'GET', data is appended to the URL If using a 'POST', data is added in a later step If asynchronous is true, the browser does not wait for a response (this is what you usually want) request. open(method, URL) n As above, with asynchronous defaulting to true

Sending the XMLHttp. Request object n n Once the XMLHttp. Request object has been prepared, you have to send it request. send(null); n n This is the version you use with a GET request. send(content); n n This is the version you use with a POST request The content has the same syntax as the suffix to a GET request POST requests are used less frequently than GET requests Example: request. set. Request. Header('Content-Type', 'application/x-www-form-urlencoded'); request. send('var 1=' + value 1 + '&var 2=' + value 2);

On the server side n n The server gets a completely standard HTTP request In a servlet, this would go to a do. Get or do. Post method The response is a completely standard HTTP response Instead of returning a complete HTML page as a response, the server returns an arbitrary text string (possibly XML, possibly something else)

Getting the response n n Ajax uses asynchronous calls—you don’t wait for the response Instead, you have to handle an event n request. onreadystatechange = some. Function; n n This is a function assignment, not a function call When the function is called, it will be called with no parameters function some. Function() { if(request. ready. State == 4){ var response = request. response. Text; // Do something with the response } } To be safe, set up the handler before you call the send function

Using response data n When you specify the callback function, request. onreadystatechange = some. Function; n you can’t specify arguments Two solutions: n Your function can use the request object as a global variable n n This is a very bad idea if you have multiple simultaneous requests You can assign an anonymous function: request. onreadystatechange = function() { some. Function(request); } n Here the anonymous function calls your some. Function with the request object as an argument.

Displaying the response n n http_request. onreadystatechange = function() { alert. Contents(http_request); }; http_request. open('GET', url, true); http_request. send(null); function alert. Contents(http_request) { if (http_request. ready. State == 4) { /* 4 means got the response */ if (http_request. status == 200) { alert(http_request. response. Text); } else { alert('There was a problem with the request. '); } } } From: http: //developer. mozilla. org/en/docs/AJAX: Getting_Started

The ready. State property n n The ready. State property defines the current state of the XMLHttp. Request object. Here are the possible values for the ready. State property: n n n n ready. State=0 after you have created the XMLHttp. Request object, but before you have called the open() method. ready. State=1 after you have called the open() method, but before you have called send(). ready. State=2 after you have called send(). ready. State=3 after the browser has established a communication with the server, but before the server has completed the response. ready. State=4 after the request has been completed, and the response data have been completely received from the server. Not all browsers use all states Usually you are only interested in state 4 Mostly from: http: //www. w 3 schools. com/ajax_xmlhttprequest. asp

Doing it with XML n n Here’s an XML file named test. xml: <? xml version="1. 0" ? > <root> I'm a test. </root> Then in alert. Contents() from the previous slide, we need to replace the line alert(http_request. response. Text); with: var xmldoc = http_request. response. XML; var root_node = xmldoc. get. Elements. By. Tag. Name('root'). item(0); alert(root_node. first. Child. data); From: http: //developer. mozilla. org/en/docs/AJAX: Getting_Started

XML notes n n The XML response object supports very complete XML DOM processing The response header must include: n n n Content-Type: application/xml or IE will throw an “Object expected” Java. Script error Cache-Control: no-cache or the response will be cached and the request will never be resubmitted For some browsers you may need to do request. override. Mime. Type('text/xml'); n In Firefox, this will give an error if the response isn’t valid XML

inner. HTML n inner. HTML is a non-W 3 C DOM property that gets or sets the text between start and end tags of an HTML element n n When the inner. HTML property is set, the given string completely replaces the existing content of the object If the string contains HTML tags, the string is parsed and formatted as it is placed into the document Syntax: var markup = element. inner. HTML; element. inner. HTML = markup; Example: document. get. Element. By. Id(some. Id). inner. HTML = response;

Summary n n n Create an XMLHttp. Request object (call it request) Build a suitable URL, with ? var=value suffix request. open('GET', URL) request. onreadystatechange = handler. Method; request. send(null); function alert. Contents() { if (request. ready. State == 4) { // do stuff } } }

The End