Do you know the basic development of Ajax? Detailed explanation of the basic development steps of ajax (with examples)-JS Tutorial-php.cn

This article mainly talks about the basic development steps of ajax. If you want to have a deeper understanding of ajax development, you must know the development steps. Although it is the most basic, it can also let people know how to use it. ajax development. Start reading this article now

What is ajax? What is the use?
The full name of Ajax is "Asynchrous Javascript And XML", which refers to a web development technology for creating interactive web applications. It is a technology for quickly creating dynamic web pages to improve the efficiency of interaction between browsers and servers. It can replace the traditional web interaction mode.
How to understand this synchronization and asynchronousness?

What is the traditional synchronous interaction model?
In the traditional model, the synchronous interaction mode is used. The client browser makes a request to the server, and then waits until the server responds to the request, and cannot perform other operations.
What is the asynchronous interaction model of mainstream technology?
In the Ajax asynchronous interaction mode, there is an additional transfer object Ajax engine between the client browser and the server. When the client browser submits a request to the Ajax engine, the Ajax engine is responsible for transferring the request information to the server. , so that after the client browser sends the request, it can continue the operation instead of being in a waiting state. After the server processes the Ajax engine request, it passes the response to the Ajax engine, and the Ajax engine updates the client browser page.
Ajax development steps
Step one: Get the XMLHttpRequest object.
You can find sample code in the xml document of w3school.

var xmlhttp = null;if(window.XMLHttpRequest){    //这个是针对浏览器IE7及其7以上的版。
    xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){    //这个是针对浏览器5到7的版本。
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

Copy after login

Step 2: Register the callback function.

 xmlhttp.onreadystatechange = function(){ 
};

Copy after login

onreadystatechange is an event handler for events triggered by each state change.

The third step: open("method","URL",async,"uname","pswd")
is only used to set the request method, URL path, and whether to synchronize. No request is sent.

Parameters	Function
method	Send request method, the optional parameters are: GET, POST and PUT.
URL	The URL path to be sent, you can use absolute paths and relative paths.
async	Whether the request should be processed asynchronously. You can also leave it blank. The default value is true.
	true, script processing will continue after send() is sent, that is, asynchronous processing.
	false, the script will wait for a response before continuing script processing, that is, synchronous processing.
uname	It has not been used yet, and the documentation does not explain it. Just don’t write it.
pswd	It has not been used yet, and the documentation does not explain it. Just don’t write it.

What if the URL requires parameters?
If it is a get request, concatenate the parameters directly after the url.
For example: xmlhttp.open("get","http://www.baidu.com?name=xiaosan");

If it is a post request, multiple setting operations must be performed:
For example: xmlhttp.open("post","http://www.baidu.com");
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded" );
xmlhttp.send("name=xiaosan");
The function of setRequestHeader("label","value") is to add the label/value pair to the http header that you want to be sent.

Step 4: send(content)
Send the request. If there are no parameters, it is written as send(null).

Step 5: Perform specific data operations in the callback function.
Before this, you need to understand some properties of XMLHttpRequest.

##onreadystatechangeState occurs When it changes, something can be triggered. readyStateSee the table below for detailsstatusNumber return status, such as "OK" is 200, "Not Found" is 404, etc.statusTextString return status, such as "OK", "Not Found", etc.responseTextReturn the response as a string. responseXMLReturns the response in XML. What is returned is an XML object that can be parsed using DOM

Properties	Description

The following table shows the status value of a readyState and the meaning of the status value:

Status value represents the status interpretation 0Uninitialized state, represents the loading state before the XMLHttpRequest object is created 1, open operation. 2Loaded status, send operation. 3In interactive status, response data has been received, but only the response header and the body have not been received. 4Complete status, all http response reception is completed.

What is ajax? What is the use?
The full name of Ajax is "Asynchrous Javascript And XML", which refers to a web development technology for creating interactive web applications. It is a technology for quickly creating dynamic web pages to improve the efficiency of interaction between browsers and servers. It can replace the traditional web interaction mode.
How to understand this synchronization and asynchronousness?
What is the traditional synchronous interaction model?
In the traditional model, the synchronous interaction mode is used. The client browser makes a request to the server, and then waits until the server responds to the request, and cannot perform other operations. (If you want to see more, go to the PHP Chinese website AJAX Development Manual column to learn)
What is the asynchronous interaction model of mainstream technology?
In the Ajax asynchronous interaction mode, there is an additional transfer object Ajax engine between the client browser and the server. When the client browser submits a request to the Ajax engine, the Ajax engine is responsible for transferring the request information to the server. , so that after the client browser sends the request, it can continue the operation instead of being in a waiting state. After the server processes the Ajax engine request, it passes the response to the Ajax engine, and the Ajax engine updates the client browser page.
Ajax development steps
Step one: Get the XMLHttpRequest object.
You can find sample code in the xml document of w3school.

var xmlhttp = null;if(window.XMLHttpRequest){    //这个是针对浏览器IE7及其7以上的版。
    xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){    //这个是针对浏览器5到7的版本。
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

Copy after login

Step 2: Register the callback function.
xmlhttp.onreadystatechange = function(){
};
onreadystatechange is an event handler for events triggered by each state change.

Step 3: open("method","URL",async,"uname","pswd")
Only used to set the request method, URL path, and whether to synchronize, and will not be sent. ask.

Parameters	Function
method	Send request method, the optional parameters are: GET, POST and PUT.
URL	The URL path to be sent, you can use absolute paths and relative paths.
async	Whether the request should be processed asynchronously. You can also leave it blank. The default value is true.
	true, script processing will continue after send() is sent, that is, asynchronous processing.
	false, the script will wait for a response before continuing script processing, that is, synchronous processing.
uname	It has not been used yet, and the documentation does not explain it. Just don’t write it.
pswd	It has not been used yet, and the documentation does not explain it. Just don’t write it.

What if the URL requires parameters?
If it is a get request, concatenate the parameters directly after the url.
For example: xmlhttp.open("get","http://www.baidu.com?name=xiaosan");

If it is a post request, multiple settings must be performed:
For example: xmlhttp.open("post","http://www.baidu.com");
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded" );
xmlhttp.send("name=xiaosan");
The function of setRequestHeader("label","value") is to add the label/value pair to the http header that you want to be sent.

Step 4: send(content)
Send the request. If there are no parameters, it is written as send(null).

Step 5: Perform specific data operations in the callback function.
Before this, you need to understand some properties of XMLHttpRequest.

Properties	Description

The following table shows the status value of a readyState and the meaning of the status value:

This article ends here (if you want to see more, go to the PHP Chinese website

AJAX User Manual column to learn). If you have any questions You can leave a message below to ask questions.

The above is the detailed content of Do you know the basic development of Ajax? Detailed explanation of the basic development steps of ajax (with examples). For more information, please follow other related articles on the PHP Chinese website!