Partager des exemples d'écriture de fonctions de requête Ajax à l'aide de JS natif

Généralement, lorsque nous écrivons des pages Web, si nous utilisons Ajax pour demander le serveur, nous utilisons JQuery et d'autres bibliothèques encapsulées pour l'appeler, ce qui est relativement simple. Mais généralement, ces bibliothèques ont de nombreuses fonctions et introduisent trop de choses dont nous n'avons pas besoin. Si nous devons écrire une page simple avec une seule fonction, il n'est pas nécessaire de référencer un fichier de bibliothèque aussi volumineux. Dans cet article, nous partageons principalement avec vous la fonction de requête d'écriture d'Ajax en JS natif, dans l'espoir d'aider tout le monde.

Nous pouvons simplement implémenter notre propre fonction de requête Ajax. Le code spécifique est le suivant :

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

Méthode d'utilisation : 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
});

Il y a un problème à noter ici, si nous voulons envoyer des recommandations connexes comme

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

:

Résumé complet des méthodes associées basées sur ajax dans jQuery

Explication détaillée de l'implémentation simple de l'effet de pagination AJAX

Expliquez la technologie de requête asynchrone Ajax avec des exemples

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!