<! DOCTYPE html> <html> <head> <title> Encapsulate ajax </ title> </ head> <body> <script type = "text / javascript"> function createXHR () {if (typeof XMLHttpRequest! = "Undefined ") {return new XMLHttpRequest ();} else if (typeof ActiveXObject! =" undefined ") {var versions = [" MSXML.2.XMLHttp.6.0 "," MSXML.2.XMLHttp.3.0 "," MSXML.2 .XMLHttp "]; for (var i = 0; i <versions.length; i ++) {try {return new ActiveXObject (version [i]);} catch (e) {// an error will be reported due to the class loop, skip Some errors}}} else {throw new Error ("Your system or browser does not support XHR objects!");}} // name-value pair conversion string function params (data) {var arr = []; for (var i in data) {arr.push (encodeURIComponent (i) + "=" + encodeURIComponent (data [i]));} return arr.join ("&");} // ajax function ajax (obj) { var xhr = createXHR (); obj.url = obj.url + "? rand =" + Math.random (); obj.data = params (obj.data); if (obj.method === "GET") { obj.url + = obj.url.indexOf ("?") == -1? "?" + obj.data:"&"+obj.data;} // if it's asynchronous if (obj.async == = true) {xhr. onreadystatechange = function () {if (xhr.readyState == 4) {callback ();}}} xhr.open (obj.method, obj.url, obj.async); if (obj.method === "POST ") {xhr.setRequestHeader (" Content-Type "," application / x-www-form-urlencoded "); xhr.send (obj.data);} else {xhr.send (null);} // iF It 's synchronization if (obj.async === false) {callback ();} // encapsulate the repeated call code function callback () {if (xhr.status === 200) {obj.success (xhr.responseText); } else {alert ("Error code:" + xhr.status + "-Error message:" + xhr.statusText);}}} // use ajax addEventListener ("click", function () {ajax ({method: "POST ", url:" test.php ", data: {" na & me ":" ping "," age ": 18}, // pass the object to text, and then the object callback success: function (text) {console.log ("Receive success data:" + text);}, async: false});}, false); </ script> </ body> </ html>
JavaScript ajax encapsulation get and post
