I have used Ajax N many times in my work, and I have read some related books. I have known it, but I have never carefully summarized and sorted out relevant things!
We will summarize the situation as follows:
[Name]
Ajax is short for Asynchronous JavaScript and XML (and DHTML.
For more information, see Ajax: A New Approach to Web Applications.
Principle]
Simply put, the XmlHttpRequest object is used to send an asynchronous request to the server to obtain the returned data, and Javascript and DOM are used to operate the elements on the page, so as to change the page content.
The XmlHttpRequest object is critical because it supports asynchronous requests. XMLHttpRequest is used to send a request to the server. It contains the following methods and attributes:
Method:
Abort () causes the current request to be canceled
GetAllResponseHeaders () returns a string containing the name and value of the ne response header.
GetResponseHeader (name) returns the value of the Specified Response Header
Open (method, url, async, username, password) sets the Request method and target URL. The request can be declared as synchronous (optional), or provide the user name and password (optional) based on the user's request in the window)
Send (content) initiates a request with the specified content (optional)
SetRequestHeader (name, value) uses the specified name and value to set a Request Header
Attribute:
Onreadystatechange specifies the event handler used when the Request status changes
ReadyState is an integer that indicates the Request status as follows:
0 -- not initialized
1 -- Loading
2 -- loaded
3 -- Interaction
4 -- complete
ResponseText content returned in the response
ResponseXML if the content is XML, xml dom is created based on the Content
Status indicates the response status code returned by the server. For example, 200 indicates that the request is successful, and 404 indicates that the request is not found. For more information, see HTTP specifications.
StatusText responds to the returned status text message
For more information about this object, see XMLHttpRequest overview.
[Included technologies]
· Representation based on XHTML and CSS standards;
· Use Document Object Model for Dynamic Display and interaction;
· Use XMLHttpRequest for asynchronous communication with the server;
· Use JavaScript to bind everything;
· Use XML and XSLT to exchange and operate data.
The above technologies are widely used and all belong to old ones. ajax is a combination of these technologies.
[Simple instance]
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Title> </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Script type = "text/javascript">
Function ajax (){
Var xmlHttp;
// Judge based on the object instead of the browser
If (window. XMLHttpRequest ){
XmlHttp = new XMLHttpRequest (); // mozilla Browser
} Else if (window. ActiveXObject ){
Try {
XmlHttp = new ActiveXObject ("Msxmlx2.XMLHTTP"); // old IE version
} Catch (e ){}
Try {
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP"); // new version of IE
} Catch (e ){}
If (! XmlHttp ){
Window. alert ("the XMLHttpRequest object real Column cannot be created ");
Return false;
}
}
If (! XmlHttp ){
Alert ("An error occurred while creating the XMLHttpRequest object! ");
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 the object status
Var content_obj = document. getElementById ("content ");
Content_obj.innerHTML = "processing data ...";
If (xmlHttp. status = 200) {// The message is returned successfully. Start to process the information.
Var returnStr = xmlHttp. responseText;
Content_obj.innerHTML = returnStr;
} Else {// The page is abnormal.
Content_obj.innerHTML = "the page you requested has an exception! ";
}
}
}
</Script>
</Head>
<Body>
<Input type = "button" value = "ajax" onclick = "ajax ();"/>
<Div id = "content"> ajax content display area </div>
</Body>
</Html>
Remember: when initiating a POST request, you must set the Content-type (Content type) of the header. In this way, the server will know how to process the uploaded content. If you want to simulate form sending through the http post method, you should set the content type to application/x-www-form-urlencoded.
[Advantages]
The page is refreshing and the user experience is good;
Asynchronous, fast response without interrupting user operations;
"Retrieve data as needed" to reduce redundant requests and reduce the burden on servers;
Based on standardized and widely supported technologies, no additional plug-ins are required;
Data and performance can be separated;
[Problems]
Some devices are not supported yet
Improved development costs
The back button is invalid and cannot be returned after user operation;
It is good to support streaming media without flash;
Unfriendly to search engines
Destroys program exception mechanisms
Some security problems exist, and some program interfaces and data logic are exposed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
