Une anatomie approfondie du fonctionnement d'Ajax-js tutoriel-php.cn

Cet article présente principalement le principe de fonctionnement de l'anatomie approfondie d'Ajax. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil

1. Contexte de la technologie ajax

Il est indéniable que la popularité de la technologie ajax bénéficie de la promotion vigoureuse de Google C'est précisément grâce à l'application étendue de la technologie ajax telle que Google Earth, Google Suggest et Gmail que la popularité d'Ajax est née. Cela rend également Microsoft extrêmement embarrassé, car dès 1997, Microsoft avait inventé la technologie clé en ajax, et lorsque IE5 a été lancé en 1999, il a commencé à prendre en charge l'objet XmlHttpRequest, et Microsoft avait déjà commencé à l'utiliser auparavant. est utilisé dans certains produits, tels que certaines applications du menu du site Web MSDN. Malheureusement, pour une raison inconnue, après que Microsoft ait inventé la technologie de base d'ajax, il n'a pas vu son potentiel, ne l'a pas développé et promu, mais l'a mis de côté. Personnellement, je trouve cela très étrange, car avec les ressources et la vision stratégique de Microsoft, il ne devrait pas être incapable de voir les perspectives de la technologie ajax. La seule explication peut être que son principal concurrent de l'époque. La disparition de Netscape l'a paralysé et ralenti. Après tout, les géants font aussi la sieste, comme les erreurs stratégiques d'IBM contre Microsoft. C'est cette erreur qui a fait de son concurrent actuel la position de leader dans l'Ajax. En fait, le leadership actuel de Google dans la technologie Ajax est hors de portée de Microsoft. Nous en parlerons plus tard lorsque nous parlerons des défauts d'Ajax. Maintenant que Microsoft est conscient de ce problème, il a également commencé à rattraper son retard dans le domaine ajax. Par exemple, il a lancé son propre atlas de framework ajax et a également fourni une interface pour implémenter des rappels asynchrones dans .NET 2.0, à savoir l'interface ICallBack. . Alors pourquoi Microsoft est-il si nerveux à cause de son retard en matière d'ajax ? Analysons maintenant la signification profonde de la technologie ajax.

2. L'importance de la technologie ajax

Nous sommes plus ou moins exposés ou appliqués à ajax dans notre développement quotidien. , nous y prêtons attention. Le plus important est sans aucun doute d'améliorer l'expérience utilisateur. Cependant, si nous combinons les futures tendances de développement des ordinateurs et d'Internet, nous constaterons que la technologie ajax représente cette tendance à certains égards. Pourquoi dis-tu cela ? On sait que depuis l’avènement des ordinateurs, les logiciels de bureau ont toujours occupé une position absolument dominante, mais l’émergence et le succès d’Internet ont provoqué de subtils changements dans tout cela. Un nombre considérable de personnes pensent que tôt ou tard, les données et les logiciels informatiques passeront du bureau à Internet. En d’autres termes, les ordinateurs du futur pourraient abandonner les disques durs encombrants et obtenir des données et des services directement à partir d’Internet. Je me souviens que lorsque j’étais à l’université, un professeur avait imaginé un tel scénario alors qu’il nous donnait un cours. , il n'y aura pas de logiciels et de programmes redondants sur le bureau de l'ordinateur, mais un seul IE. Même s'il semble que nous soyons encore loin de ce jour et qu'il reste encore de nombreux problèmes à résoudre, je pense que ce n'est pas un problème. un rêve, mais une réalité qui se réalisera tôt ou tard. Eh bien, le principal problème est que la connexion Internet est instable. Personne ne veut voir son ordinateur télécharger les données du serveur petit à petit. Alors, ajax résout-il ce problème ? En résolvant le problème, cela ne fait que masquer le problème. Il agit simplement comme un tampon entre le serveur et le client, faisant croire aux utilisateurs qu'il n'y a pas d'interruption de service. Pour être précis, ajax n'augmente pas la vitesse de téléchargement des données depuis le serveur, mais rend simplement l'attente moins frustrante. Mais cela a suffi à provoquer un impact et un choc énormes, et cela a en fait eu un impact énorme sur les logiciels de bureau. Je vais utiliser un exemple pour illustrer ce point : nous pouvons comparer Outlook Express et Gmail, un logiciel de bureau typique, et le second est un mode B/S implémenté par ajax. Gmail a presque les mêmes fonctionnalités qu'Outlook Express lors de l'envoi et de la réception d'e-mails, et ne nécessite pas l'installation d'un programme client. C'est l'une des principales raisons pour lesquelles Microsoft a si peur de l'impact d'Ajax et, dans une enquête menée il n'y a pas si longtemps, il considérait Google comme son principal concurrent au cours des dix prochaines années. Bien entendu, ce changement n’éliminera pas tous les logiciels de bureau. Aucun des navigateurs existants ne peut gérer des images complexes comme les programmes de bureau tels que PhotoShop. Mais nous ne pouvons ignorer son influence et son impact.

