Explication détaillée de l'exemple de code de la technologie d'encapsulation d'objet XMLHTTP-Tutoriel XML/RSS-php.cn

Explication détaillée de l'exemple de code de la technologie d'encapsulation d'objet XMLHTTP

黄舟

Libérer： 2017-03-27 16:32:52

original

1697 Les gens l'ont consulté

L'implémentation de la technologie ajax repose principalement sur xmlhttprequest, mais lorsque nous l'appelons pour une transmission de données asynchrone, puisque xmlhttp est un processus à court terme (il sera détruit après le traitement de l'événement), si l'objet n'est pas empaqueté, il devra être traité dans Reconstructing xmlhttprequest où il doit être appelé nécessite d'écrire une grande section de code pour chaque appel, ce qui n'est vraiment pas une bonne idée. Heureusement, de nombreux frameworks ajax open source proposent désormais des solutions pour encapsuler XMLhttp. Ici, nous utilisons le prototype-1.4.0.js fourni avec ajaxtags comme maître pour voir comment encapsuler l'objet xmlhttp dans une méthode réutilisable.

Dans prototype.js, une variable est d'abord définie : Ajax

　 var Ajax = {
　　　 getTransport: function() {
　　　　 return Try.these(
　　　　　 function() {return new ActiveXObject(&#39;Msxml2.XMLHTTP&#39;)},
　　　　　 function() {return new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;)},
　　　　　 function() {return new XMLHttpRequest()}
　　　 ) || false;
　 },
　　 
　　 activeRequestCount: 0
}

Copier après la connexion

La variable renvoie une requête xmlhttp Vous pouvez voir cela si on appelle Ajax.getTransport(), à chaque fois Un nouveau. L'objet xmlhttprequest sera renvoyé.

Une méthode de base Ajax.Base et le prototype de la méthode de base sont définis dans la variable Ajax (initialement, chaque méthode de script a par défaut un prototype vide, qui héritera du prototype d'Object. Si on Si le le prototype est modifié dans Object, toutes les méthodes de script seront modifiées) Cette méthode de base est héritée par Ajax.Request. Notez que si la méthode ou la variable du prototype hérité portant le même nom est renseignée dans Ajax.Request, elle sera modifiée. .

La chose la plus importante dans le prototype Ajax.Base est la méthode setOptions, que nous utiliserons plus tard.

setOptions: function(options) {
　　 this.options = {
　　　 method:　　　 &#39;post&#39;,
　　　 asynchronous: true,
　　　 parameters:　 &#39;&#39;
　　 }

Copier après la connexion

La requête dans le prototype est implémentée en définissant le prototype Ajax.Request (Ajax.Request.prototype). Mais nous ne pouvons pas appeler directement Ajax.Request. La raison principale est qu'Ajax.Request ne fournit pas de processus de traitement unifié. Et nous devrons peut-être obtenir la réponse via la demande. (Imaginez que le client envoie un message mais n'ait jamais reçu de réponse. Ce serait très ennuyeux ~) Le prototype encapsule également la réponse (Ajax.Responders) pour nous, mais les deux sont indépendants l'un de l'autre. Comment les intégrer ?

nous propose deux solutions dans le prototype, l'une est Ajax.Updater et l'autre est Ajax.PeriodicalUpdater. Les deux ont en commun que 3 paramètres doivent être passés dans :

conteneur :<. 🎜>

La position où les données de réponse doivent être transmises. La position est définie par l'identifiant de la balise html. Par exemple, si vous souhaitez afficher les données renvoyées vers un

dans le code HTML, vous n'avez qu'à le faire. besoin de changer le conteneur en ceci La valeur de id est suffisante. Si le conteneur est introuvable, une erreur de script se produit.

url : La destination vers laquelle la demande

request doit être transmise. La destination doit être un servlet ou un jspservlet, car l'objet de requête ne peut être obtenu automatiquement que par la méthode do*** dans le servlet.

options : La structure

doit être la même que la structure d'option dans setOptions() définie par Ajax.Base ci-dessus. Si elle est vide ou non écrite, la valeur initiale définie par Ajax. La base sera utilisée (aucune utilisée lors du passage de paramètres).

La différence entre les deux est qu'Ajax.Updater renvoie le texte de réponse complet au conteneur. Ce n'est que lorsque le texte de réponse est complètement obtenu et qu'aucune exception ne se produit que le contenu sera écrit dans le conteneur. Cependant, lorsque PeriodicalUpdater l'obtient. le ResponseText, qu'il ait été complètement obtenu ou non, le contenu est rempli dans le conteneur jusqu'à ce qu'une exception se produise ou que le ResponseText soit complètement obtenu. Dans la plupart des cas, la première méthode doit être utilisée, car la première méthode affichera les informations d'exception dans le conteneur lorsqu'une exception se produit, alors que la seconde méthode ne le fera pas.

Maintenant que xmlhttp a été encapsulé, il ne nous reste plus qu'à définir les trois paramètres mentionnés ci-dessus. Il convient de noter que lors de la définition des paramètres des options, vous devez les définir en fonction de la structure des options dans la base. utilisez la méthode post, nous pouvons également définir l'attribut postBody dans les options et mettre la queryString à transférer dans le corps. Un exemple de script utilisant la méthode post pour transférer est le suivant :

/*表单提交用post方法*/
function doRequest(container,paraments,url){
　　 var options ={
　　　 method:　　　 &#39;post&#39;,
　　　 asynchronous: true,
　　　 postBody: paraments
　　 };
　　 new Ajax.Updater(container,url,options);　　
}

Copier après la connexion

Enfin. Je dois dire que c'est un problème d'encodage chinois. Le prototype effectue une conversion d'encodage sur les paramètres transmis, et chaque valeur transmise est traitée via encodeURIComponent. L'encodage sera converti en utf-8 Lors de l'obtention de la requête en arrière-plan, vous devez utiliser uniformément request.setCharacterEncoding("UTF-8") pour définir l'encodage de la requête, quel que soit le format d'encodage de la page. Si vous utilisez la méthode post pour transférer des données, elle exécutera automatiquement :

requête. setHeader('Content-type','application/x-www-form-urlencoded'). Assurez-vous que le format de codage des données transmises est correct.

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!