Récemment, j'ai impliqué beaucoup d'opérations de l'Ajax et je dois faire ce que je devrais faire en arrière-plan. La fonction AJAX que j'utilise maintenant est encapsulée par un personnel d'arrière-plan - mais il est basé sur jQuery Ajax, il sera donc inutile sans jQuery. Et je pense que la méthode Ajax de jQuery est très complète et peut être utilisée directement. S'il y a jquery, alors son Ajax ne sera pas utilisé en vain. Ce qui me manque, c'est une méthode Ajax qui peut être utilisée sans jQuery.
J'ai donc également passé une journée à en écrire un, les paramètres et la méthode d'appel sont similaires à l'Ajax de JQuery. Cela s'appelle xhr, car xhr = xmlhttprequest.
La copie de code est la suivante:
/ *
* Nom: XHR, fonction d'encapsulation ajax
* Description: une classe d'encapsulation d'appel Javax, imitant la méthode d'appel Ajax de JQuery
* Auteur: Dix ans de lumière
* /
var xhr = fonction () {
var
ajax = function () {
return ('xmlhttprequest' dans la fenêtre)? fonction () {
retourner nouveau xmlHttpRequest ();
} : fonction () {
return new activeXObject ("Microsoft.xmlhttp");
}
} (),
formatData = fonction (fd) {
var res = '';
pour (var f dans fd) {
res + = f + '=' + fd [f] + '&';
}
return res.slice (0, -1);
},
Ajax = fonction (ops) {
var
racine = ceci,
req = ajax ();
root.url = ops.url;
root.type = ops.type || 'ResponseText';
root.method = ops.method || 'OBTENIR';
root.async = ops.async || vrai;
root.data = ops.data || {};
root.comPlete = ops.complete || fonction () {};
root.success = ops.success || fonction(){};
root.error = ops.error || function (s) {alert (root.url + '-> statut:' + s + 'error!')};
root.abort = req.abort;
root.setData = fonction (data) {
pour (var d dans les données) {
root.data [d] = data [d];
}
}
root.send = function () {
var dataString = formatData (root.data),
sendString, get = false,
async = root.async,
complet = root.complete,
méthode = root.method,
type = root.type;
if (méthode === 'get') {
root.url + = '?' + dataString;
get = true;
}
req.open (méthode, root.url, async);
if (! get) {
req.setRequestHeader ("contenu-type", "application / x-www-form-urlencoded");
sendString = dataString;
}
// Réinitialise la méthode OnReadyStateChange avant l'envoi, sinon une nouvelle demande de synchronisation apparaîtra et deux rappels réussis seront exécutés (Chrome, etc. exécutera également OnReadyStateChange lors de la synchronisation de la demande)
req.onreadystateChange = async? fonction () {
// console.log ('async true');
if (req.readystate == 4) {
complet();
if (req.status == 200) {
root.success (req [type]);
} autre {
root.error (req.status);
}
}
} : nul;
req.send (sendString);
if (! async) {
//console.log('async false ');
complet();
root.success (req [type]);
}
}
root.url && root.send ();
};
return function (ops) {return new ajax (ops);}
} ();
Description du paramètre:
1.url: l'adresse de demande. Vous ne pouvez pas le remplir et la demande ne sera pas lancée. Mais si vous ne le remplissez pas et ne le forcez pas à envoyer, je ne vous blâmerai pas pour des erreurs.
2.Méthod: «obtenir» ou «publier», tous capitalisés, par défaut
3.Data: les données à envoyer sont un objet
4.Async: si c'est asynchrone, par défaut
5.Type: Le type de données renvoyé n'est que ResponseText ou ResponseXML, et la réponse par défaut
6.comPlete: fonctions exécutées lorsque la demande est terminée
7.Success: fonctions exécutées lorsque la demande réussit
8.Error: fonction exécutée lorsque la demande échoue
Remarque: Les paramètres de type ne sont pas aussi riches que le type de données de JQuery, uniquement ResponseText ou ResponseXML dans AJAX natif. Si les données JSON sont renvoyées, vous devez le gérer vous-même dans la fonction de réussite pour convertir le texte en JSON.
Description de la fonction:
Il existe deux fonctions à utiliser pour un objet XHR instancié. Un est envoyé. La méthode d'appel est: xhr.send (), sans paramètres. Sa fonction est d'initier le processus de demande. S'il n'y a pas d'URL pendant l'initialisation, la méthode d'envoi ne sera pas exécutée, vous pouvez donc ajouter une URL plus tard et initier Envoyer manuellement - s'il n'y a pas d'URL pendant l'envoi, la demande échouera et je n'ai pas géré cette erreur. Vous seul pouvez trouver l'erreur vous-même.
Une autre méthode est SetData, la méthode d'appel 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 de données de xhr.data. Par exemple, il y a déjà une page: 1 dans xhr.data. Vous pouvez utiliser xhr.setData ({page: 2}) pour mettre à jour sa valeur sans affecter d'autres valeurs d'attribut qui existent déjà dans les données.
Méthode d'appel:
La copie de code est la suivante:
var a1 = xhr ({
URL: '2.php',
données:{
«nom d'utilisateur»: «lix»,
«Mot de passe»: «123456»,
«Genre»: «Homme»,
'interset': 'play'
},
Async: faux,
Méthode: «Get»,
Succès: fonction (données) {
var obj = json.parse (data);
// ...
}
});
Remarque: pas besoin d'écrire de nouveaux
Introduction en vedette:
Après cette période d'expérience du projet, j'ai constaté qu'une classe Ajax devrait avoir une caractéristique très courante: il est pratique de lancer des demandes à plusieurs reprises. Par exemple, lorsque j'écris une page d'Ajax dans un projet, je dois envoyer une demande à chaque fois que je tourne la page, mais les données envoyées ne changeront pas, sauf pour le numéro de page actuel et le numéro de chaque page. Si vous devez définir à plusieurs reprises ces paramètres inchangés, c'est sans aucun doute un gaspillage de ressources.
Cette fonction XHR a donc déjà considéré cette fonction. Prenez l'exemple de pagination. Nous pouvons initialiser un objet XHR lorsque la page est chargée et l'enregistrer en tant que variable A1. Lorsqu'une demande de virage de page est initiée, aucun autre paramètre n'a changé, mais le PageNumber a changé. À l'heure actuelle, nous pouvons appeler la méthode SetData de XHR pour modifier PageNumber.
La copie de code est la suivante:
a1.setData ({pageNumber: 2});
Remarque: Le paramètre de SetData est également un objet.
Bien sûr, vous pouvez également remplacer complètement les données:
a1.data = {…};
Non seulement les données, vous pouvez apporter plus de modifications à l'objet XHR instancié A1, comme la modification de l'URL, la modification de la fonction de réussite, la modification de GET à publier et la modification de manière synchrone en asynchrone ... après avoir changé, appelez la méthode A1.Send (), et elle entamera à nouveau la demande en fonction de vos paramètres.
Bien sûr, s'il s'agit d'une autre demande Ajax qui n'est pas liée, il n'est pas nécessaire de forcer cet A1 prêt à l'emploi. Nous pouvons instancier un autre XHR appelé A2 ou quelque chose.
Si vous n'êtes pas satisfait du nom XHR, vous ne pouvez que le changer vous-même.
De plus, il fournit une version cryptée compressée. La version non compressée supprime les commentaires sur 2 Ko et la version compressée est de 1,00 Ko.
La copie de code est la suivante:
var xhr = function () {var e = function () {return "xmlHttpRequest" dans Window? function () {return new xmlHttpRequest}: function () {return new activeXObject ("Microsoft.xmlhttp")}} (), t = function (e) {var t = "; e) {t + = n + "=" + e [n] + "&"} return t.slice (0, -1)}, n = fonction (n) {var R = this, i = e (); r.url = n.url; r.type = n.type || "ResponseText"; n () {}; r.success = n.success || function () {}; r.error = n.error || function (e) {alert (r.url + "-> status:" + e + "error!") t in e) {r.data [t] = e [t]}}; r.send = function () {var e = t (r.data), n, s = false, o = r.async, u = r..............cabgeonnois ue} i.open (a, r.url, o); if (! s) {i.SetRequestHeader ("contenu-type", "application / x-www-form-urlencoded "); n = e} i.onreadystatechange = o? function () {if (i.readystate == 4) {u (); if (i.status == 200) {r.success (i [f ])} else {r.error (i.status)}}}: null; i.send (n); if (! o) {u (); r.success (i [f])}}; r.url && r.send ()}; retour fonction (e) {return new n (e)}} ()
Il doit y avoir une certaine incomplétude dans XHR. Si vous le trouvez lors d'une utilisation à l'avenir, je le corrigerai à temps. Si vous n'êtes pas satisfait ou que vous le trouvez insuffisant, veuillez donner des suggestions d'amélioration.