Ajax Study Notes-Basic Principles

Ajax Study Notes-Basic Principles

Previously, I was able to implement simple and basic applications for Ajax, but I didn't know how it works. As the saying goes, "the Code Porter" is not steadfast. I have re-read the content of Ajax over the past few days, let's share this study today.

Ajax, asynchronous javascript and xml (I personally prefer to know it), that is, asynchronous javascript and XML;

To put it simply, javascript is a Web scripting language; XML (extensible markup language) refers to an extensible markup language; Asynchronous is another concept, which is generally compared with synchronous, asynchronous and easy-to-use taste, high performance, synchronization, is more persistent, especially focused, for example, I want to cook a pot of boiling water, asynchronous is that when boiling water, I can do other things, call, chat, pour flowers, and do yoga. synchronization is when boiling water, I stare closely at boiling water, every step, until the water is open, shi fangxiu.

OK, back to the question. ajax refers to partial refresh and asynchronous updates. It is not "Ah, it is a new programming language", but a combination of several technologies, such as javascript, XML, CSS, DOM model. Well, there is a core of everything, right? The core of ajax is XMLHttpRequest (XHR, HR manager at the X number for short. It's a strong joke ), the Chinese meaning is extensible hypertext transfer requests. XHR objects are used to exchange data with the server in the background. Let's look at them in a diagram. This is a picture on the Internet to help you understand.

Now let's take a look at the XMLHttpRequest object, which has several attributes,

1. onreadystatechange: The time processing program triggered by the state change, which has five Status values,

 

Readystate Value

0	XHR object created but not initialized
1	Prepare for sending
2	Sent, no response
3	Accepting response, incomplete yet
4	Response accepted

In addition, 0 creates an XHR object without calling the open method; 1 initializes and does not call the send method; 2. the send method is called, but the current status and HTTP header are unknown. 3. data is being transferred, but not completely; 4. after receiving the data, you can use responseXml and responseText to obtain the complete response data.

 

2. responseText: Response text returned by the server. values are available only when readystate> = 3, but 3 is incomplete;

3. responseXML: The response information is XML and can be parsed as a DOM object;

4. status: the Http status code of the server, 200---OK, 404 -- the page is not found;

5. statusText: Server Http status code text, such as OK and not found

XHR has several other methods,

1. open (method, url, boolean) // open the XMLHttpRequest object. Most of the methods are get (query data and obtain certain data from the server), post (update database, directly submit to the server or send a large amount of data). A url is the url of the requested resource. boolean indicates whether to use Asynchronization. The default value is true, indicating Asynchronization;

2. send (), send the request to the Ajax engine, so that the Ajax engine can operate and send content as required parameters or null;

The process is generally to create an XHR object, send requests, and respond to data. A simple code is as follows:

 

function loadContent(){var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject(Microsoft.XMLHTTP);  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById(myDiv).innerHTML=xmlhttp.responseText;    }  }xmlhttp.open(GET,test.php,true);xmlhttp.send();}

ReadyState and status mean to check the XMLHttpRequest status to ensure that it has been completed (readyState = 4), and then query the Request status based on the server settings, if everything is ready (status = 200), perform the subsequent operations.

 

 

The basic and simple ajax knowledge is very powerful. Specifically, Ajax is very powerful and I hope to give you more advice. Thank you!