Partager des exemples d'écriture de fonctions de requête Ajax à l'aide de JS natif-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-23 15:25:08

original

1393 Les gens l'ont consulté

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 !== &#39;undefined&#39;) {
 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)
};

Copier après la connexion

Méthode d'utilisation : GET<🎜. >

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

Copier après la connexion

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(&#39;/control&#39; + sendCmd,&#39;&#39;,function(response,xml) {
 console.log(&#39;success&#39;);
},
function(status){
 console.log(&#39;failed:&#39; + status);
});

Copier après la connexion

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!