Quelles technologies ajax inclut-il ? Résumé de l'importance de la technologie ajax (avec exemples inclus)

Cet article vous présente principalement les causes et les conséquences de ajax, ainsi que quelques avantages et inconvénients de l'ajax. Voyons maintenant ensemble cet article

1. Contexte de la technologie ajax :

2. Résumé de l'importance de la technologie ajax :

3. À propos du nom d'ajax :

À propos du synchrone et de l'asynchrone :

Plus précisément, la transmission asynchrone divise les bits en petits groupes pour la transmission. Généralement, chaque groupe est un caractère de 8 bits. Il y a un bit de départ et un bit d'arrêt en tête et en queue de chaque groupe. Pendant le processus de transmission, les horloges du récepteur et de l'expéditeur ne doivent pas nécessairement être cohérentes. c'est-à-dire que l'expéditeur peut envoyer ces groupes à tout moment sans que le destinataire sache quand il arrivera. L'un des exemples les plus évidents est la communication entre le clavier de l'ordinateur et l'hôte. Lorsqu'une touche est enfoncée, un code ASCII de 8 bits est envoyé à l'hôte. Le clavier peut envoyer le code à tout moment, en fonction de la saisie de l'utilisateur. vitesse. Le matériel interne doit pouvoir recevoir un caractère tapé à tout moment. Il s’agit d’un processus de transmission asynchrone typique. Un problème potentiel avec la transmission asynchrone est que le récepteur ne sait pas quand les données arriveront. Avant qu'il ne détecte les données et ne réponde, le premier bit est passé. C'est comme si quelqu'un surgissait de manière inattendue par derrière et vous parlait, et que vous n'aviez pas le temps de réagir et que vous manquiez les premiers mots. Par conséquent, chaque transmission asynchrone d'informations commence par un bit de démarrage, qui informe le récepteur que les données sont arrivées, ce qui donne au récepteur le temps de répondre, de recevoir et de mettre en cache les bits de données à la fin de la transmission, un bit d'arrêt indique la fin ; de cette transmission d’informations. Par convention, une ligne inactive (ne transmettant pas de données) transporte en fait un signal représentant un 1 binaire. Le bit de départ de la transmission par étapes fait passer le signal à 0, et les autres bits font changer le signal avec les informations de données transmises. Enfin, le bit d'arrêt ramène le signal à 1, où il reste jusqu'à l'arrivée du bit de démarrage suivant. Par exemple, le chiffre « 1 » sur le clavier enverra « 00110001 » selon le codage ASCII étendu 8 bits. En même temps, un bit de démarrage doit être ajouté devant le bit 8 bits et un bit d'arrêt. suivra.

Les paquets de bits transmis simultanément sont beaucoup plus gros. Au lieu d'envoyer chaque caractère indépendamment, chacun avec son propre bit de départ et son propre bit d'arrêt, il les combine et les envoie ensemble. Nous appelons ces combinaisons des trames de données, ou simplement des trames.

La première partie de la trame de données contient un ensemble de caractères de synchronisation, qui est une combinaison unique de bits, similaire au bit de départ mentionné précédemment, utilisée pour informer le récepteur qu'une trame est arrivée, mais elle peut Assurez-vous également que la vitesse d'échantillonnage du récepteur est cohérente avec la vitesse d'arrivée des bits, afin que les parties émettrices et réceptrices soient synchronisées.

La dernière partie du cadre est un marqueur de fin de cadre. Comme le caractère de synchronisation, il s'agit également d'une chaîne de bits unique, similaire au bit d'arrêt mentionné précédemment, utilisée pour indiquer qu'il n'y a pas d'autres données à venir avant le début de la trame suivante.