3. À propos du nom d'ajax

Le nom complet d'ajax est Asynchronous JavaScript et XML Parmi eux, Asynchrone signifie asynchrone, qui est différent de celui utilisé. de manière synchronisée dans le développement Web traditionnel.

4. À propos de la synchronisation et de l'asynchrone

La transmission asynchrone est une transmission orientée caractères, et son unité est le caractère tandis que la transmission synchrone est une transmission orientée bits, et son unité est la trame ; Lors de sa transmission, les horloges du récepteur et de l'expéditeur doivent être cohérentes.

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émarrage 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.

La transmission synchrone est généralement beaucoup plus rapide que la transmission asynchrone. 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.

Après avoir compris les concepts de synchronisation et d'asynchronisme, il devrait être plus clair pourquoi ajax peut améliorer l'expérience utilisateur. Il utilise des méthodes de requête asynchrones. Par exemple, si la communauté où se trouve votre maison est confrontée à une coupure d'eau en raison de certaines circonstances, les départements concernés ont maintenant annoncé deux plans : l'un consiste à couper complètement l'approvisionnement en eau pendant 8 heures ; La seconde est de ne pas couper complètement l'eau pendant 10 heures. Pendant ces 10 heures, l'eau n'est pas complètement coupée, mais le débit est beaucoup plus faible qu'avant. Après 10 heures, le débit normal sera donc rétabli. , quelle méthode choisiriez-vous si c'était vous ? Apparemment, c'est ce dernier.

5. 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.

6. 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 La forme de chaîne des données renvoyées par le processus serveur.
Objet de données de document compatible avec le DOMresponseXML renvoyé par le processus serveur.
statut Code numérique renvoyé par le serveur, tel que le commun 404 (introuvable) et 200 (prêt)
statut Texte accompagnant le status Informations sur la chaîne de code
readyState Valeur d'état de l'objet

0 (non initialisé) L'objet a été créé, mais n'a pas été initialisé (pourtant Appeler la méthode open)
1 (Initialisation) L'objet a été créé, mais la méthode d'envoi n'a pas encore été appelée
2 (Envoi de données) La méthode d'envoi a été appelée, mais l'état actuel et http l'en-tête est inconnu
3 (Les données sont en cours de transfert) Vous recevez déjà certaines données. Étant donné que la réponse et l'en-tête http sont incomplets, une erreur se produira lors de l'obtention d'une partie des données via ResponseBody et ResponseText. >　4 (Complet) Les données sont reçues. À l'heure actuelle, elles peuvent être obtenues via ResponseXml et ResponseText. Données de réponse complètes

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.

Comme indiqué ci-dessus, la fonction vérifie d'abord l'état global de XMLHttpRequest et s'assure qu'il est terminé (readyStatus=4), c'est-à-dire que 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.

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 Ustbwuyi() {

    var data = document.getElementById("username").value;
    CreateXmlHttp();
    if (!xmlhttp) {
        alert("创建xmlhttp对象异常！");
        return false;
    }

    xmlhttp.open("POST", url, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            document.getElementById("user1").innerHTML = "数据正在加载...";
            if (xmlhttp.status == 200) {
                document.write(xmlhttp.responseText);
            }
        }
    }
    xmlhttp.send();
}

Copier après la connexion

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.

7. 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 communique 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 disposez d'une capacité de réponse plus rapide.

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, pas besoin de télécharger des plug-ins ou de petits programmes.

8. Inconvénients d'ajax

Je vais maintenant me concentrer sur les défauts d'ajax, car la plupart d'entre nous prêtent généralement attention aux avantages qu'ajax nous apporte, tels ainsi que l'amélioration de l'expérience utilisateur. Les défauts causés par ajax ont été ignorés.

Les défauts d'ajax décrits ci-dessous en sont tous causés.

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, lorsque l'utilisateur clique à nouveau dans Google Maps, il recherche dans un IFRAME masqué, puis reflète les résultats de la recherche sur un élément Ajax pour restaurer l'état de l'application tel qu'il était à ce moment-là.)

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 sociétés 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 le navigateur mobile, celui-ci ne le prend actuellement pas en charge. Bien entendu, cette question n’a rien à voir avec nous.

9. 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, mais 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 leurs codes avec des outils 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.

10. Exemple Ajax

Vérifiez si le nom d'utilisateur est enregistré.

Utilisez deux méthodes

1 ajax.dll

2 Écrivez vous-même l'objet xmlhttprequest

10. Quelques erreurs courantes en ajax

1 Problème de configuration

Lors de la configuration de la page en pageload

11 La partie front-end est appelée dans la méthode d'appel en arrière-plan...

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!