So implementieren Sie die Ajax-Anfragefunktion in JS

Dieses Mal zeige ich Ihnen, wie Sie die Ajax-Anfragefunktion in JS implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der Ajax-Anfragefunktion in JS? Fall, schauen wir uns das gemeinsam an.

Wenn wir Webseiten schreiben und Ajax verwenden, um den Server anzufordern, verwenden wir im Allgemeinen

JQuery und andere gekapselte Bibliotheken, um ihn aufzurufen, was relativ einfach ist.

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 einzelnen Funktion schreiben müssen, ist es nicht nötig, auf eine so große Bibliotheksdatei zu

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 == 'POST') {
 x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 }
 x.send(data)
};
ajax.get = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
 }
 ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, callback, fail, async)
};
ajax.post = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
 }
 ajax.send(url,'POST', query.join('&'), callback, fail, async)
};

Verwendung: 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 ein Problem, das hier beachtet werden muss. Wenn wir etwas wie

var sendCmd = "?op_code=" + code + "&op_cmd=" + cmd;
ajax.post('/control' + sendCmd,'',function(response,xml) {
 console.log('success');
},
function(status){
 console.log('failed:' + status);
});

senden möchten, glaube ich, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Der einfachste Weg, die Taschenrechnerfunktion in JS zu implementieren

Angular implementiert Tabellenfilter- und Löschfunktionen

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