Comment écrire une fonction de requête Ajax en utilisant JS-js tutoriel-php.cn

Comment écrire une fonction de requête Ajax en utilisant JS

亚连

Libérer： 2018-06-15 23:26:37

original

1498 Les gens l'ont consulté

Cet article partagera avec vous une fonction de requête Ajax auto-écrite basée sur JS natif. Les amis qui en ont besoin peuvent s'y référer

Généralement, lorsque nous écrivons des pages Web, si nous utilisons le serveur de requêtes Ajax, nous utilisation Il est relativement simple d'appeler JQuery et d'autres bibliothèques encapsulées.

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.

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 qui doit être noté ici. Si nous voulons envoyer quelque chose comme >Comment implémenter la pagination de table dans vue + element

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

Comment implémenter les fonctions d'enregistrement et de lecture dans Applet WeChat

Framework Nuxt.js (Tutoriel détaillé)

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!