Group 1
Pham Thanh Dat
Nguyen Hung Cuong
Bui Thanh Tung
Tran Thi Thu Phuong
Nguyen Anh Dung
AJAX
Content
History of AJAX
Introduction
Technologies Used
Demo
Conclusion
History of Ajax
• Static web pages
– Static html page is loaded
– No interaction with user
• Dynamic web pages
– CGI, Applet (5/1995), JavaScript, Servlet and ASP, Flash (1996)
– IFFRAME (1996) and Layer (1997): asynchronous; Remote Scripting (1998)
– In 2005 Google use XMLHttpRequest, the name Ajax started to be so popular.
Purpose of AJAX
Prevents unnecessary reloading of a page.
AJAX aims at loading only the necessary information, and making only the necessary changes on the current page without reloading the whole page.
Introduction
AJAX stands for Asynchronous JavaScript and XML.
Ajax is a group of interrelated web development methods used on the client-side to create interactive web applications.
Web applications can retrieve data from the server asynchronously without interfering with the display and behavior of the existing page.
Data is usually retrieved using the XMLHttpRequest
object.
Ajax is a group of technologies: HTML, CSS, DOM, XML, JSON, JavaScript, ...
What supports and not support
Support:
Konqueror, Internet Explorer 4.0 and upper, Mozilla Firefox...
Not support: mobile explorer
Tools for AJAX:
Atlas, toolkit Ajax (Microsoft )
Dojo Toolkit, toolkit Ajax/DHTML
Prototype
Sajax, toolkit Ajax
Rialto (Rich Internet AppLication TOolkit)
Technology used
Javascript and other script client (client side)
XML (for information exchange)
ASP or JSP, PHP, .NET… (server side)
Why Ajax
XMLHttpRequest : Method
XMLHttpRequest used to send a request and receive
a response.
Method:
open(HttpRequest, url, aschyn); send(contend);
setsetRequestHeader(string header, string value),
abort(); getAllResponseHeaders();
getResponseHeader( String header)
XMLHttpRequest: Properties
• onreadystatechange
• readyState: 0 (Uninitialized) request not initialized
1 (Loading) server connection established
2 (Loaded) request received
3 (Interactive) processing request
4 (Complete): request finished and response is ready
• responseText:
• responseXML.
• Status: 200: OK; 400: not found
• statusText: OK or Not Found, …
How the Ajax work with XMLHTTPRequest
Web page Ajax Engine
Server
Request
readyState
response
Process
Return
data
XMLHTTPRequest
Create serverrequest
send
Monitor status
Get response
Capture
event
Updatepage
Create an XMLHttpRequest Object
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera,
Safarixmlhttp=new XMLHttpRequest();}
else{// code for IE6, IE5xmlhttp=new
ActiveXObject("Microsoft.XMLHTTP");}
Send a Request To a Server
• Method open(method,url,async)
– method: the type of request: GET or POSTurl: the location of the file on the serverasync: true (asynchronous) or false (synchronous)
• Method send(string)
– string: Only used for POST requests
Example:
xmlhttp.open("GET","demo_get.asp",true);xmlhttp.send();
GET or POST?
• GET is simpler and faster than POST
• 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
POST example
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-
type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
setRequestHeader(header,value)
• Adds HTTP headers to the request.
header: specifies the header namevalue: specifies the header value
Server Response
• ResponseText Property
• ResponseXML Property
XMLHTTPRequest : Example Send Response
Document.getElementById("myDiv").innerHTML=xmlhttp.responseText
xmlDoc=xmlhttp.responseXML;var txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++){txt=txt + x[i].childNodes[0].nodeValue + "<br />";}
document.getElementById("myDiv").innerHTML=txt;
XMLHTTPRequest : Example onreadystatechange
xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 &&
xmlhttp.status==200){document.getElementById("myDiv").innerH
TML=xmlhttp.responseText;}
}
Conclusion
Advantages:
Web page can be refreshed dynamically and load much faster.
Disadvantages:
• The back button may be deactivated.
• Hard to bookmark Ajax web pages.
• Requires a stable (and fast) internet connetion.
• Ajax pages are not indexable by web crawlers.
Does AJAX requires JavaScript? Explain in details
• No, It does not.
• Explain:
AJAX requires Client-side script, you can choice JavaScript or VBScript.
AJAX usually comes with JavaScript because it's being supported by almost browsers, but VBScript only can run in Internet Explorer.
Explain more in details the notion of "state" for the XMLHttpRequest object. What is the purpose of this "state".
• State or readyState is the current state of the request operation. ReadyState can be one of the following values:0: The object has been created, but not initialized (the open method has not been called).1: A request has been opened, but the send method has not been called. 2: The send method has been called. No data is available yet. 3: Some data has been received; however, neither responseText nor responseBody is available. 4: All the data has been received.
Example of situations where it is better to do GET requests
Use GET requests is simpler and faster than POST requests, but GET request is less secure and has limitation in the length of parameters.Situations:- Use GET requests when you pass simple parameters to the target pages.Example:xmlhttp.open("GET","get_ticket_status.asp?mode=1&cinema=mega_star&movie=basic_instinct",true);xmlhttp.send();
Example of situations where it is better to perform POST requests.
Use POST requests when you need to submit a large amount of data to target pages, or send authentication data.Example:xmlhttp.open("POST","ajax_post.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");var email_body = encodeURIComponent(document.form1.email_body);xmlhttp.send("email_body="+email_body);
The response sent by the server is always in XML. True or false? Explain.
• It is False.
• Explain:
The response format sent by the server depends on the response body format and the way you receive it.If the response format is plain text or HTML, you can use XMLHTTP.responseText to get the response body as a string.If the response format is XML, you can use XMLHTTP.responseXML to retrieves the response body as an XML Document Object Model (DOM) object
References
• “Ajax and the DOM API”, Dr Amélie Cordier
• “AJAX Tutortial”, http://www.xul.fr/en-xml-ajax.html
• “AJAX Advantages and Disadvantages”,http://www.ajaxwith.com/AJAX-Advantages-and-Disadvantages.html