Function to Write Ajax Request Function with Native JavaScript

Wenn wir Webseiten schreiben, verwenden wir in der Regel bereits verpackte Bibliotheken wie JQuery, um Ajax-Anfragen an den Server zu senden, was einfach ist.

Allerdings sind die Funktionen dieser Bibliotheken in der Regel vielfältig und sie beinhalten viele Dinge, die wir nicht benötigen. Wenn wir eine einfache, funktionsspezifische Seite schreiben möchten, ist es nicht erforderlich, so große Bibliotheksdateien zu referenzieren.

Wir können eine einfache Ajax-Anfragefunktion selbst implementieren, das spezifische Code ist 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"
 ];
 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
});

Hier需要注意一个问题，如果我们想要发送类似

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

Zusammenfassung

Zusammenfassung: In diesem Artikel habe ich den originalen JavaScript-Aufruf der Ajax-Funktion vorgestellt. Ich hoffe, dass dies für Sie hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie bitte einen Kommentar, ich werde mich umgehend um eine Antwort kümmern. Ich danke auch sehr für die Unterstützung der呐喊教程!

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrecht des jeweiligen Autors. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Die Website übernimmt keine Haftung für rechtliche Fragen. Wenn Sie Inhalte mit Urheberrechtsverletzungen finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3Hinweis: Bitte ersetzen Sie bei der E-Mail-Sendung das # durch @ und geben Sie eine Beschwerde ab, sowie relevante Beweise. Wenn die Beanstandung berechtigt ist, wird die Website den fraglichen Inhalt sofort löschen.