A. What is the Ajax
Ajax (Asynchronous JavaScript and XML), can be understood as JavaScript execution Asynchronous network request, the popular understanding of the word is, if there is no Ajax technology, change a small part of the web page (even if it is a line of text, picture) need to reload the whole page at a time, and with Ajax, can be achieved under the condition of the web pages don't jump to refresh, submit data in web page background, partial updates page content,
2. Ajax's native writing
1. The XMLHttpRequest object
XMLHttpRequest object is used to exchange data with the server in the background, to update web page, without reloading the page after page loaded request data from the server, and receives data from the server after the page has been loaded, send data to a server in the background, so the XMLHttpRequest object is the core of the Ajax technology,
2. Implement process
Create the XMLHttpRequest object - & gt; Open the request address, initialization data - & gt; Send the request data - & gt; Listening to the callback function state - & gt; Receive returned by the server response as a result,
Explain with specific code below:
Var XMLHTTP;
The function loadXMLDoc (url)
{
XMLHTTP=null;
If (window. The XMLHttpRequest)
{//code for all new browsers
XMLHTTP=new XMLHttpRequest ();//create the XMLHttpRequest object here
}
Else if (window. ActiveXObject)
{//code for IE5 and IE6
XMLHTTP=new ActiveXObject (" Microsoft. XMLHTTP ");
}
If (XMLHTTP!=null)
{
XMLHTTP. Open (" GET ", url, true);//request and request the address
XMLHTTP. Send (null);//send the request
XMLHTTP. Onreadystatechange=state_Change;//listen callback function
}
The else
{
Alert (" Your browser does not support XMLHTTP. ");
}
}
The function state_Change ()//this is the callback function
{
If (XMLHTTP. ReadyState==4 & amp; & XMLHTTP. Status==200)
//when to meet the two conditions that the request is successful, 4="the loaded" complete response, 200=OK
{
Var data=https://bbs.csdn.net/topics/xmlhttp.responseText;//get data from server
//... Our code here... Operations on data returned here
} the else
{
Alert (" Problem retrieving the XML data ");
}
}
3. The points of attention in the native writing
(1). The open () used in the third parameter of the "true", whether the parameter regulation request asynchronous processing, the default is asynchronous, true indicates the script will continue after send () method, instead of waiting for the response from the server,
(2). About the readyState
(3) about the status by the HTTP status code returned by the server, 200 for success, and 404 says "Not Found" error, when the readyState is less than 3 read this attribute will cause an exception, behind (there will be a detailed analysis of its HTTP status code)
3. The JQuery Ajax
JQuery made a very good packaging, the original Ajax is very simple to use convenient, specific many methods such as $. Ajax, $. Post, $. Get, $. GetJSON can call to meet the need of different, such as writing more concise, but in order to take into account the methods here I $. In a general way Ajax as an example to do a simple analysis, write each parameter according to the following mode, can make it an Ajax request, may use in the actual $. Post, $. Get these two methods use is more, but understand $. Ajax this generic method can have a good understanding of encapsulation theory,
$. Ajax ({
Type://data submission: the get and post
Url://request address
Async://support asynchronous refresh, the default is true
Data://need to submit data
DataType://the server returns the type of data, such as XML, String, Json, etc.
Success: the function (data) {
}//callback function after the request is successful, the parameter data is the data returned from the server
Error: function (data) {
}//request failed callback function, can according to need not write, generally only write the success callback function
})
4. A GET or POST?
As Ajax two of the most common way of data submission, the GET and POST has its own characteristic and applicable scenario, distinguish between the GET and POST of different and according to the actual need to choose is very important in the development, simple but the key!
, first on one piece of the GET and POST the comparison chart can be seen from this picture of the difference between the two:
From form to carry out the key points: 1. To transfer data in different ways: get the request directly to the data on the back of the url, is visible, the request of the post data is not displayed in the url, it is not visible, 2. The data length and the difference of data types: get a data length limit, and data type allows only ASCII characters, there is no limit to the post in both, 3. The differences: the safety of the get insecure, post more secure,
Conclusion: the use of the two scenarios: get use more convenient, applicable to the pages of sensitive data between simple values, post safe use, apply to send the password to the server, token sensitive data, such as
5. What is the difference between success and complete
JQuery Ajax callback function of encapsulation, success, error, complete is the most commonly used three, among them, the success and the error is very good, a request is a successful call, another is called request failure, can understand from the literal, but success and complete easily confused, here in particular a description:
The callback function after success: request is successful,
Complete: request after the completion of the callback function (request success or failure are calls),
Notice inside the parentheses, and yes, the difference is complete as long as the request is completed, no matter success or failure will call, that is to say, if the call success, will call complete; In turn calls the complete, success does not necessarily call, (status code 404403301302... Will enter the complete, as long as no error will call)
6. XML - & gt; JSON
The is "x" in Ajax is XML,
XML, the extensible markup language, a subset of standard generalized markup language, is a kind of used to mark the electronic file has the structural markup language,
XML as a data interactive format, is widely used in the field of computer, however, with the development of the json, json, with its obvious advantages, has gradually replaced the XML and is now interactive data format standards, so here, want to stress is that json is now a mainstream interactive format of data before and after the interaction standard, whether the front-end data submitted to the background, back to the front or the background data, best unified as json format, each receives the data and then parse the data can be used for follow-up, so "Ajax" actually has developed into "Ajaj
"
7. JSON and JSON
Json and json looks only difference between a "p", but in fact is not a thing, never thought it was about the two concepts,
Json (JavaScript Object Notation, JS Object tags) is a lightweight data-interchange format,
Json: a help & lt; Script> Element to solve the problems of the mainstream browser cross-domain data access way,
Eight. Ajax cross-domain access
Ajax is very good, but is not everything. There's mastercard & ajax requests to access the same browser same-origin policy restricts, unable to access the different main domain address, so, in order to solve this problem, realize the cross-domain access, there are many ways, the above mentioned json is a popular way, there are some other way, I am here not a said, just want to illustrate the use of ajax is conditional, there is no limit to any technical implementation will not, cross-domain access to a very important knowledge, before the special wrote a summary of cross-domain access, it is quite detailed, to check: in the javascript implementation way of cross-domain summary
9. Reconsider the HTTP status code
Mentioned "200", "404" is common among two HTTP status code, when visitors to visit a web page, your browser will send a request to the server page, when receive and a browser display a web page, this page the server returns a header contains the HTTP status code (server header) is used to response to the browser's request,
Need to master the common HTTP status code to roughly the following:
101: switching protocol, server according to client's request switch protocols
* * 200: the request is successful, is commonly used in the GET and POST request * *
* * : 301 permanent redirect * *
* * 302: temporary redirect * *
303: similar to 301, using the GET and POST requests to see
* * 304: request resources did not change, use the cache * *
307: similar to 302, using the GET request to redirect
* * 404: the client request failed * *
408: request timeout
* * 500: internal server error, unable to complete request * *
505: the server does not support the request of the HTTP protocol version, unable to complete processing
Ten. Do not ignore the HTTP header file
Is an important concern in the HTTP request, the content of the request and reply headers can be seen from these two header file a lot of things, when we used to send an ajax request, if not achieve the desired effect, you will need to open a browser debugging tools, found in the NetWork, the corresponding ajax request, and then by looking at the information request and reply headers, big experience knew what was the outcome of the request, combining with the main content of response, can quickly find the problem, so learn to see the HTTP header information is in the front-end developer must master a skill, take a look at below specific header information,
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull
