Mon travail récent implique de nombreuses opérations ajax, et je dois faire les choses qui doivent être faites en arrière-plan. La fonction ajax utilisée maintenant est encapsulée par une personne en arrière-plan - mais elle est basée sur l'ajax de jquery. la fonction sans jquery est inutile. Et je pense que la méthode ajax de jquery est très complète et peut être utilisée directement si vous avez déjà jquery, alors son ajax ne sera pas utilisé en vain. Ce qui me manque, c'est une méthode ajax qui peut. être utilisé sans jquery.
J'ai donc aussi passé une journée à en écrire un. Les paramètres et la méthode d'appel sont similaires à l'ajax de jquery. Appelons-le xhr, car xhr=XMLHttpRequest.
root.type = ops.type || 'responseText';
root.method = ops.method || 'GET';
Root.async = ops.async || vrai
root.data = ops.data || {};
root.complete = ops.complete || fonction () {};
root.success = ops.success || fonction(){};
root.error = ops.error || fonction(s) { alert(root.url '->status:' s 'error!')};
root.abort = req.abort;
root.setData = fonction (données) {
pour (var d dans les données) {
root.data[d] = data[d];
}
>
root.send = fonction () {
var datastring = formatData(root.data),
sendstring,get = false,
async = root.async,
complete = root.complete,
méthode = root.method,
type=root.type;
Si(méthode === 'GET') {
root.url ='?'
get = true;
}
req.open(method,root.url,async);
if(!get) {
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
sendstring = datastring;
//Réinitialisez la méthode onreadystatechange avant l'envoi, sinon une nouvelle demande de synchronisation se produira et deux rappels réussis seront exécutés (chrome, etc. exécutera également onreadystatechange lors des demandes de synchronisation)
req.onreadystatechange = async function () {
// console.log('async true');
Si (req.readyState ==4){
compléter();
Si (req.status == 200) {
root.success(req[type]);
} autre {
Root.error(req.status);
}
} : null;
req.send(sendstring);
if(!async) {
//console.log('async false');
compléter();
root.success(req[type]);
}
>
root.url && root.send();
};
Retourner la fonction (ops) {return new AJAX (ops);}
}();
1.url : Adresse de la demande. Si vous ne la remplissez pas, la demande ne sera pas initiée. Mais si vous ne la remplissez pas et ne forcez pas l'envoi, vous ne me blâmez pas si quelque chose ne va pas. 🎜> 2.méthode : 'GET' ou 'POST', toutes en majuscules, GET par défaut
3.data : Les données à envoyer sont jointes, le format est un objet
4.async : s'il doit être asynchrone, vrai par défaut
5.type : Le type de données renvoyé est uniquement ResponseText ou ResponseXML. La valeur par défaut est ResponseText
.
6.complete : Fonction exécutée lorsque la requête est terminée
7.success : Fonction exécutée lorsque la requête est réussie
8.erreur : Fonction exécutée lorsque la requête échoue
Remarque : le paramètre type n'est pas aussi riche que le dataType de jquery. Il n'a que ResponseText ou ResponseXML en AJAX natif. Si des données json sont renvoyées, vous devez les traiter vous-même dans la fonction success pour convertir le texte en json.
Un objet xhr instancié a deux fonctions disponibles, l'une est send, la méthode appelante est : xhr.send(), aucun paramètre, sa fonction est d'initier le processus de requête. S'il n'y a pas d'url lors de l'initialisation, il ne le fera pas. être exécuté. méthode d'envoi, afin que vous puissiez ajouter l'url plus tard et lancer l'envoi manuellement - s'il n'y a pas d'url lors de l'envoi, la demande échouera et je n'ai pas géré cette erreur. Vous ne trouverez l'erreur que vous-même. >
Une autre méthode est setData. La méthode appelante est xhr.setData(data_obj), et son paramètre est un objet. La fonction de la méthode setData est de remplacer partiellement la valeur dans l'attribut data de xhr. déjà une page dans xhr.data : 1. Vous pouvez utiliser xhr.setData({page:2}) pour mettre à jour sa valeur sans affecter les autres valeurs d'attributqui existent déjà dans data.
Méthode d'appel :
Copier le code
Donc cette fonction xhr a déjà considéré cette fonction. En prenant l'exemple de la pagination, on peut initialiser un objet xhr lorsque la page est chargée et l'enregistrer sous la variable a1 Lorsqu'une demande de tournage de page est initiée, aucun autre paramètre. ont changé, mais le pageNumber a changé. À ce stade, vous pouvez appeler la méthode setData de xhr pour modifier le pageNumber.
a1.data = {…};
Pas seulement les données, vous pouvez apporter davantage de modifications à l'objet xhr instancié a1, comme changer l'URL, changer la fonction de réussite, GET en POST, synchrone en asynchrone... Après la modification, appelez à nouveau a1.send() méthode, il relancera la demande en fonction de vos paramètres.
Bien sûr, s'il s'agit d'une autre requête ajax qui n'a aucun rapport, il n'est pas nécessaire d'utiliser ce a1 prêt à l'emploi. Nous pouvons instancier un autre xhr et l'appeler a2 ou quelque chose comme ça.
Si vous n'êtes pas satisfait du nom xhr, alors vous devez le changer vous-même.
Une version compressée et cryptée est également fournie. La version non compressée fait environ 2 Ko avec les commentaires supprimés, et la version compressée fait 1,00 Ko.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
