Examples of Ajax Tutorials _ajax related

What is AJAX

AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML).

AJAX is not a new programming language, but a new way of using existing standards.

Ajax is the art of exchanging data with the server and updating parts of the Web page without reloading the entire page (Ajax is a technology for creating fast Dynamic Web pages).

AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page.

Traditional Web pages (without AJAX) if you need to update your content, you must overload the entire page face.

XMLHttpRequest objects

The core of Ajax is the JavaScript object XMLHttpRequest

<script type= "Text/javascript" >
function createxhr () {
var xhr = null;
try {
//Firefox, Opera. +, safari,ie+
xhr = new XMLHttpRequest ();
}
catch (E) {
//Internet Explorer 
try {
xhr = new ActiveXObject ("Msxml.xmlhttp");
}
catch (E) {
try {
xhr = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (e) {
xhr = null;
}
}} return xhr;
}

XMLHttpRequest Object Usage

XMLHttpRequest objects have two important methods open and send

The first method to invoke when using the XMLHttpRequest object is the Open method, called: Xmlhttprequest.open ("Get", "default.aspx", true); This code sends a GET request for the Default.aspx page, and there are three points to note about this code:

1. The URL is relative to the current page path, you can also use the absolute path

2. Calling the Open method does not actually send the request, but rather initializes a request to be sent

3. Requests can only be sent to URLs that use the same protocol and port in the same domain, or they will be given an error for security reasons

To send a request to the server, you need to call the Send method and the Send method takes a parameter, which is the data that the request body is sending, and if you do not need to send the data, pass in NULL, and the request is sent to the server after the Send method is called, as follows

Xhr.send (NULL);

Requests are sent to the server, the server generates a response (Response) based on the request, and returns it to the Xhr object, which populates the properties of the XHR object after receiving the response, with four related attributes being populated:

1. ResponseText: Text returned as a response body

2. Responsexml: If the type of response content is "Text/xml" or "application/xml", this property will save the XML document containing the corresponding data

3. Status: HTTP status of the response (200,404,500, etc.)

4. Statustext:http Status Description

onReadyStateChange Events

When the request is sent to the server, we need to perform some response based tasks.

Whenever the readyState changes, the onReadyStateChange event is triggered.

The ReadyState property contains the state information of the XMLHttpRequest.

The following are three important properties of the XMLHttpRequest object:

In the onReadyStateChange event, we specify the tasks that are performed when the server responds to preparation for processing.

When the readyState equals 4 and the status is 200, the response is ready:

Xmlhttp.onreadystatechange=function ()
{
if (xmlhttp.readystate== && xmlhttp.status==)
{
document.getElementById ("Mydiv"). Innerhtml=xmlhttp.responsetext
}

We can call the Abort method to cancel the asynchronous request before accepting the response: XMLHttpRequest. Abort ();

Attention:

When using the Send () method of the XMLHttpRequest object, send (NULL) is required if you are using a GET request or a POST request that does not require sending data;

If you want to send data data, you need to use a POST request, first using setRequestHeader () to add the HTTP headers. Then specify the data you want to send in the Send () method:

Xmlhttp.open ("POST", "ajax_test.asp", true);
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xmlhttp.send ("Fname=bill&lname=gates");

The above content is a small series to introduce the Ajax tutorial examples of detailed, I hope to help you!