One, JavaScript asynchronous programming
Asynchrony is a concept opposite to synchronization.
Synchronization: It does not mean that all steps are running at the same time, but that the steps are executed sequentially in a control flow sequence.
Asynchronous: The execution of the asynchronous process will no longer have a sequential relationship with the original sequence. A child thread is launched from the main thread to complete the task.
Simple understanding: synchronization is executed in the order of code, asynchronous is not executed in the order of code, asynchronous execution is more efficient.
2. When to use asynchronous programming?
In front-end programming, when we are dealing with some short and fast operations, they can often be done in the main thread. As a thread, the main thread cannot accept multiple requests at the same time. Therefore, when an event is not over, the interface will not be able to process other requests.
If we set a button as an endless loop event, then press the button, the page will lose response. At this time, we often use child threads to complete things that consume enough time. Because the child thread is independent of the main thread, it will not affect the operation of the main thread even if it is blocked. But the child thread has a limitation: once it is launched, it will lose synchronization with the main thread, and we cannot be sure of its end. If we process the information from the server, we cannot merge it into the main thread. And JS asynchronous operation function , often through a callback function result of asynchronous processing tasks.
Three, realize asynchronous AJAX:
AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML).
The biggest advantage is that it can exchange data with the server and update part of the web page content without reloading the entire page.
<script>
function loadXMLDoc(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open(method,url,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
};
}
</script>
<div id="myDiv">
<h2>
使用AJAX修改改文本内容
</h2>
</div>
<button type="button" onclick="loadXMLDoc()">点击修改</button>
Analysis:
-
AJAX creates an asynchronous object XMLHttpRequest and manipulates the XMLHttpRequest object.
-
Set request parameters (request method, relative path of the requested page, whether asynchronous)
open(method,url,async)method request type GET or POST, the location of the url file on the server, async:true (asynchronous) false (synchronous)
-
Set the callback function, a function that processes the server response, using onreadystatechange, similar to a pointer.
-
Get the readyState property of the asynchronous object: This property contains the state information of the server response. Whenever the readyState changes, the onreadystatechange function will be executed.
The response status information changes from 0 to 4.
0: The request is not initialized
1: The server connection has been established
2: The request has been received
3: The request is being processed
4: The request has been completed and the response is ready -
Determine the status of the response message. If it is 200, the server is operating normally and returns the response data.
200: "OK"
404: Page not found -
To read the response data, you can retrieve the data returned by the server through the responseText property.