Ajax et comment ça marche
Ajax est une technologie qui échange des données avec des serveurs sans pages Web rafraîchissantes. Il a d'abord été utilisé par Google dans Google Maps et a été rapidement populaire.
L'Ajax ne peut pas être un domaine croisé. Si vous avez besoin de intermousser, vous pouvez utiliser Document.Domain = 'A.com'; ou utilisez un proxy de serveur pour proxy le fichier xmlhttprequest.
AJAX est basé sur les normes Internet existantes et les utilise en combinaison:
Objet XMLHTTPREQUEST (échange de manière asynchrone des données avec le serveur)
JavaScript / DOM (affichage d'informations / interaction)
CSS (définir les styles de données)
XML (comme format de conversion de données)
Créer un objet XMLHttpRequest
Tous les navigateurs modernes (IE7 +, Firefox, Chrome, Safari et Opera) ont des objets XMLHTTPRequest intégrés.
Créer un objet Ajax:
// ie6 ou supérieur
var oajax = new xmlHttpRequest ();
// IE6
var oajax = new activeXObject ("Microsoft.xmlhttp")
Connectez-vous au serveur
oajax.open (méthode, URL, est-ce asynchrone)
Nous savons tous qu'Ajax, à savoir "JavaScript asynchrone et XML" (Asynchronous JavaScript et XML), fait référence à une technologie de développement Web qui crée des applications Web interactives. Par conséquent, Ajax est né pour travailler en mode asynchrone (asynchrone est vrai, faux synchrone)
Synchrone et asynchrone
La synchronisation fait référence à la méthode de communication dans laquelle l'expéditeur envoie des données et attend que le récepteur envoie une réponse avant d'envoyer le paquet de données suivant.
Asynchronous fait référence à la méthode de communication dans laquelle l'expéditeur envoie des données sans attendre que le récepteur envoie une réponse, puis envoie le paquet de données suivant.
(Pour le dire simplement: la synchronisation ne peut être fait qu'une chose une par une, tandis que l'asynchrone peut être fait plusieurs choses en même temps)
Envoyer la demande envoyée ()
La copie de code est la suivante:
<script type = "text / javascript">
fonction getDoc () {
var xmlhttp;
if (window.xmlhttprequest) {
xmlhttp = new xmlHttpRequest ();
}
autre{
xmlhttp = new activeXObject ("Microsoft.xmlhttp"); // pour ie6
}
xmlhttp.onreadystateChange = function () {
if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
document.getElementById ("myid"). innerHtml = xmlhttp.ResponSeText;
}
}
xmlhttp.open ("get", index.php, true);
xmlhttp.send ();
}
</cript>
</ head>
<body>
<Button Type = "Button" OnClick = "GetDoc ()"> Données de demande </fontières>
</docy>
Obtenir ou publier?
Par rapport au poste, Get est plus simple et plus rapide et est disponible dans la plupart des cas.
Cependant, utilisez la demande de poste dans les cas suivants:
Impossible d'utiliser des fichiers mis en cache (mettre à jour des fichiers ou des bases de données sur le serveur)
Envoyez de grandes quantités de données au serveur (Post n'a pas de limite de données)
La publication est plus stable et fiable que lors de l'envoi de la saisie des utilisateurs contenant des caractères inconnus
Recevoir des informations de retour
oajax.onreadystatechange = function () {// Le gestionnaire d'événements sera appelé lorsque l'état de demande change
alerte (oajax.readystate);
}
Chaque fois que la valeur de la propriété ReadyState change, un événement ReadyStateChange sera déclenché. Cet événement peut être utilisé pour détecter la valeur de ReadyState après chaque changement d'état. Habituellement, nous ne sommes intéressés que par l'étape où la valeur ReadyState est de 4, car toutes les données sont prêtes à l'heure actuelle, cependant, le gestionnaire d'événements OnreadyStateChange doit être spécifié avant d'appeler Open () pour assurer la compatibilité entre les navigateurs. Jetons un coup d'œil à un exemple:
La copie de code est la suivante:
var xhr = createExhr ();
xhr.onreadystateChange = function () {
if (xhr.readystate == 4) {
if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {
alert (xhr.statustext);
} autre {
alert ("La demande n'a pas réussi:" + xhr.status);
}
}
};
xhr.open ("get", "example.txt", true);
xhr.send (null);
Objets XHR
Lorsqu'un objet XHR envoie une demande HTTP au serveur, il passe par plusieurs états jusqu'à ce que la demande soit traitée, puis reçoit une réponse. ReadyState est la propriété d'état de la demande XHR, qui a elle-même 5 valeurs de propriété:
0 (non initialisé) La méthode ouverte () n'a pas encore été appelée
1 (charge) La méthode Send () a été appelée et la demande est envoyée
2 (le chargement est terminé) La méthode Send () a été terminée et tout le contenu de la réponse a été reçu
3 (Analyse) Le contenu de la réponse est analysé
4 (complet) L'analyse de contenu de réponse est terminée et peut être utilisée par le client.
statut
L'attribut d'état représente le code d'état de réponse renvoyé du serveur. Par exemple: 200 signifie succès, 404 signifie non trouvé.
En-tête à 1 mot: message. Ce type de code d'état signifie que la demande a été acceptée et doit être traitée.
Tête de 2 mots: succès. Ce type de code d'état signifie que la demande a été reçue avec succès, comprise et acceptée par le serveur.
En-tête de 3 mots: Redirection. Ce type de code d'état signifie que d'autres actions sont requises par le client pour terminer la demande.
En-tête à 4 caractères: erreur du client. Ce type de code d'état signifie que le client peut sembler avoir une erreur, ce qui entrave le traitement du serveur.
En-tête de 5 mots: erreur de serveur. Ce type de code d'état représente une erreur ou un état anormal s'est produit pendant le processus de traitement de la demande du serveur
Également joint: Explication détaillée du code d'état HTTP
statistique
StateStext est les informations de texte renvoyées dans la réponse et ne peuvent être utilisées que si la valeur ReadyState est 3 ou 4. Lorsque ReadyState est une autre valeur, la vue accède à la propriété Statustext lancera une exception.
Méthode XHR
| méthode | décrire |
|---|---|
| avorter() | Provoque l'annulation de la demande en cours d'exécution |
| getAllResponseHeaders () | Renvoie un seul caractère | chaîne contenant les noms et valeurs de tous les en-têtes de réponse |
| getResponseHeader (nom) | Renvoie le nom et la valeur spécifiés dans l'en-tête de réponse |
| Open (méthode, URL, async, nom d'utilisateur, PWD) | Définissez les méthodes HTTP (obtenir ou publier) etc. |
| Envoyer (contenu) | Présentez une demande avec le contenu du sujet spécifié |
| setRequestHeader (nom, valeur) | Définissez l'en-tête de demande avec le nom et la valeur spécifiés |
La copie de code est la suivante:
<script type = "text / javascript">
var oajax = oajax ();
alert (oajax.readystate); // "0" apparaît "
oajax.open ("get", "index.html", true);
alert (oajax.readystate); // "1" apparaît
oajax.send (null);
alert (oajax.readystate); // 4 apparaît sous IE, tandis que Firefox est 2
// Vous pouvez écouter à travers l'événement ReadyStateChange
oajax = xhr ();
oajax.onreadystatechange = function () {
alerte (oajax.readystate); // L'ordre sous Firefox est 1, 2, 3, 4, mais à la fin, il y en aura un autre 1
// sous IE, il est 1, 1, 3, 4
};
oajax.open ("get", "index.txt", true);
oajax.send (null);
</cript>