INT222 - Internet Fundamentals

1. INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 sunny.shi@senecacollege.ca SENECA COLLEGE

2. Outline AJAX

3. 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

4. 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 serverasynchronously (in the background). • The server handles the request. • The callback function modifies a part of the page dynamically using DOM access methods.

5. AJAXAsynchronous 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. AJAXAsynchronous JavaScript And XML • Uses: • HTML for content, • CSS for presentation, • DOM & JavaScriptfor 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. AJAXAsynchronous 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 technologyindependent 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 email 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 • A client event occurs • An XMLHttpRequest object is created • The XMLHttpRequest object is configured • The XMLHttpRequest object makes an asynchronous request to the Webserver. • Web server returns the result containing XML document. • The XMLHttpRequest object processes the result. • 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, Safarixmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5xmlhttp=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 • responseTextReturns the response as a string. • E.g.: • document.myForm.display1.value = ajaxRequest.responseText; • responseXMLReturns the response as XML.

18. XMLHttpRequest Properties • onreadystatechangeAn event handler for an event that fires at every state change. • readyStateHolds the status of the XMLHttpRequest object. Changes from 0 to 4: 0: request not initialized 1: server connection established2: request received 3: processing request 4: request finished and response is ready

19. XMLHttpRequest Properties • statusReturns the status as a number: 200: "OK"404: Page not found • statusTextReturns 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!

21. Thank you!