1 / 15

AJAX OVERVIEW

AJAX OVERVIEW. What is AJAX?. AJAX stands for Asynchronous JavaScript And XML .

chaela
Download Presentation

AJAX OVERVIEW

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAXOVERVIEW

  2. What is AJAX? • AJAX stands for Asynchronous JavaScript And XML. • AJAXis not a technology in itself or it is not a new programming language, but it is a technique for creating better, faster and more interactive web applications using existing technologies like HTML or XHTML, CSS, JavaScript, DOM, XML, XSLT and the XMLHttpRequest object. • With AJAX, JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, JavaScript can trade data with a web server, without reloading the page. • Popular sites using AJAX are Gmail, Flickr, Google Maps, My Yahoo(shuffling windows) and many more.

  3. DefiningAJAX Ajax incorporates: • Standards-based presentation using XHTML and CSS. • Dynamic display and interaction using the Document Object Model. • Data interchange and manipulation using XML and XSLT. JSON can also be used as alternative format. • Asynchronous data retrieval using XMLHttpRequest. • JavaScript binding everything together.

  4. Benefits of AJAX • Does quick, incremental updates to the user interface without reloading the entire browser page. Thus improves bandwidth utilization. • Ajax applications are browser and platform independent. • Parse and work with XML documents.

  5. Howit works • AJAX runs in your browser • Works with asynchronous data transfers (HTTP requests) between the browser and the web server • Http requests are sent by JavaScript calls without having to submit a form • XML is commonly used as the format for receiving server data but plain text may be used as well

  6. XMLHttpRequest Object • Introduced originally by Microsoft in IE as an ActiveX object, called XMLHTTP. • Later Mozilla, Safari and other browsers introduced XMLHttpRequest that works exactly as Microsoft ActiveX object. • The object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7. • More about this object can be read at. http://developer.mozilla.org/en/AJAX/Getting_Started http://www.w3schools.com/Ajax/ajax_example.asp

  7. Steps to make AJAX call • Initialize XMLHttpRequest object varxmlRequest; function InitializeRequest() { var e; try { // code for IE7+, Firefox, Chrome, Opera, Safari xmlRequest = new XMLHttpRequest(); } catch (e) { try { // code for IE6, IE5 xmlRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } }

  8. Steps to make AJAX call • The setRequestHeader method (Optional) xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); • The onreadystatechange event listener xmlRequest.onreadystatechange = nameOfTheFunction; OR xmlRequest.onreadystatechange = function() { // do the thing }; • The open method Syntax: open(method, url, async, user, password) xmlRequest.open('GET', url, true);

  9. Steps to make AJAX call • The send method xmlRequest.send(); OR xmlRequest.send(null); OR xmlRequest.send(data); • The abortmethod xmlRequest.abort();

  10. Handling the Server Response function nameOfTheFunction() { if (xmlRequest.readyState == 4) { if (xmlRequest.status == 200) { \\OK alert(xmlRequest.responseText); } else { alert('There was a problem with the request.'); } } } • The HTTP response • responseText • responseXML

  11. readyStateProperty • It defines the current state of the XMLHttpRequest object • Possible values for the readyState

  12. RetrievingResponse Header Info • getResponseHeader xmlRequest.getResponseHeader('Last-Modified'); • getAllResponseHeaders xmlRequest.getAllResponseHeaders(); Output: HTTP/1.1 200 OK Server: Microsoft-IIS/4.0 Cache-Control: max-age=172800 Expires: Sat, 06 Apr 2002 11:34:01 GMT Date: Thu, 04 Apr 2002 11:34:01 GMT Content-Type: text/html Accept-Ranges: bytes Last-Modified: Thu, 14 Mar 2002 12:06:30 GMT ETag: "0a7ccac50cbc11:1aad" Content-Length: 52282 • Complete List: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html http://en.wikipedia.org/wiki/List_of_HTTP_headers

  13. Samples

  14. Drawbacks • Ajax interfaces are substantially harder to develop properly than static pages. • Pages dynamically created using successive Ajax requests do not automatically register themselves with the browser's history engine. • Dynamic web page updates also make it difficult for a user to bookmark a particular state of the application. • Any user whose browser does not support JavaScript or XMLHttpRequest, or simply has this functionality disabled, will not be able to properly use pages which depend on Ajax. Similarly, devices such as mobile phones, PDAs, and screen readers may not have support for the required technologies. • Ajax opens up another attack vector for malicious code that web developers might not fully test for. • Ajax-powered interfaces may dramatically increase the number of user-generated requests to web servers and their back-ends (databases, or other). This can lead to longer response times and/or additional hardware needs. • User interfaces can be confusing or behave inconsistently when normal web patterns are not followed.

  15. Question & Answers

More Related