Unit 1 Ajax Framework What is AJAX o

  • Slides: 23
Download presentation
Unit 1 – Ajax Framework

Unit 1 – Ajax Framework

What is AJAX? o o o AJAX stands for Asynchronous Java. Script and XML.

What is AJAX? o o o AJAX stands for Asynchronous Java. Script and XML. AJAX is not a new programming language, but a new way to use existing standards. AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.

Understanding Synchronous vs Asynchronous o o Before understanding AJAX, let’s understand classic web application

Understanding Synchronous vs Asynchronous o o Before understanding AJAX, let’s understand classic web application model and ajax web application model first. A synchronous request blocks the client until operation completes i. e. browser is unresponsive. In such case, javascript engine of the browser is blocked.

Understanding Synchronous vs Asynchronous o As you can see in the above image, full

Understanding Synchronous vs Asynchronous o As you can see in the above image, full page is refreshed at request time and user is blocked until request completes.

Understanding Synchronous vs Asynchronous o An asynchronous request doesn’t block the client i. e.

Understanding Synchronous vs Asynchronous o An asynchronous request doesn’t block the client i. e. browser is responsive. At that time, user can perform another operations also. In such case, javascript engine of the browser is not blocked.

Understanding Synchronous vs Asynchronous o o As you can see in the above image,

Understanding Synchronous vs Asynchronous o o As you can see in the above image, full page is not refreshed at request time and user gets response from the ajax engine. Let's try to understand asynchronous communication by the image given below.

What is AJAX? o o o AJAX is a technique for creating fast and

What is AJAX? o o o AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

What is AJAX? o AJAX is based on internet standards, and uses a combination

What is AJAX? o AJAX is based on internet standards, and uses a combination of: n n XMLHttp. Request object (to exchange data asynchronously with a server) Java. Script/DOM (to display/interact with the information) CSS (to style the data) XML (often used as the format for transferring data)

AJAX Working By Diagram?

AJAX Working By Diagram?

Where to put AJAX Code? o For simplicity we will use Java. Script and

Where to put AJAX Code? o For simplicity we will use Java. Script and Basic HTML for Client side and JSP for server side script. <html> <head> <script type=”text/javascript”> function update. Dynamically() { …… // AJAX SCRIPT GOES HERE …… } </script> </head> <body> <div id="my. Div"><h 2>Let AJAX change this text</h 2></div> <button type="button" onclick=“update. Dynamically()">Change Content</button> </body> </html>

How AJAX works? o o o AJAX - Create an XMLHttp. Request Object. All

How AJAX works? o o o AJAX - Create an XMLHttp. Request Object. All modern browsers support the XMLHttp. Request object (IE 5 and IE 6 uses an Active. XObject) means it has built in XMLHttp. Request object. The XMLHttp. Request object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Syntax for creating an XMLHttp. Request object: // For New Versions of Browser xmlhttp=new XMLHttp. Request(); or // for older versions xmlhttp=new Active. XObject("Microsoft. XMLHTTP");

How AJAX works? o To handle versions problem generally we write. if (window. XMLHttp.

How AJAX works? o To handle versions problem generally we write. if (window. XMLHttp. Request) // code for IE 7+, Firefox, Chrome etc. { xmlhttp=new XMLHttp. Request(); } else // code for IE 6, IE 5 { xmlhttp=new Active. XObject("Microsoft. XMLHTTP"); }

Send Request to Server. o o The XMLHttp. Request object is used to exchange

Send Request to Server. o o The XMLHttp. Request object is used to exchange data with a server. To send a request to a server, we use the open() and send() methods of the XMLHttp. Request object: xmlhttp. open("GET", "ajax_info. txt", true); xmlhttp. send();

Send Request to Server. Method Description open(method, url, async) Specifies the type of request,

Send Request to Server. Method Description open(method, url, async) Specifies the type of request, the URL, and if the request should be handled asynchronously or not. method: the type of request: GET or POST url: the location of the file on the server async: true (asynchronous) or false (synchronous) send(string) Sends the request off to the server. string: Only used for POST requests

Send Request to Server. Method Description set. Request. Header(header, value) Adds HTTP headers to

Send Request to Server. Method Description set. Request. Header(header, value) Adds HTTP headers to the request. header: specifies the header name value: specifies the header value

Asynchronous - True or False? o AJAX stands for Asynchronous Java. Script and XML,

Asynchronous - True or False? o AJAX stands for Asynchronous Java. Script and XML, and for the XMLHttp. Request object to behave as AJAX, the async parameter of the open() method has to be set to true: xmlhttp. open("GET", "ajax_test. jsp", true); o When using async=true, specify a function to execute when the response is ready in the onreadystatechange event: xmlhttp. onreadystatechange=function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("my. Div"). inner. HTML=xmlhttp. response. Text; } } xmlhttp. open("GET", "ajax_info. txt", true); xmlhttp. send();

Server Response o To get the response from a server, use the response. Text

Server Response o To get the response from a server, use the response. Text or response. XML property of the XMLHttp. Request object. Property Description response. Text get the response data as a string response. XML get the response data as XML data

Server Response o o The response. Text Property n If the response from the

Server Response o o The response. Text Property n If the response from the server is not XML, use the response. Text property. n The response. Text property returns the response as a string, and you can use it accordingly. The response. XML Property n If the response from the server is XML, and you want to parse it as an XML object, use the response. XML property

The onreadystatechange event o o o When a request to a server is sent,

The onreadystatechange event o o o When a request to a server is sent, we want to perform some actions based on the response. The onreadystatechange event is triggered every time the ready. State changes. The ready. State property holds the status of the XMLHttp. Request.

The onreadystatechange event o Three important properties of the XMLHttp. Request object are as

The onreadystatechange event o Three important properties of the XMLHttp. Request object are as follows, Property Description onreadystatechange Stores a function (or the name of a function) to be called automatically each time the ready. State property changes ready. State Holds the status of the XMLHttp. Request. 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 status 200: "OK" 404: Page not found

The onreadystatechange event o o In the onreadystatechange event, we specify what will happen

The onreadystatechange event o o In the onreadystatechange event, we specify what will happen when the server response is ready to be processed. When ready. State is 4 and status is 200, the response is ready: xmlhttp. onreadystatechange=function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("my. Div"). inner. HTML=xmlhttp. response. Text; } }

Using a Callback Function o o o A callback function is a function passed

Using a Callback Function o o o A callback function is a function passed as a parameter to another function. If you have more than one AJAX task on your website, you should create ONE standard function for creating the XMLHttp. Request object, and call this for each AJAX task. The function call should contain the URL and what to do on onreadystatechange.

Using a Callback Function function my. Function() { load. XMLDoc("ajax_info. txt", function() { if

Using a Callback Function function my. Function() { load. XMLDoc("ajax_info. txt", function() { if (xmlhttp. ready. State==4 && xmlhttp. status==200) { document. get. Element. By. Id("my. Div"). inner. HTML=xmlhttp. response. Text; } }); }