Talking about Ajax

Ajax Introduction

Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), is a web development technique that creates interactive Web applications, and is not a new language.

Ajax enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server.

This means that you can update a part of a webpage without reloading the entire page. In traditional Web pages, if you need to update your content, you must reload the entire page surface.

Ajax Technology System

XHTML and CSS

Dynamic display and interaction using the Document Object model

Data interaction and manipulation using XML and XSLT

Using XMLHttpRequest for asynchronous data reception

The workflow of Ajax

About XMLHttpRequest Objects

Property:

readyState

0: Request not initialized

1: Server Connection established

2: Request received

3: In Request processing

4: The request is complete and the response is ready

State

$: "OK"

404: Page Not Found

responsetext

Gets the response data in the form of a string.

Responsexml

Get the response data in XML form.

onReadyStateChange

The function (or function name) is called whenever the ReadyState property is changed.

Method:

The Xmlhttprequst object interacts with the server using the Send () and open () methods.

Open (Method,url,async)

Method: type of request; GET or POST

URL: The location of the file on the server

Async:true (asynchronous) or false (synchronous)

Send (String)

String: Only for POST requests

If it is a POST request, you must use setRequestHeader () to add the HTTP header. The sent data is then set in the Send () method, for example:

Xmlhttp.open ("POST", "ajax_test.asp", true);

Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");

Xmlhttp.send ("Fname=bill&lname=gates");

Steps to use Ajax

1. Create a XMLHttpRequest Object

The asynchronous invocation objects used by different browsers are also different, and asynchronous calls in IE are using the XMLHttpRequest object in the XMLHTTP component, while the XMLHttpRequest component is used directly in the Netscape, Firefox browser. As a result, XMLHttpRequest objects are created differently in different browsers.

The way to create a XMLHttpRequest object in Internet Explorer is as follows:

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

The way to create a XMLHttpRequest object in the Netscape browser is as follows:

var XMLHttpRequest = new XMLHttpRequest ();

2. Create an HTTP request

After you have created the XMLHttpRequest object, you must create an HTTP request for the XMLHttpRequest object that describes where the XMLHttpRequest object is going to get the data. It can usually be the data in a Web site, or it can be data from other files in the local.

To create an HTTP request, you can use the open () method of the XMLHttpRequest object, whose syntax code is as follows:

Xmlhttprequest.open (Method,url,flag,name,password)

The parameters in the code are interpreted as follows:

Method: This parameter is used to specify HTTP request methods, there are get, post, head, put, delete five methods, commonly used methods are get and post.

URL: This parameter specifies the URL address of the HTTP request, either an absolute URL or a relative URL.

Flag: This parameter is an optional parameter and the parameter value is a Boolean type. This parameter is used to specify whether to use asynchronous methods. True indicates asynchronous, false means synchronous, and true by default.

Name: This parameter is an optional parameter for entering the user name. This parameter must be used if the server requires validation.

Password: This parameter is an optional parameter for entering a password. This parameter must be used if the server requires validation. You can usually use the following code to access the contents of a Web site file.

3. Set a function to respond to changes in HTTP request status

After you create the HTTP request, you should be able to send the HTTP request to the Web server. However, the purpose of sending an HTTP request is to receive the data returned from the server. Starting with the creation of the XMLHttpRequest object, you will experience the following 5 states for sending data, receiving data, and XMLHttpRequest objects.

⑴ uninitialized state. when the XMLHttpRequest object is created, the object is in an uninitialized state, at which point the ReadyState property value of the XMLHttpRequest object is 0.

⑵ initialization State. when an HTTP request is created using the open () method after the XMLHttpRequest object is created, the object is in an initialized state. The ReadyState property value for the XMLHttpRequest object is now 1.

⑶ send data status. after initializing the XMLHttpRequest object, when sending data using the Send () method, the object is in the sending data state, at which point the ReadyState property value of the XMLHttpRequest object is 2.

⑷ receive data status. after the Web server receives the data and finishes processing, the returned results are delivered to the client. At this point, the XMLHttpRequest object is in the received data state, and the ReadyState property value of the XMLHttpRequest object is 3.

⑸ completion status. when the XMLHttpRequest object receives the data, it enters the completion state, at which point the ReadyState property value of the XMLHttpRequest object is 4. When the received data is stored in the client computer's memory, you can use the ResponseText property or the Responsexml property to get the data.

The data returned from the server side can only be obtained after the XMLHttpRequest object has completed the 5 steps above. Therefore, if you want to get the data returned from the server side, you must first determine the state of the XMLHttpRequest object.

The XMLHttpRequest object can respond to the ReadyStateChange event, which fires when the XMLHttpRequest object state changes (that is, when the value of the ReadyState property changes). Therefore, you can call a function from this event and judge the value of the ReadyState property of the XMLHttpRequest object in the function. If the ReadyState property value is 4, use the ResponseText property or the Responsexml property to get the data.

4. Set the statement that gets the server to return data

If the value of the ReadyState property of the XMLHttpRequest object equals 4, it means that the asynchronous call process is complete, and the data can be obtained by XMLHttpRequest the object's ResponseText property or Responsexml property.

However, the asynchronous call process is complete, does not mean that the asynchronous call succeeds, if you want to determine the success of the asynchronous call, but also to determine the XMLHttpRequest object's Status property value, only the value of the property is 200 to indicate the success of the asynchronous call, so to get the server to return the data of the statement, You must also first determine whether the value of the XMLHttpRequest object's Status property equals 200

5. Sending HTTP requests

After the setup of the above steps, the HTTP request can be sent to the Web server. The Send HTTP request can use the Send () method of the XMLHttpRequest object, and its syntax code is as follows:

Xmlhttprequest.send (data)

Where data is an optional parameter, you can use NULL instead if you don't need the parameter for the request. The format of the data parameter is similar to the format in which parameters are passed in the URL.

(Note: The ReadyState property value of the XMLHttpRequest object starts to change only after the Send () method is used, and the ReadyStateChange event is fired and the function is called)

6. Partial Update

After you obtain server-side data through an asynchronous call to Ajax, you can use JavaScript or the DOM to update the data in a Web page locally. Common local updates are available in the following 3 ways:

1, the data of the form object is updated;

2,ie update of the text between tabs in the browser;

Local refresh of 3,dom technology

Talking about Ajax