Comment implémenter la mise à jour asynchrone des pages Web avec Ajax

Cette fois, je vais vous montrer comment Ajax implémente la mise à jour asynchrone des pages Web. Quelles sont les précautions pour qu'Ajax implémente la mise à jour asynchrone des pages Web. Voici des cas pratiques, jetons un coup d'œil.

1 : Le concept d'ajax

Nom complet : Javascript asynchrone et Xml

AJAX n'est pas un nouveau langage de programmation, mais un Créer plus rapidement, une technologie d'application WEB meilleure et plus interactive, appliquée vers 1998. Grâce à AJAX, votre JS peut communiquer directement avec le serveur via l'objet XMLHttpRequest de JS sans recharger la page. Cela permet au serveur de demander les données souhaitées au lieu de la page entière. Le cœur d'AJAX est l'objet XMLHttpRequest de JS. L'objet xhr a été introduit pour la première fois dans IE5 et est un objet qui prend en charge les requêtes asynchrones.

2 : Avantages de l'ajax

Mettre à jour les données sans actualiser.

Communiquez avec le serveur de manière asynchrone.

Largement pris en charge sur la base des normes.

Séparation du front-end et du back-end.

Économisez de la bande passante.

3 : Étapes d'écriture

1. Créez un objet XMLHttpRequest.

Tous les navigateurs modernes (IE7+, chrome, firefox, opera, safari) ont des objets XMLHttpRequest intégrés. Mais IE5 et 6 utilisent ActiveXObject object.

function getAjax() {
var  xmlhttp = null;
if(window.ActiveXObject){
         xmlhttp = new ActiveXObject(’Microsoft.XMLHTTP’);
} else if(window.XMLHttpRequest){
         xmlhttp = new XMLHttpRequest();
}
return  xmlhttp;
}

2. Ouvrez la connexion avec le serveur et spécifiez la méthode d'envoi, l'URL, les autorisations, etc.

méthode ouverte : créez une nouvelle requête HTTP et spécifiez la méthode, l'URL et les informations de vérification de cette requête.

xhr.open(type, url, async, user, password);

type : méthode de requête HTTP, GET, POST, etc. Insensibilité à la casse.

url : adresse de la demande.

async : Booléen, indique si la requête est asynchrone. La valeur par défaut est vraie. Si c'est vrai, la fonction de rappel spécifiée par l'attribut onreadystatechange sera appelée lorsque l'état change. (Facultatif)

utilisateur : si le serveur nécessite une vérification, spécifiez le nom d'utilisateur ici. S'il n'est pas spécifié, une fenêtre de vérification apparaîtra lorsque le serveur nécessitera une vérification. (Rare utilisé, seulement compris)

mot de passe : La partie mot de passe des informations de vérification. Si le nom d'utilisateur est vide, cette valeur sera ignorée. (Utilisez moins, comprenez simplement)

Remarque :

En AJAX, nous simulons en fait les données normales de soumission de formulaire. Un formulaire normal enverra le champ Content-Type lors de la publication des données, nous devons donc spécifier la valeur de ce champ comme application/x-www-form-urlencoded en AJAX. Et les noms et valeurs des champs sont codés et envoyés. Utilisez setRequestHeader : spécifiez individuellement un certain en-tête HTTP de la requête.

Remarque : les données doivent être codées à l'aide de la fonction encodeURIComponent().

3. Envoyer les instructions.

send() : Envoyez une requête au serveur HTTP et recevez une réponse.

Le mode synchrone ou asynchrone de cette méthode dépend du paramètre async dans la méthode open. Si async est vrai, cette méthode retournera immédiatement. Si elle est fausse, cette méthode attendra que la requête se termine ou. délai d'attente avant de revenir.

xhr.send(body);

body : Les données envoyées via cette requête. Définissez simplement la requête GET sur null.

4. Attendez et recevez les résultats du traitement renvoyés par le serveur.

5. Réception du client.

6. Libérez l'objet XMLHttpRequest.

4 : Fonction de rappel

Spécifiez la fonction de rappel de traitement des événements lorsque l'attribut readystate change via l'attribut onreadystatechange.

xhr.onreadystatechange = function(){}

attribut readyState : renvoie l'état actuel de la requête.

Statut :

0 : L'objet a été créé et n'a pas été initialisé (la méthode open n'a pas été appelée).

1 : L'objet a été créé et la méthode d'envoi n'a pas encore été appelée.

2 : La méthode d'envoi a été appelée. Mais l'état actuel et l'état HTTP sont inconnus.

3 : Commencez à recevoir des données. Étant donné que la réponse et l'en-tête HTTP sont incomplets, des erreurs se produiront lors de l'obtention de certaines données via ResponseBody et ResponseText.

4 : La réception des données est terminée. À ce stade, les données de réponse complètes peuvent être obtenues via ResponseBody et ResponseText.

attribut status : renvoie le code d'état de la requête en cours.

200 OK : Le document demandé a été trouvé et restitué correctement.

304 Non modifié : disposez d'une copie en cache locale du même contenu côté serveur.

403 Interdit : Le demandeur ne dispose pas des autorisations correspondantes pour le document demandé.

404 Not Found : Le document demandé n’a pas été trouvé.

Attribut statusText : renvoie les informations de la ligne de réponse de la requête en cours.

AttributresponseXML : formatez les informations de réponse en tant qu'objet Document XML et renvoyez-les.

AttributresponseText : renvoie les informations de réponse sous forme de chaîne.

5 : JS analysant JSON

Introduction JSON : (mentionné dans l'article js)

Définition : Javascript Object Notation, un format d'échange de données léger basé sur du texte est facile pour les humains à lire et à écrire, et peut également augmenter les taux de transmission du réseau.

Deux nouvelles méthodes ajoutées dans ES5 :

JSON.parse : convertissez les données de chaîne JSON en objets JSON.

JSON.stringify : Convertit un objet JSON en chaîne JSON.

Remarque : 1. Prise en charge du navigateur : IE8+.

2. La clé ou la valeur de chaîne dans la chaîne au format JSON doit être placée entre guillemets doubles.

6 : Actualisation partielle des données

Manipuler le nœud DOM correspondant (comme l'effet de pagination de la Liste des commentaires)

7 : Application de la délégation d'événements

Délégation d'événements : utilisez le mécanisme de bouillonnement pour déléguer les événements de l'élément enfant à l'élément parent pour exécution (par exemple, certains sites Web d'actualités suppriment les actualités que certains utilisateurs n'aiment pas)

8 : Séparation des front-end et back-end

Le backend est uniquement responsable de la sortie des données et du traitement de la logique métier, tandis que le frontend est responsable de la logique interactive et de l'affichage de l'interface. Pour faire simple : il n'y a pas de code de programme en arrière-plan dans la page statique frontale et l'arrière-plan génère des données sans balises HTML.

La séparation front-end et back-end s'appuie sur ajax pour réaliser l'interaction des données. (La séparation spécifique de l'empaquetage des fonctions est donnée dans la démo)

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture connexe :

Comment résoudre le problème d'affichage anormal après que layer.photos() modifie de manière asynchrone l'adresse de l'image

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!