Asynchronous JavaScript & XML (AJAX) for Web Applications

UFCFV4-30-2 : Data, Schemas & Applications Asynchronous Javascript And XML AJAX : an introduction

What is AJAX? o Asynchronous Javascript And XML allows the updating of a web page without doing a page reload creates much nicer user experience makes possible the building of desk-top like applications on the web o AJAX is not really a technology by itself combination of Javascript, XML/JSON and some server-side scripting to create the XML/JSON server-side scripting could be done in PHP, .NET, Python, Java Servlet or Java Server Page (JSP), Javascript

Client/server interaction (synchronous)

general technique (simplified model) Server-side Web Page Script requests server-side script to be run script run, XML/JSON created info parsed from XML / text / json and used to update DOM by Javascript XML document returned

general technique (showing XMLHTTPRequest)

sending a request for a URL o xmlHttpRequest Object mozilla o tmpXmlHttpObject = new XMLHttpRequest(); IE o tmpXmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP"); o create the URL o tell the browser the name of the function to handle the response o send the url to the server

html + javascript (browser) 3 functions (javascript) : function createRequestObject() { // initialize request object } function makeGetRequest(someArg) { // initiate the request } function processResponse() { // process server response and update dom } html <div> section updated with returned text

processResponse o when the document is received by the browser control is transferred to where ever we told it to xmlHttp.onreadystatechange=processResponse in this case the function named processResponse

processResponse function processResponse() { //check if the server responded if(http.readyState == 4) { //read and assign the response from the server var response = http.responseText; //do additional parsing of the response, if needed //assign the response to the contents of the <div> tag. document.getElementById('description').innerHTML = response; //If the server returned an error, // message would be shown within the div tag!!. //So it may be worth doing some basic error checking //before setting the contents of the <div> } } view html

XMLHttpRequest Object o Methods: abort() - stop the current request getAllResponseHeaders - Returns complete set of headers (labels and values) as a string getResponseHeader(:headerLabel ) returns the string value of the requested header field open( method , URL ) sets a pending request send(content) transmits the request setRequestHeader( label , value ) sets label/value in the header

(continued) o Properties onreadystatechange - event handler to use readyState (0-uninitialized, 1-loading, 2-loaded, 3-interactive, 4- complete) responseText string version of the data returned responseXML DOM compatible document object returned by server status http response header code (200 good) statusText string message of status code

server-side script o creates a well formed XML document o sets the content type to text/xml o can be written in any language PHP ASP Python .NET Java / JSP javascript

sample PHP script $id = $_GET['id']; switch ($id) { case 1: echo 'Astraphobia, also known as ..'; break; case 2: echo 'Arithmophobia is the fear of numbers. . '; break; case 3: echo 'Ophidiophobia or ophiophobia is a .. '; break; } view full script

AJAX Advantages (pros) o Better interactivity AJAX allows easier and quicker interaction between user and website as pages are not reloaded for new content to be displayed. o Easier navigation AJAX applications on websites can be built to allow easier navigation to users in comparison to using the traditional back and forward button on a browser. o Compact With AJAX, several multi purpose applications and features can be handled using a single web page, avoiding the need for clutter with several web pages. o Backed by reputed brands Another assuring reason to use AJAX on your websites is the fact that several complex web applications are handled using AJAX, Google Maps is the most impressive and obvious example.

AJAX Disadvantages (cons) o The back and refresh button are rendered useless With AJAX, as all functions are loaded on a dynamic page without the page being reloaded or more importantly a URL being changed (except for a hash symbol maybe), clicking the back or refresh button would take you to an entirely different web page or to the beginning of what your dynamic web page was processing. This is the main drawback behind AJAX but fortunately with some good programming this issue can be addressed. o It is built on Javascript (this is NOT a disadvantage any more!!) While javascript is secure and has been heavily used by websites for a long period of time, a percentage of website surfers prefer to turn javascript functionality off on their browser rendering the AJAX application useless, a work around to this con is present as well, where the developer will need to code a parallel non-javascript version of the dynamic web page to cater to these users.

Javascript Frameworks for AJAX https://en.wikipedia.org/wiki/List_of_Ajax_frameworks#JavaScript

JQuery AJAX example: link to jQuery on Google flickr API call anonymous JavaScript function to receive data <div> to contain images run jquery_ajax_example.html

AngularJS AJAX example: data binding ajax call data source link to angularJS on Google json_data.txt run angular_ajax_example.html

HTML5 + AJAX + Local Storage:

Popular Javascript Frameworks supporting AJAX o Jquery - http://jquery.com/ - open source o AngularJS https://angularjs.org/ o Prototype http://www.prototypejs.org/ open source o mootools http://mootools.net/ open source o extJS - http://www.sencha.com/products/extjs/ - open source / commercial