Teilen Sie Beispiele für das Schreiben von Ajax-Anfragefunktionen mit nativem JS

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 verweisen. In diesem Artikel teilen wir Ihnen hauptsächlich die Anforderungsfunktion zum Schreiben von Ajax in nativem JS mit, in der Hoffnung, allen zu helfen.

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
});

Hier ist ein Problem zu beachten, wenn wir verwandte Empfehlungen 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

:

Umfassende Zusammenfassung verwandter Methoden basierend auf Ajax in jQuery

Detaillierte Erklärung der einfachen Implementierung des AJAX-Paging-Effekts

Erklären Sie die asynchrone Ajax-Anfragetechnologie anhand von Beispielen

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für das Schreiben von Ajax-Anfragefunktionen mit nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!