An explanation of Ajax requests

Source: Internet
Author: User

//1. Create an Ajax object//var xhr=new xmlhttprequest;//var xhr=null;//try{//if (window. XMLHttpRequest) {//xhr=new XMLHttpRequest;//}else if (new ActiveXObject ("Microsoft.XMLHTTP")) {//xhr=new ActiveXObject ("Microsoft.XMLHTTP");//}else if (new ActiveXObject ("Msxm12.xmlhttp")) {//xhr=new ActiveXObject ("msxm12.xmlhttp");//}else if (new ActiveXObject ("Msxm13.xmlhttp")) {//xhr=new ActiveXObject ("msxm13.xmlhttp");//    }////}catch (e) {//throw new Error ("Your current browser does not support ajax~ broken computer hit it!!! ");//}//first time Upgrade v//lazy thought: After the execution of the function, we assign the GETXHR to a specific function, so that later execution of this method, it is not necessary to determine what browser is//var getxhr=null;//-function () {//var list=[function () {//return new XMLHttpRequest;//},function () {//return new ActiveXObject ("Microsoft.XMLHTTP");//},function () {//return new ActiveXObject ("Msxm12.xmlhttp");//},function () {//return new ActiveXObject ("Msxm13.xmlhttp");//    }];//var temp=null;//For (Var i=0;i<list.length;i++) {//try{//Temp=list[i] ();//}catch (e) {//continue;//        }//Getxhr=list[i];//Break ;//    }//if (!temp) {//throw new Error ("Your current browser does not support ajax~ broken computer hit it!!! ");//    }//}();varGetxhr=function(){    varlist=[function(){        return NewXMLHttpRequest; },function(){        return NewActiveXObject ("Microsoft.XMLHTTP"); },function(){        return NewActiveXObject ("Msxm12.xmlhttp"); },function(){        return NewActiveXObject ("Msxm13.xmlhttp");    }]; vartemp=NULL;  for(vari=0;i<list.length;i++){        Try{Temp=List[i] (); }Catch(e) {Continue} getxhr=List[i];  Break    }    if(!temp) {        Throw NewError ("Your current browser does not support ajax~ broken computer hit it!!! "); }    returntemp};varXhr=getxhr ();//2. Open a URL address (the server gives us an interface API for data requests)//first parameter request mode get post put delete//get: Typically used to send a request to the server to get content from the server//post: Generally used for customer service to push a lot of content to the server//get parameters are passed to the server via a URL request, and the? The arguments that need to be passed in the back of the//Post via Xhr.send (string)//xhr.send (' {' "name": "Xiaoming", "Age": +} ');//length: Get via URL parameter, but browser for URL size is limited (general Google 8KB Firefox 7KB ie2kb),//once the browser is automatically subtracted, the data passed to the background is incomplete, which can only be done with post//security: Get via URL parameter can be seen in the console, security is not high post is to put the content delivered in the HTTP theme in the console does not see more security//Cache issue: Post request browser does not log cache information by default and does not need to clear the cache//The GET request browser will record the cache information by default, usually we will give him a timestamp or random number when the URL stitching parameter, so that the address of each request will be different (not the same cache)varTime=NewDate ();vartimes=time.gettime (); Console.log (times);varUrl= "Http://www.com.qq.com";varCode=math.random ();varStrcode=url.indexof ("?") >-1?url+ "Time=" +times:url+ "? Time=" +Times;console.log (strcode);//3. Listening for data requests//Xhr.readyState:ajax Request Status Code//0 Unsent request 1 opened Connection 2 received response header information 3 requested data content loading 4 request complete get data//xhr.status: Network Status Code//2001-like with 2 start normal 404 cannot find the file, picture ... There are no 502 server errorsXhr.onreadystatechange=function(){    if(xhr.readystate===4&&/^2\d{2}$/. Test (Xhr.status)) {        varStr=Xhr.responsetext; //receive JSON string returned from background}};xhr.send (NULL);functionAjax (url,callback) {varXhr=getxhr (); URL+=url.indexof ("?") >-1? " Time= "+ (NewDate). GetTime (): "? Time=" + (NewDate). GetTime (); Xhr.open ("Get", url,true);//Synchronous false Async TrueXhr.onreadystatechange=function(){        if(xhr.readystate===4&&/^2\d{2}$/. Test (Xhr.status)) {            varStr=Xhr.responsetext; STR= "JSON"inchWindow? Json.parse (str): eval ("(" +str+ ")");        Callback (str); }} xhr.send (NULL);}

An explanation of Ajax requests

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.