what is ajax? To put it bluntly, it is a request, an intermediate processing mechanism that reads server resources and submits resources to the server. So how does it work and what is the principle?
var ajax=function(url,fnSucceed,fnFail){
//The first step: initialize the http protocol, that is, instantiate an XMLHttpRequest method.
//You still need to make a judgment here, because Microsoft's old version of IE (<IE7) is different in that its ajax is implemented through an ActiveXObject control,
//not the XMLHttpRequest of other browsers, which is a compatible spelling. Now you can actually use XMLHttpRequest, after all, even Ali has announced that
// does not support IE8 and below.
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}
else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//Step 2: Set the content, method and where to access the request? which url? Are you going to read or write? (ie get or post) is it synchronous or asynchronous?
oAjax.open('GET',url,true);
//true is asynchronous, to be synchronous is false,
//get is generally used to read server data or resource files.
//post is generally used to send data back to the server when the user uploads data, but these two are actually readable and writable, but the way of data transmission is different.
// The reason why people generally use this is mainly reflected in In the following aspects:
// 1. get is transmitted through the address bar (you can look carefully at the address bar at the top of our browser, the information in it will include some relatively confidential information, such as:
// When the user registers, if What happens when you use get to submit at this time? You look at the address bar at the top, it just happens to be your account
and // password, which is horrible and very insecure), and post is reported by For text transmission, the data will not be displayed in the address bar, and it will help you hide the submitted data.
// Relatively speaking, it is relatively safe. The url in get has a length limit, the maximum length is 2k, which is 2048 characters, while the post is Unlimited,
// And when it comes to this, you may say, since the post method has so many advantages, why not just use post?
// You are wrong again, yes, the post itself is also limited, such as:
// You are browsing the web page too fast, if you want to refresh or something, use get because it essentially obtains the resources on the service , and your back doesn't actually
mean // to get the resources on the server (the browser can read it), but what about post? What is the essence of post? It is to submit resources or data to the server, so
when you use //post, you back up, and the browser thinks you are going to submit something again, then it will resubmit the data to the server, resulting in repeated submission of data
//say To the essence, you now know why get has a 2k limit, right? get is acquisition, because the acquisition of resources on a server actually
// It is the url to obtain the resource or the essence is an identifier, the resource identifier (url does not represent the actual physical address of the resource), this is generally not too long,
// it does not need to be too long, you have seen the address bar Do you have a bunch of stuff? no? And what about post? Or return to the essence, what does it mean in English?
//Post, delivery, to put it bluntly, is uploading or submitting. I think the authors of the underlying XMLHttpRequest of ajax must also hope that we use post to deliver,
//to submit resources, and get (get) is used to obtain Resources, since they think this way, they must have designed the program this way. It is
not necessary to study too deeply about // these two, just keep in mind semantics, get to read resources, post to submit resources, so that you can 90% of the ajax requests can be handled,
//and this is enough! We are not scientists. It is enough to drill to a certain extent. Of course, if you have time to recommend in-depth research, it is a good thing.
//Step 3: Send the request.
oAjax.send();
//The fourth step: process the request
/**There is a big pit in this fourth step, what is the pit? Since it is an interactive request in response to the operation of the terminal client, when does the client operate? We don't know, and the server
* won't know. then what should we do? If you have studied java, you must be familiar with four words. When it comes to this, you may have thought of it, yes, it is event monitoring
* But what about our ajax? It's not like this. It uses the callback mechanism in js that has been criticized by developers of other programming languages. What is it?
*
* We just started by instantiating an XMLHttpRequest that provides three properties:
* 1. onreadystatechange: Take it apart and see on readystate change. When the property of readystate changes, call this function
.
* After initiating the request, we have to do (or the server has to do) the response operation, in a word, save the function
*
* 2, readyState: Are you wondering just now, why do I need to translate it like that? Instead of on ready state change? When you see this, you suddenly realize
* right? Hey, in fact, the correct translation is really the second translation, that is, when the state of preparation changes, it's just the state of preparation
* I will take this as this, so you will be more impressed, yes, semantic, readyState this It is the state of XMLHttpRequest
* The state of this readyState is pre-agreed, similar to the protocol, it can be used as a switch, it has several cases, yes
* It is so self-willed, so it is no problem, what are the specific ones What about case?
* 0: The request is not initialized
* 1: The server connection is established
* 2: The request has been received
* 3: The request is being processed
* 4: The request has been completed and the response is ready. (This is used more, after all, we don't care about the inside of the server, we only care about the result)
*
* 3. status: This is also a status. It has a lot of fillable attributes: 0** (uninitialized), 1** (request received, continue processing), 2**,
* 3** , 4**, 5**, there are too many to list here, there is a statusText status table that you can check by yourself, but what I want to say is that in general,
* the server processes data, and we don’t need to manage the response. How far has it been implemented? (Except if the data cannot be received and debugged)
* We only need to judge whether it has received the request and whether it can respond successfully, so, we can remember a few commonly used ones
*, the brain capacity is limited , we should memorize some of the most essential parts, rather than the more the better, of course, we must first understand the principle.
* Here, let me list a few:
* 200: "OK", the most common, the meaning of success (developers may use this more often)
* 401: Request authorization failed
* 404: Page not found
* 500: Internal server error
* 12029: The network is blocked
*
* After so much talk, how can you do it without practical operation?
* */
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status==200){
fnSucceed(oAjax.responseText);//The function that responds to the successful callback, here just simply returns a string of data,
//You can continue to write other functions in the inner or outer functions Response operation
}
else{
if(fnFail){
fnFail(oAjax.status);
}
}
}
};//We have saved a function here
};
Paste a code written by yourself below (in fact, there are all of them, just compare miscellaneous)
/**
* Created by Administrator on 2018/5/1 0001.
*/
var dc_ajax_g=function(url,fnSucceed,fnFail) {
//if (window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest();
//}
//else {
// var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
//};
oAjax.open('GET',url,true);
oAjax.send();
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status==200){
fnSucceed(oAjax.responseText);//The function that responds to the successful callback, here just simply returns a string of data,
//You can continue to write other response operations in the inner or outer function
}
else{
if(fnFail){
fnFail(oAjax.status);
}
}
}
};
};