INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE

2 Outline AJAX

Request to Server - Traditional Make a request to a server -> "go" to a URL The user clicks on a button or a link. The browser creates a URL for that action and queries the server for it. The server sends back a new page. The browser leaves the old page and displays the new page 3

Request to Server - using AJAX The user clicks on a button or a link. An XMLHttpRequest object is created A callback function is associated with that object The request for that page is sent to the server asynchronously (in the background). The server handles the request. The callback function modifies a part of the page dynamically using DOM access methods. 4

5 AJAX Asynchronous JavaScript And XML Not a new programming language. The art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. A new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script.

6 AJAX Asynchronous JavaScript And XML Uses: – HTML for content, – CSS for presentation, – DOM & JavaScript for dynamic content display. Conventional web application: transmits information to and from the sever using synchronous requests. With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen.

7 AJAX Asynchronous JavaScript And XML XML is commonly used as the format for receiving server data, although any format, including plain text, can be used. AJAX is a web browser technology independent of web server software. A user can continue to use the application while the client program requests information from the server in the background Intuitive and natural user interaction. No clicking required only Mouse movement is a sufficient event trigger. Data-driven as opposed to page-driven.

8 Technologies Used in AJAX XMLHttpRequest object (to exchange data asynchronously with a server) JavaScript/DOM (to display/interact with the information) CSS (to style the data) XML (often used as the format for transferring data)

9 AJAX Examples Google Suggest – As you type, Google will offer suggestions. Use the arrow keys to navigate the results Gmail – Gmail is a new kind of webmail, built on the idea that can be more intuitive, efficient and useful Google Maps – A user can drag the entire map by using the mouse instead of clicking on a button or something Yahoo Maps (new) – Now it's even easier and more fun to get where you're going! Youtube Facebook tabs.

10 AJAX Browser Support Mozilla Firefox 1.0 and above Microsoft Internet Explorer 5 and above Apple Safari 1.2 and above. Google Chrome Opera 7.6 and above  Need to take care of different browsers.

11 How AJAX Works

12 Steps of AJAX Operation 1.A client event occurs 2.An XMLHttpRequest object is created 3.The XMLHttpRequest object is configured 4.The XMLHttpRequest object makes an asynchronous request to the Webserver. 5.Web server returns the result containing XML document. 6.The XMLHttpRequest object processes the result. 7.The HTML DOM is updated

13 Example AJAX Code Ex_ajax.html Ex_ajax.js Hello.txt

14 Create an XMLHttpRequest Object variable=new XMLHttpRequest(); variable=new ActiveXObject("Microsoft.XMLHTTP"); E.g.: var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

15 XMLHttpRequest Methods Send a Request To a Server open(method,url,async) method: the type of request: GET or POST url: the location of the file on the server The file can be any kind of file, e.g.,.txt,.xml,.asp and.php (which can perform actions on the server before sending the response back). async: true (asynchronous) or false (synchronous) E.g.: – ajaxRequest.open("GET", "hello.txt", true); send(string) Sends the request off to the server. string: Only used for POST requests E.g.: – ajaxRequest.send(null);

16 GET V.S. POST GET is simpler and faster than POST, and can be used in most cases. use POST requests when: – A cached file is not an option (update a file or database on the server) – Sending a large amount of data to the server (POST has no size limitations) – Sending user input (which can contain unknown characters), POST is more robust and secure than GET

17 XMLHttpRequest Properties Server Response responseText Returns the response as a string. E.g.: – document.myForm.display1.value = ajaxRequest.responseText; responseXML Returns the response as XML.

18 XMLHttpRequest Properties onreadystatechange An event handler for an event that fires at every state change. readyState Holds the status of the XMLHttpRequest object. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready

19 XMLHttpRequest Properties status Returns the status as a number: 200: "OK" 404: Page not found statusText Returns the status as a string: "OK“ "Not Found"

20 The end of the topics for the semester. Good luck for all your exams! Thank you!