In the work of the Ajax n many times, but also read some related aspects of the book, but also recognized it, but has not been a serious summary and finishing related Dongdong, failure!
Close to the leisure, will be summed up as follows:
Name
Ajax is the abbreviation for asynchronous JavaScript and XML (and DHTML, etc.).
For more information, please ajax:a NEW approach to WEB applications
Principle
The simple thing is to use the XMLHttpRequest object to send an asynchronous request to the server, get the returned data, and use JavaScript and DOM to manipulate the elements within the page to change the content of the page.
Where the XMLHttpRequest object is critical, because it supports asynchronous requests. XMLHttpRequest is completely used to send a request to the server. The methods and properties it contains are as follows:
Method:
Abort () causes the current request to be canceled
getAllResponseHeaders () returns a string containing the name and value of the neon response header
getResponseHeader (name) returns the value of the specified response header
Open (Methods, URLs, async, username, password) sets the requested method and destination URL. The request can be declared as synchronous (optional), or it can be supplied with the user name and password (optional) based on whose request the window needs to be made.
Send (content) initiates a request with the specified content (optional)
setRequestHeader (name, value) sets a request header with the specified name and value
Property:
onReadyStateChange assign an event handler to be used when the requested State is changed
ReadyState An integer value indicating the status of the request as follows:
0--not initialized
1--is loading
2--already loaded
3--interaction
4-– Complete
What the ResponseText returns in response
Responsexml if content is XML, create XML DOM based on content
Status code of the response returned by the status from the server. For example: 200 indicates success, 404 is not found, reference HTTP specification
StatusText the status text message returned by the response
For another introduction to this object, please go to: XMLHttpRequest Overview
"Included Technology"
· Representation based on XHTML and CSS standards;
· Use the document Object model for dynamic display and interaction;
· Asynchronous communication with the server using XMLHttpRequest;
· Use JavaScript to bind everything;
· Use XML and XSLT, Exchange and manipulate data.
The above technology is a number of widely used technology, all belong to the older technology, Ajax is the combination of these several technologies.
"Simple Instance"
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title></title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script type= "Text/javascript" >
function Ajax () {
var xmlHttp;
Based on object judgment, not on browser
if (window. XMLHttpRequest) {
Xmlhttp=new XMLHttpRequest ();//mozilla browser
}else if (window. ActiveXObject) {
try{
Xmlhttp=new ActiveXObject ("msxmlx2.xmlhttp"); IE old version
}catch (e) {}
try{
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP"); IE new version
}catch (e) {}
if (!xmlhttp) {
Window.alert ("Cannot create XMLHttpRequest Object real column");
return false;
}
}
if (!xmlhttp) {
Alert ("Create XMLHttpRequest object failed!") ");
return false;
}
Xmlhttp.open (' POST ', ' index.php?get_a=2&get_b=3 ', false);
Xmlhttp.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded;charset=utf-8; ');
Xmlhttp.send ("post_a=1&post_b=2");
Xmlhttp.onreadystatechange = function () {
alert (xmlhttp.readystate);
}
if (xmlhttp.readystate = = 4) {//Judge object state
var content_obj = document.getElementById ("content");
content_obj.innerhtml = "processing data ...";
if (Xmlhttp.status = = 200) {//information has been successfully returned to start processing information
var returnstr = Xmlhttp.responsetext;
content_obj.innerhtml = Returnstr;
}else{//page is not normal
content_obj.innerhtml = "The page you are requesting has an exception!" ";
}
}
}
</script>
<body>
<input type= "button" value= "Ajax" onclick= "Ajax" (); "/>
<div id= "Content" >ajax contents display area </div>
</body>
Remember: When you initiate a POST request, you need to set the header Content-type (content type). This way, the server knows how to handle the uploaded content. If you want to simulate the post of the HTTP protocol to send the form, you should set the content type to application/x-www-form-urlencoded.
Advantages
No Refresh page, good user experience;
Asynchronous, does not interrupt the user to operate, the response speed is fast;
"On-demand data", reduce redundant requests, reduce server burden;
Based on standardized and widely supported technologies, no additional plug-ins are required;
The data and performance can be separated;
"The problem of existence"
Some devices do not yet support
Development cost Improvement
Make the Back button invalid, the user can not return after operation;
Streaming media support no flash stream good;
Not friendly to search engines
The abnormal mechanism of destroying program
There are some security issues that expose some program interfaces and data logic