Les transferts synchrones sont généralement beaucoup plus rapides que les transferts asynchrones. Le récepteur n'a pas besoin de démarrer et d'arrêter chaque caractère. Une fois les caractères de synchronisation de trame détectés, il les reçoit au fur et à mesure de l'arrivée des données suivantes. De plus, le surcoût de la transmission synchrone est également relativement faible. Par exemple, une trame typique peut contenir 500 octets (c'est-à-dire 4 000 bits) de données, qui ne peuvent contenir que 100 bits de surcharge. À ce stade, les bits ajoutés augmentent le nombre total de bits transmis de 2,5 %, ce qui est bien inférieur à l'augmentation de 25 % de la transmission asynchrone. À mesure que le nombre de bits de données réels dans la trame de données augmente, le pourcentage de bits de surcharge diminue en conséquence. Cependant, plus les bits de données sont longs, plus le tampon requis pour mettre en cache les données est grand, ce qui limite la taille d'une trame. De plus, plus la trame est grande, plus elle occupe de temps continu le support de transmission. Dans des cas extrêmes, cela entraînera une attente trop longue des autres utilisateurs.

heures. Pendant ces 10 heures, l'eau n'a pas été complètement coupée, mais le débit était beaucoup plus faible qu'avant. Le débit est revenu à la normale après 10 heures. Alors, quelle méthode choisiriez-vous. étais-tu ? Apparemment, c'est ce dernier.

4. La technologie incluse dans ajax :

Tout le monde sait qu'ajax n'est pas une nouvelle technologie, mais une combinaison de plusieurs technologies originales. Il est composé des technologies suivantes.

1. Utilisez CSS et XHTML pour exprimer.

2. Utilisez le modèle DOM pour l'interaction et l'affichage dynamique.

3. Utilisez XMLHttpRequest pour communiquer de manière asynchrone avec le serveur.

4. Utilisez javascript pour vous lier et appeler.

Parmi les technologies ci-dessus, à l'exception de l'objet XmlHttpRequest, toutes les autres technologies sont basées sur les standards du Web et ont été largement utilisées. Bien que XMLHttpRequest n'ait pas encore été adopté par le W3C, il s'agit déjà d'un standard de facto. presque tous les principaux navigateurs le prennent actuellement en charge.

5. Principe d'Ajax et objet XmlHttpRequest

Le principe d'Ajax est simplement d'envoyer une requête asynchrone au serveur via l'objet XmlHttpRequest, d'obtenir les données du serveur , puis utilisez javascript pour manipuler le DOM afin de mettre à jour la page. L’étape la plus critique consiste à obtenir les données de la demande auprès du serveur. Pour comprendre ce processus et ce principe, nous devons comprendre quelque chose à propos de XMLHttpRequest.

XMLHttpRequest est le mécanisme de base d'ajax. Il a été introduit pour la première fois dans IE5 et est une technologie qui prend en charge les requêtes asynchrones. Pour faire simple, JavaScript peut adresser des requêtes au serveur et traiter les réponses en temps opportun sans bloquer l'utilisateur. N'obtenez aucun effet de rafraîchissement.

Commençons donc par XMLHttpRequest et voyons comment cela fonctionne.

Tout d’abord, examinons les propriétés de l’objet XMLHttpRequest.

Ses attributs sont :

onreadystatechange Le gestionnaire d'événement pour l'événement déclenché à chaque fois que l'état change.

responseText renvoie la forme de chaîne des données du processus serveur.

responseXML L'objet de données de document compatible DOM renvoyé par le processus serveur.

le statut est le code numérique renvoyé par le serveur, tel que le commun 404 (introuvable) et 200 (prêt)

status Informations de chaîne de texte accompagnant le code de statut

readyState Valeur d'état de l'objet

