Écrire la fonction de requête Ajax en JS natif-js tutoriel-php.cn

Écrire la fonction de requête Ajax en JS natif

不言

Libérer： 2018-07-02 16:58:43

original

1220 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

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 quelque chose 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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

La bonne façon de transmettre les paramètres de la fonction de rappel ajax

Introduction aux requêtes d'obtention et de publication Ajax

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!