AJAX n'est pas un nouveau langage de programmation, mais une nouvelle approche qui utilise les normes existantes. AJAX peut échanger des données avec le serveur sans recharger toute la page. Cette méthode d'interaction asynchrone permet aux utilisateurs d'obtenir de nouvelles données sans avoir à actualiser la page après avoir cliqué.
Objet XMLHTTPREQUEST
Le noyau d'Ajax est l'objet XMLHttpRequest (XHR). XHR fournit une interface pour envoyer des demandes au serveur et résoudre les réponses du serveur. Capacité à obtenir de nouvelles données du serveur de manière asynchrone.
Créer des objets dans le navigateur (supporter uniquement IE7 et plus):
var xhr = new xmlHttpRequest ();
Comment utiliser XHR
La première chose à introduire est la méthode ouverte (). Il reçoit 3 paramètres:
• Le type de demande à envoyer (publier, obtenir, etc.)
• URL demandée
• Valeur boléenne indiquant si la demande est envoyée de manière asynchrone
Appel Open () Exemple:
xhr.open ("get", "index.jsp", false);
Obtenez une demande d'index.jsp. L'URL est relative à la page actuelle où le code est exécuté; L'appel de la méthode Open () n'envoie pas réellement la demande, il démarre simplement une demande d'envoi.
Appelez Send () pour envoyer la demande:
xhr.send (null);
Send () reçoit un paramètre, c'est-à-dire les données à envoyer en tant que corps de demande. Si les données ne doivent pas être envoyées via le corps de la demande, NULL doit être transmis.
Les données correspondantes seront remplies des propriétés pertinentes de l'objet XHR:
• ResponseText: le texte est retourné comme corps de réponse
• Responsexml: le type de contenu en tant que réponse est "texte / xml" ou "application / xml"
• Statut: le statut HTTP de la réponse
• StateStext: Description du statut HTTP
Après avoir reçu la réponse, vérifiez d'abord l'attribut d'état et confirmez que la réponse est retournée, généralement 200 sont utilisés comme signe de succès. Le code d'état 304 indique que la ressource n'a pas été modifiée et que la version mise en cache du navigateur peut être utilisée directement.
Afin de recevoir une réponse appropriée, deux codes d'état doivent être détectés de la manière suivante:
xhr.open ("get", "index.jsp", false); xhr.send (null); if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.ResponSeText);} else {allertus ("requier a été unsecSful:" + xhr.En détectant la propriété ReadyState, la phase active actuelle du processus de demande / réponse peut être déterminée.
• 0: non initialisé. La méthode ouverte () n'a pas été appelée
• 1: Démarrez. La méthode Open () a été appelée et la méthode Send () n'a pas été appelée.
• 2: Envoyer. La méthode Send () a été appelée, aucune réponse n'a été reçue
• 3: recevoir. Certaines données ont été reçues
• 4: terminé. Toutes les données ont été reçues et peuvent être utilisées du côté client
Lorsque la valeur de la propriété ReadyState change, un événement ReadyStateChange sera déclenché. Pour garantir la compatibilité du navigateur, spécifiez le gestionnaire d'événements OnReadyStateChange avant d'appeler Open ().
var xhr = new xmlhttprequest (); xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) réussi: "+ xhr.status);}}}; xhr.open (" get "," index.jsp ", true); xhr.send (null);La demande asynchrone peut être annulée avant de recevoir la réponse:
xhr.abort ();
Informations d'en-tête HTTP
Les objets XHR fournissent des méthodes pour manipuler les en-têtes de demande et répondre aux informations de l'en-tête.
Par défaut, lors de l'envoi d'une demande XHR, les informations d'en-tête suivantes seront également envoyées.
• Accepter: le type de contenu que le navigateur peut gérer
• Accept-Charset: le jeu de caractères que le navigateur peut afficher
• Accept-codage: codage comprimé que le navigateur peut gérer
• Accept-Language: la langue actuellement définie par le navigateur
• Connexion: le type de connexion entre le navigateur et le serveur
• Cookie: tous les cookies définis sur la page actuelle
• Hôte: le domaine où la page où la demande a été émise est située
• référente: URL de la page qui a publié la demande
• User-Aent: la chaîne d'agent utilisateur du navigateur
Utilisez setRequestHeader () pour définir les informations d'en-tête de demande personnalisées. Vous devez appeler la méthode Open () après l'appeler et avant d'appeler Send ()
setRequestHeader ():
xhr.open ("get", "index.jsp", true); xhr.setRequestHeader ("myHeader", "myvalue"); xhr.send (null);Appelez GetResponseHeader () et passez dans le nom du champ pour obtenir les informations d'en-tête de réponse correspondantes. getAllResponseHeader () obtient une longue chaîne contenant toutes les informations d'en-tête.
var myHeader = xhr.getResponseHeader ("MyHeader"); var allheders = xhr.getAllResponseHeader ();Faire une demande
Get est utilisé pour interroger le serveur pour certaines informations. Vous pouvez ajouter les paramètres de chaîne de requête à la fin de l'URL. Le nom et la valeur de chaque paramètre dans la chaîne de requête doivent être codés à l'aide d'encodeuriComponent ():
xhr.open ("get", "login.jsp? name1 = value1 & name2 = value2", false); addUrlparam () reçoit trois paramètres: l'URL du paramètre à ajouter, le nom du paramètre et la valeur du paramètre. var url = "login.jsp"; // ajouter le paramètre url = addUrlparam (url, "nom d'utilisateur", "xxyh"); url = addurlparam (url, "mot de passe", "xxyh123"); // initialiser la demande xhr.open ("get", url, false);Demande de poste
La demande de poste est utilisée pour envoyer des données au serveur qui doit être enregistrée. Le corps d'une demande post peut contenir de nombreuses données et le format est illimité.
Demande d'initialisation:
xhr.open ("post", "login.jsp", true); Définissez d'abord les informations d'en-tête de type contenu sur application / x-www-form-urlencoced, puis créez un format de chaîne. Si vous devez sérialiser les données de formulaire dans la page, puis l'envoyer au serveur via XHR, vous pouvez utiliser la fonction Serialize () pour créer cette chaîne: xhr.open ("get", "login.jsp", false); xhr.setRequestHener ("contenu-type", "application / x-ww-Form-urLenced"); var form form = document.getElementById ("User-Info"); xhr.Send (serialize (form));Ce qui précède est la compréhension approfondie de l'Ajax dans JavaScript qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!