AJAX learning summary
assignment
-
The main role of AJAX / destination
-
The principle
-
Work steps
-
XMLHttPRequest objects
-
Examples General Procedure AJAX
The main role of AJAX / destination
AJAX, we all know that its main role is asynchronous transmission, what is called asynchronous transfer it?
Asynchronous transfer small amounts of data are exchanged by the server in the background, so to achieve the partial refresh page. This means you can , for a certain part of the page is updated without reloading the entire page. The previous time, interactive, are between the client browser and the server to resend the request, the server responds to the request, the response of the entire page. Maybe we just changed a small part of the page, other have not changed, but the server will still send us a new answer. Lead and sent from the server on the client has a number of related part is repeated. However, AJAX can make us partial refresh, the server gave us that part of what we need.
Why it can achieve partial refresh it?
We put this question to answer at the end.
The principle
Browser to access the server, the request response when the standard operation of a browser is synchronous operation. Such as browser requests an address.
Work steps
- The first step to trigger an event in the browser to create XMLHttpRequest object.
- To send the request to the server through the object.
- When the server receives the request, processes the request, respond to the browser.
- Browser to locally modify page content via js code.
XMLHttPRequest objects
Learn AJAX little friends, you will find an object and there is always crucial in the process of AJAX asynchronous transmission, it is XMLHTTPRequest, here I did not come to learn more about this object
XMLHttpRequest for exchanging data with the server in the background. Without it exists, there will be no asynchronous transmission.
- By var xmlhttp = new XMLHttpRequest (); to create the object.
- xmlhttp.onreadystatechange = function () {performed in response to receiving the server and the server in response to the operation made}, onreadystatechange method object whenever readyState changes, onreadystatechange event is triggered. ReadyState value indicates the status information request, the state information is XMLHttpRequest object.
- xmlhttp.open ( "GET / POST", "URL", true); open () method is used to set some of the requested information, the first parameter is a type of request (GET / POST), the second parameter is the target server address file. The third parameter is whether the implementation of AJAX asynchronous.
- xmlhttp.send (); used to send the request.
Examples General Procedure AJAX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h1>哈哈哈哈</h1></div>
<button type="button" onclick="loadXMLDoc()">AJAX传值</button>
</body>
</html>Now beginning to address that problem, why can implement AJAX partial refresh it?
- js objects can get a Web page elements, and then modify them
- Response from the server to cut through js. Then to achieve partial refresh the page by js
So is relying on AJAX js, why put ajax js code, it is because of this partial modification of js particularity.
