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