Creating Ajax easy steps:
Creating Ajax object: var xhr = new XMLHttpRequest ();
Linked Server: xhr.open ( 'get', 'a.php', true);
Or data transmission request: xhr.send ();
Calling function value changes state: xhr.onreadystatechange = fncallback;
Package Ajax:
function ajax(options){ var url=options.url, asy=options.async!==false, type=(options.type || 'GET').toUpperCase(), data=options.data || null; suc=options.success || null, err=options.error || null; xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"); //new XMLHttpRequest() IE7+, Firefox, Chrome, Opera, Safari //new ActiveXObject('Microsoft.XMLHTTP') ie5、6 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ xhr.status==200 ? suc && suc(xhr.responseText) : err && err(); } } data=(function(data){ if(data){ var arr=[]; for(var i in data){ arr.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i])); // the encodeURIComponent other special processing Chinese characters encoded as% E5% 93% 88% E5 % 93% 88 forms } return arr.join ( ' & ' ); // array into a string: username = name% E5% 93 E5% 93% 88% 88% & password = 123 } the else { return Data; } }) (Data); IF (type == ' the GET ' && Data) { URL + = url.indexOf ( ' ? ' ) = -! . 1 ? ' & ' : ' ? ' ; URL + + Data = ' &t='+ Math.random (); } // processing embodiment leave get cache always changing with a value Math.random (), a time stamp may also be used, new new a Date () the getTime (). // allow url to: ? a.php name username = E5% 93% 88% 93% 88% E5% & password = T = 123 & 0.06531456997618079 xhr.open (type, URL, ASY); Switch (type) { Case ' the POST ' : xhr.setRequestHeader ( ' Content -type ' , ' file application / X-WWW-form-urlencoded ' ); Data ? xhr.send (Data): xhr.send (); BREAK ; default : xhr.send (); } }
Instructions:
= the document.onclick function () { Ajax ({ type: ' POST ' , // Default: GET URL: ' a.php ' , Data: { username: ' name ha ' , password: 123 }, // default: null the async : to false , // default: ture Success: function (sData) {Alert (sData)}, // default is null error: function () {Alert ( ' error la ' )} // default is null }); }
Additional:
xhr.readyState property code:
0 uninitialized state. Create an XMLHttpRequest object has not been initialized
A connection state, a method has been invoked open and ready to send a request
2 transmission state, a method has been called send request, the response result has not been
3 is receiving state, which has received the HTTP response header, content is being received in response to
4 loaded state, when the content has been completely received in response
xhr.status common states:
200-- successful transaction (OK)
404-- not find the file, query or URl (did not find the specified resource) (Not Found)
500-- server generates an internal error (Internal Server Error)
xhr.statusText // HTTP request returns the current state of
xhr.abort (); // cancel asynchronous
xhr.getAllResponseHeaders (); // get the response header information - via the console - View> Network XHR-> Response Headers
xhr.setRequestHeader (); // header information setting request
1, the amount of data transferred get smaller, not larger than 2KB. Post large amount of data to be transmitted, that is theoretically unlimited, because the actual limit server or background
2, get security is low, post high security.
3, from a performance perspective post consume more performance than get, because people from the network on to say: "According to Yahoo mail team, said: post method in the AJAX request will be split into two: sending header first, then sending data; reverse thinking: If there is no request to post the data string, and then the performance should get the same "link address: http: //cuishen.iteye.com/blog/2019925
Briefly ~~~: GET small amount of data transfer mode, high efficiency, low security, will be cached, and vice versa POST.
Finally, give us a relevant information
AJAX method bottom package
http://www.makeru.com.cn/live/1396_1054.html?s=45051