So schreiben Sie eine Ajax-Anfragefunktion mit JS

In diesem Artikel stellen wir Ihnen eine selbst geschriebene Ajax-Anfragefunktion vor, die auf nativem JS basiert. Freunde, die sie benötigen, können darauf verweisen

Wenn wir Webseiten schreiben, verwenden wir im Allgemeinen einen Ajax-Anfrageserver Verwendung Es ist relativ einfach, JQuery und andere gekapselte Bibliotheken aufzurufen.

Aber im Allgemeinen haben diese Bibliotheken viele Funktionen und führen zu viele Dinge ein, die wir nicht brauchen. Wenn wir eine einfache Seite mit einer einzigen Funktion schreiben müssen, ist es nicht nötig, auf eine so große Bibliotheksdatei zu verweisen.

Wir können einfach unsere eigene Ajax-Anfragefunktion implementieren. Der spezifische Code lautet wie folgt:

var ajax = {};
ajax.x = function () {
 if (typeof XMLHttpRequest !== 'undefined') {
 return new XMLHttpRequest();
 }
 var versions = [
 "MSXML2.XmlHttp.6.0",
 "MSXML2.XmlHttp.5.0",
 "MSXML2.XmlHttp.4.0",
 "MSXML2.XmlHttp.3.0",
 "MSXML2.XmlHttp.2.0",
 "Microsoft.XmlHttp"
 ];
 var xhr;
 for (var i = 0; i < versions.length; i++) {
 try {
 xhr = new ActiveXObject(versions[i]);
 break;
 } catch (e) {
 }
 }
 return xhr;
};
ajax.send = function (url, method, data, success,fail,async) {
 if (async === undefined) {
 async = true;
 }
 var x = ajax.x();
 x.open(method, url, async);
 x.onreadystatechange = function () {
 if (x.readyState == 4) {
 var status = x.status;
 if (status >= 200 && status < 300) {
 success && success(x.responseText,x.responseXML)
 } else {
 fail && fail(status);
 }
 }
 };
 if (method == &#39;POST&#39;) {
 x.setRequestHeader(&#39;Content-type&#39;, &#39;application/x-www-form-urlencoded&#39;);
 }
 x.send(data)
};
ajax.get = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + &#39;=&#39; + encodeURIComponent(data[key]));
 }
 ajax.send(url + (query.length ? &#39;?&#39; + query.join(&#39;&&#39;) : &#39;&#39;), &#39;GET&#39;, null, callback, fail, async)
};
ajax.post = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + &#39;=&#39; + encodeURIComponent(data[key]));
 }
 ajax.send(url,&#39;POST&#39;, query.join(&#39;&&#39;), callback, fail, async)
};

Verwendungsmethode: GET

ajax.get('/test.php', {foo: 'bar'}, function(response,xml) {
 //success
},
function(status){
 //fail
});
POST
ajax.post('/test.php', {foo: 'bar'}, function(response,xml) {
 //succcess
},function(status){
 //fail
});

Es gibt einen Was hier zu beachten ist Frage, ob wir etwas senden möchten wie „Wie implementiert man Tabellen-Paging?“

Wie implementiert man Aufnahme- und Wiedergabeaufzeichnungsfunktionen im WeChat-Miniprogramm

Nuxt.js-Framework (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo schreiben Sie eine Ajax-Anfragefunktion mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!