0 (non initialisé) L'objet a été créé, mais n'a pas été initialisé (la méthode open n'a pas encore été appelée)

1 (Initialisé) L'objet a été créé , mais la méthode d'envoi n'a pas encore été appelée

2 (Envoyer des données) La méthode d'envoi a été appelée, mais l'état actuel et l'en-tête http sont inconnus

3 (Les données sont en cours de transmission) Une partie des données a été reçue car la réponse et l'en-tête http sont incomplets. Pour le moment, elles sont obtenues via ResponseBody et ResponseText. Il y aura des erreurs dans certaines données

4 (Complet) Les données sont reçues. À l'heure actuelle, les données de réponse complètes peuvent être obtenues via ResponseXml et ResponseText

Cependant, en raison des différences entre les navigateurs, la création d'un objet XMLHttpRequest peut nécessiter des méthodes différentes. Cette différence se reflète principalement entre IE et les autres navigateurs. Ce qui suit est une méthode relativement standard de création d’un objet XMLHttpRequest.

function CreateXmlHttp()
{
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}
catch(ex){}
}
}
}
function TestAjax()
{
var data=document.getElementByIdx("username").value;
CreateXmlHttp();
if(!xmlhttp)
{
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp.open("POST",url,false);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementByIdx("user1").innerHTML="数据正在加载...";
if(xmlhttp.status==200)
{
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}

Comme indiqué ci-dessus, la fonction vérifie d'abord l'état global de XMLHttpRequest et s'assure qu'elle a été terminée (readyStatus=4), c'est-à-dire : les données ont été envoyées. Interrogez ensuite l'état de la demande en fonction des paramètres du serveur. Si tout est prêt (statut = 200), effectuez les opérations requises suivantes.

Pour les deux méthodes de XmlHttpRequest, open et send, la méthode open spécifie :

a Le type de données soumises au serveur, c'est-à-dire post ou get.

b. L'adresse URL demandée et les paramètres transmis.

c. Mode de transmission, faux signifie synchrone, vrai signifie asynchrone. La valeur par défaut est vraie. S'il s'agit d'un mode de communication asynchrone (vrai), le client n'attend pas la réponse du serveur ; s'il s'agit d'un mode synchrone (faux), le client doit attendre que le serveur renvoie un message avant d'effectuer d'autres opérations. Il faut préciser la méthode de synchronisation en fonction des besoins réels. Dans certaines pages, des requêtes multiples peuvent être émises, voire des requêtes à grande échelle et de haute intensité, organisées, planifiées et formées, et cette dernière écrasera la précédente. . Bien entendu, vous devez spécifier la méthode de synchronisation.

La méthode Send est utilisée pour envoyer des requêtes.

Connaissant le workflow de XMLHttpRequest, nous pouvons voir que XMLHttpRequest est entièrement utilisé pour émettre une requête au serveur, et son rôle se limite à cela, mais son rôle est la clé de toute l'implémentation ajax, car Ajax n'est rien de plus que deux processus, faire une demande et répondre à la demande. Et c'est entièrement une technologie côté client. XMLHttpRequest gère le problème de communication entre le serveur et le client, c'est pourquoi c'est si important.

Maintenant, nous pouvons probablement comprendre le principe d'ajax. Nous pouvons considérer le serveur comme une interface de données, qui renvoie un flux de texte brut. Bien entendu, ce flux de texte peut être au format XML, HTML, code Javascript ou simplement une chaîne. À ce stade, XMLHttpRequest demande cette page au serveur et le serveur écrit le résultat du texte dans la page. C'est la même chose que le processus de développement Web ordinaire. La différence est qu'une fois que le client a obtenu le résultat de manière asynchrone, ce n'est pas directement. affiché sur la page, mais est d'abord traité par javascript puis affiché sur la page. Comme pour de nombreux contrôles ajax populaires actuellement, tels que magicajax, etc., ils peuvent renvoyer d'autres types de données tels que DataSet. Ils encapsulent simplement le résultat de ce processus. En substance, il n'y a pas beaucoup de différence entre eux.

6. Avantages d'ajax :

Tout le monde a fondamentalement une compréhension approfondie des avantages qu'Ajax nous apporte. Ici, je vais juste parler brièvement de quelques points :

1. Le plus gros point est que la page ne s'actualise pas et ne communique pas avec le serveur au sein de la page, offrant à l'utilisateur une très bonne expérience.

2. Utilisez le mode asynchrone pour communiquer avec le serveur, sans interrompre le fonctionnement de l'utilisateur, et bénéficiez de capacités de réponse plus rapides.

3. Une partie du travail précédemment chargé par le serveur peut être transférée au client, en utilisant la capacité inactive du client pour le traiter, réduisant ainsi la charge sur le serveur et la bande passante, et économisant de l'espace et de la location du haut débit. frais. Et pour réduire la charge sur le serveur, le principe d'ajax est de « récupérer les données à la demande », ce qui peut minimiser la charge sur le serveur causée par les requêtes et réponses redondantes.

4. Basé sur une technologie standardisée et largement prise en charge, il n'est pas nécessaire de télécharger des plug-ins ou de petits programmes.

7. Inconvénients de l'ajax :

Je vais maintenant me concentrer sur les défauts de l'ajax, car nous prêtons généralement attention aux avantages que l'ajax nous apporte. comme l'amélioration de l'expérience utilisateur. Les défauts causés par ajax ont été ignorés. (Si vous voulez en savoir plus, rendez-vous sur le site Web PHP chinois Colonne Manuel de développement AJAX pour en savoir)

Les défauts d'ajax décrits ci-dessous sont tous causés par son caractère inné.

1. Ajax tue le bouton de retour, ce qui détruit le mécanisme de retour du navigateur. Le bouton Précédent est une fonctionnalité importante d'un site Web standard, mais il ne fonctionne pas bien avec JavaScript. Il s'agit d'un problème sérieux causé par ajax, car les utilisateurs espèrent souvent annuler l'opération précédente en revenant en arrière. Alors, y a-t-il une solution à ce problème ? La réponse est oui. Ceux qui ont utilisé Gmail savent que la technologie ajax utilisée sous Gmail résout ce problème. Cependant, cela ne change pas le mécanisme ajax. pour ce faire, il suffit de créer ou d'utiliser un IFRAME masqué pour reproduire les modifications sur la page lorsque l'utilisateur clique sur le bouton de retour pour accéder à l'historique. (Par exemple, lorsqu'un utilisateur effectue une recherche sur Google Lorsque vous cliquez à nouveau dans Maps, il recherche dans un IFRAME masqué, puis reflète les résultats de la recherche sur l'élément Ajax pour restaurer l'état de l'application à son état actuel. )

Cependant, bien que ce problème puisse être résolu, le coût de développement qu'il entraîne est très élevé, ce qui est contraire au développement rapide requis par le framework ajax. Il s'agit d'un problème très grave causé par ajax.

2. Problèmes de sécurité

La technologie apporte également de nouvelles menaces de sécurité aux entreprises informatiques. La technologie Ajax revient à établir un canal direct pour les données d'entreprise. Cela permet aux développeurs d’exposer par inadvertance davantage de données et de logique de serveur qu’auparavant. La logique Ajax peut être masquée par la technologie d'analyse de sécurité côté client, permettant ainsi aux pirates de créer de nouvelles attaques à partir de serveurs distants. Ajax est également difficile à éviter certaines faiblesses de sécurité connues, telles que les attaques de scripts intersites, les attaques par injection SQL et les vulnérabilités de sécurité basées sur les informations d'identification.

3. Le support des moteurs de recherche est relativement faible.

4. Détruit le mécanisme d'exception du programme. Au moins du point de vue actuel, les frameworks ajax tels que ajax.dll et ajaxpro.dll détruiront le mécanisme d'exception du programme. Concernant ce problème, je l'ai rencontré lors du processus de développement, mais après vérification, il n'y a quasiment aucune introduction pertinente sur Internet. Plus tard, j'ai fait une expérience moi-même, en utilisant ajax et les modes de soumission de formulaires traditionnels pour supprimer une donnée... ce qui a apporté de grandes difficultés à notre débogage.

5. En outre, il existe d'autres problèmes, tels que la violation de l'intention initiale de l'URL et du positionnement des ressources. Par exemple, si je vous donne une adresse URL, si la technologie Ajax est utilisée, peut-être que ce que vous voyez sous l'adresse URL est différent de ce que je vois sous cette adresse URL. Ceci est contraire à l’intention initiale du positionnement des ressources.

6. Certains appareils portables (tels que les téléphones mobiles, les PDA, etc.) ne prennent actuellement pas très bien en charge ajax. Par exemple, lorsque nous ouvrons un site Web utilisant la technologie ajax sur un navigateur mobile, ce n'est actuellement pas le cas. soutenez-le. Bien sûr, cette question n’a rien à voir avec nous.

8. Plusieurs frameworks ajax

À l'heure actuelle, les frameworks ajax que nous utilisons incluent principalement ajax.dll, ajaxpro.dll, magicajax.dll et le framework atlas de Microsoft. Il n'y a pas beaucoup de différence entre les deux frameworks Ajax.dll et Ajaxpro.dll, tandis que magicajax.dll est juste plus puissant en encapsulation. Par exemple, il peut renvoyer directement l'ensemble de données DataSet. Comme nous l'avons déjà dit, ajax renvoie toutes les chaînes. . magicajax l'encapsule simplement. Mais cette fonctionnalité peut nous apporter une grande commodité. Par exemple, si notre page a une liste et que les données de la liste changent constamment, nous pouvons utiliser magicajax pour les traiter. L'opération est très simple. nous allons Le contrôle de liste mis à jour est placé dans le contrôle magicajax, puis l'intervalle de mise à jour est défini dans le chargement de la page. Le principe d'atlas est similaire à celui de magicajax. Cependant, une chose à laquelle il faut prêter attention est que ces frameworks ne prennent en charge qu'IE et ne gèrent pas la compatibilité des navigateurs. Vous pouvez le savoir en examinant leur code avec un outil de décompilation.

En plus de ces frameworks, la méthode la plus couramment utilisée consiste à créer nous-mêmes des objets xmlHttpRequest. Cette méthode est plus flexible que les frameworks précédents. De plus, je voudrais également mentionner ici l'interface de rappel asynchrone fournie avec aspnet2.0. Comme ajax, elle peut également réaliser une non-actualisation locale, mais son implémentation est en fait basée sur l'objet xmlhttprequest. IE Bien sûr, c'est une stratégie compétitive de Microsoft.

9. Exemples d'applications Ajax

Le contenu ci-dessus est reproduit à partir de documents rédigés par des experts. Ci-dessous, je vais donner un exemple de mon application réelle dans le projet. C'est comme ceci : dans le module d'organisation des tâches d'un projet auquel j'ai participé, lors de la sélection de la personne de service, un diagramme de structure arborescente de contacts apparaît. Cliquez sur le département, puis les contacts sous le département se développeront à l'origine. ressemblait à ceci, Après avoir sélectionné certains contacts, la personne de garde de jour ou de nuit sera au format "Petit A, Petit B", mais désormais elle doit être au format "Petit A (Département 1) , Little B (Département 2)" ici Supposons que Little A appartient au département un et Little B appartient au département deux. Étant donné que la sélection des contacts est purement une opération JavaScript frontale, vous devez ici obtenir le nom du département via l'identifiant du département dans le tableau de la liste des utilisateurs de contacts, c'est-à-dire obtenir les données back-end via le front-end, j'ai également expliqué. ceci dans la série 5, ci-dessous Donnez le code :

var param= "date=<%=stryear%>/<%=strmonth%>/" + x <%=stryear%><%=strmonth%>
+"&Type=" + type
+"&Other=" + eval_r("formData.RBOTHER"+x+".value")
+"&ZBRY=" + eval_r("formData.RBZBRY"+x+".value")
+"&ZBRYID=" + eval_r("formData.RBZBRYID"+x+".value")
+"&Demo=" + eval_r("formData.RBDEMO"+x+".value")
+"&id=" + eval_r("formData.RBZBID"+x+".value");//传递的参数
var retVal = window.showModalDialog( "chooseUsers.asp?"+param,this, "dialogWidth=280px; dialogHeight=500px; help=no; status=no; scroll=no; resizable=yes; ");
//弹出对话框取得联系人
//ajax调用服务器端方法取到部门名称
if(retVal [&#39;userIds&#39;]!=""&& retVal [&#39;userIds&#39;]!=null)//联系人id集合格式1，2，3，4
{
var PostUrl=" ../../../Application/CallBoard/GetDepartMentByUid.aspx?userIDs="+objRetVal[&#39;userIds&#39;]+"";//后台处理页面url
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//新建一个xmlhttprequest对象
xmlHttp.open("POST", PostUrl, false);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("");
var builder= xmlHttp.responseText; //将值传递回来,拼成了新格式
eval_r("formData.RBZBRY"+x+".value = &#39;" +builder+"&#39;");// formData.RBZBRY为一文本控件,将显示值班人员新格式
}
}

本篇文章到这就结束了（想看更多就到PHP中文网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!