IS 1052

1. IS 1052 AJAX

2. AJAX • Ajax overview ( From The missing Manual Series) • Asnychronous JavaScript and XML • Combination of technologies • HTML, JavaScript, CSS, Web browser, Web Server • Purposes • Display new HTML without reloading page • Submit a form and display results • Log in without leaving page • Browse database information

3. AJAX • XMLHttpRequest Object • Built into most Web browsers • Originally introduced in IE 5 • Object has a number of methods and properties that facilitate communication with a server • JavaScript • Sends request to the Web server • Waits for response • Processes response • Updates the page

4. AJAX • Web Server • Receives requests and sends info back to the Web browser • Typically involves Web server, application server and database server • Can just be the delivery of an HTML page or a section of an HTML page

5. AJAX • Steps for Ajax process • 1) Create an instance of the XMLHttpRequest object • Different for IE and other browsers • var newXHR = new XMLHttpRequest() • 2) Use the XMLHttpRequest object open method • Specifies GET or POST • Specifies the name of the web page on server that data is sent to • newXHR.open (‘GET’, ‘shop.php?productID=34’);

6. AJAX • Steps for Ajax process • 3) Create function to handle the results • The function can simply replace information on the web page or do more complicated things • Usually it manipulates the page’s DOM • newXHR.onreadystatechange = myCallbackFunction; • 4) Send the request • newXHR.send(null); • If POST then the argument would be the data 5) Receive the response the XHR object receives info on status and the reponse

7. AJAX Code • Reference the Tizag Tutorial: • http://www.tizag.com/ajaxTutorial/ajaxform.php • Demo: text http://www.xul.fr/en-xml-ajax.html#ajax-get-text • Demo:graphichttp://www.modelworks.com/ajax.html • Overall concepts • XMLHttpRequest Object is performing the communication between the browser and the server. • Steps: • Create the object • Create the function to handle the info coming back from the server • Send the request to the server

8. AJAX • Ajax with Jquery • load() function • Loads an HTML page into a specified element on the page • Example: • $(‘#headlines’).load(‘todays_news.html’); • The code fetches webpage called today_news.html and replaces the webpage section with id=headlines. • The fetched page can be a complete web page or a snippet such as an <h2> headline • Be careful with paths – the above example would have the web page and the fetched web page in the same directory • To grab only a section of a fetched page: • $(‘#headlines’).load(‘todays_news.html #news’); • Examples: http://www.alladinacademy.com/INFSCI1052/lecture/MM_JAVASCRIPT/MM_JAVASCRIPT/chapter11/complete_11.1.html • http://www.noupe.com/ajax/how-ajax-works.html

9. AJAX • Ajax with Jquery • If you need to get info other than just plain HTML, like messages, codes, info that needs processed • Jquery get and post functions • $.get(url, data, callback) • Notice there is no Jquery selector – not connected with any element • Three arguments • url is a string with path of server side script • data is either a string or JavaScript object literal containing info you want to send to server • callback is your function that processes returned info

10. AJAX • Ajax Jquery • Formatting the string for the data argument • Query String • JavaScript function: encodeURICcomponent • var queryString = ‘favFood=‘ + encodeURICcomponent (‘Mac & Cheese’); • Query strings are name /value pairs separated by an ampersand • You can type them in literally but be careful of certain characters like space and ampersands – can’t be used literally – best to use function

11. AJAX • Ajax Jquery • Formatting the string for the data argument • Object Literal { name1:’value1’, name2:’value2’ } Ex: var data = { rating=5, user:’Bob’ } $.post(‘rankMovie.php’, data);

12. AJAX • Ajax Jquery • Serialize function • var formData = $(#login’).serialize(); • #login is the id for a form • Serialize function collects all of the field names of the form and creates a single query string • Ex: var formData = $(#login’).serialize(); $get(‘login.php’,formData,loginResults);

13. AJAX • Ajax Jquery • Processing data from the server • Using the callback function • Callback function receives two arguments:data and status • Data – is the info back from the server • Status – codes indicating success or not • Ex: Function processResponse(data, status) { varnewHtml; If (status==‘success’) { newHTML = ‘<h2> Your vote is counted</h2>’; } Else { newHTML=‘<h2> There is an error</h2>’; } $(‘message’).html(newHTML); }

14. AJAX • Ajax Jquery • Can keep Ajax get and callback function together • Ex. $.get(‘file.php’,data,function(data, status) { your code });