Building better Web applications with Ajax technology

First, Introduction

Asynchronous Javascript+xml, or Ajax, is a Web development technology that creates interactive Web applications. This program uses JavaScript and XML to submit server requests from the client, and it only needs to exchange a small amount of data throughout the process without having to submit the entire Web page. As a result, such programs will be faster and more responsive, and will be one of the key basic technologies for a new generation of client-server systems. You can see a good AJAX practice technology show at the site http://www.google.com/webhp?complete=1&hl=en. In this page, if you enter any letter into the text box, then a Drop-down list box appears, and the content comes directly from the server without having to submit the entire page. The core of Ajax is the XMLHttpRequest object. The client can retrieve and directly submit XML data in the background. In order to convert the retrieved XML data into the HTML content that can be generated, it is necessary to rely on the client Document Object Model (DOM) to read the XML document node tree and make up the visible HTML elements of the user. In fact, Ajax is not a single technology like html,dhtml, which combines different technologies:

· The XMLHttpRequest object is used to exchange data asynchronously with the Web server.

· XML is commonly used as a format for transferring data back to the server (although it can be used in any format, such as plain text, HTML, etc.).

• If XML is used as a transformation format, then DOM is typically used with client-side scripting languages such as JavaScript to dynamically display and describe interactive information.

· XHTML (or HTML), CSS for markup and information formatting.

Second, the XMLHttpRequest object

Historically, it was Microsoft that first implemented the XMLHttpRequest object in an ActiveX object form in its Internet Explorer 5 for Windows. The Mozilla Engineering engineer then implemented a compatible native version of Mozilla 1.0 (and Netscape 7), and later Apple did the same job on safari 1.2. In fact, similar functionality is mentioned in the standard Document Object Model (DOM) level 3 loading and Storage specification of the consortium. Now, it becomes a de facto standard and starts to be implemented in most browsers that are released later.

(i) Creating objects

XMLHttpRequest objects are created differently depending on the browser. For Safari and Mozilla, the way they are created is as follows:

var req = new XMLHttpRequest();

For Internet Explorer 5.0+ (5.0 and later), the object name is passed to the ActiveX constructor:

var req = new ActiveXObject("Microsoft.XMLHTTP");

The method of this object controls all operations, and its properties store various pieces of data returned from the server, such as Xmlhttpobject.responsetext containing XML or string values returned from the server.

(ii) method

The methods for XMLHttpRequest objects supported in Windows IE 5.0+, Safari 1.2, and Mozila are listed below:

Method	Describe
Abort ()	Cancels the current request. If you call it on an object that does not process the request (ReadyState 0 or 4), "The mysterious Thing" happens.
getResponseHeader ("Headerlabel")	Returns the string value of a single header label
getAllResponseHeaders ()	Returns the complete header (label and value) collection as a string
Open ("Method", "URL" [, asyncflag[, "UserName" [, "Password"]])	Assign a destination URL, method, and other optional properties for a hanging request
Send (content)	Transfer request. (optionally) which can be included in a sent string or DOM object data
setRequestHeader ("label", "value")	Assign a label/value pair to the header in the request to be sent

In the above method, the open and send methods are the most important. Let's begin by discussing the open method from the point of view of the application.

var req;
………………………
req = new ActiveXObject("Microsoft.XMLHTTP");
……………
var url="AjaxServer.aspx?PubID="+ID;
……………
//打开一个到URL的GET请求
req.open("GET"，url，true);
//实际发送一个空请求
req.send(null);