Comment implémenter la fonction de requête Ajax dans JS

Cette fois, je vais vous montrer comment implémenter la fonction de requête Ajax en JS Quelles sont les précautions pour implémenter la fonction de requête Ajax en JS. Dans ce cas, jetons un coup d'œil ensemble.

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 avons besoin d'écrire une page simple avec une seule fonction, il n'est pas nécessaire de référence 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 !== '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 == 'POST') {
 x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 }
 x.send(data)
};
ajax.get = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
 }
 ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, callback, fail, async)
};
ajax.post = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
 }
 ajax.send(url,'POST', query.join('&'), callback, fail, async)
};

. Utilisation : OBTENIR

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 qui doit être noté ici. Si nous voulons envoyer quelque chose 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);
});

, je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Le moyen le plus simple d'implémenter la fonction de calculatrice dans JS

Angular implémente les fonctions de filtrage et de suppression de table

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!