1. Ajax (Asynchrone JavaScript + XML) peut demander des données supplémentaires comme le serveur sans désinstaller la page, c'est-à-dire la technologie de rafraîchissement locale
2. Créez un objet XHR
fonction createExhr () {if (typeof xmlHttpRequest! = "Undefined") {return new XmlHttpRequest (); } else if (typeof activeXObject! = "Undefined") {// <ie7 if (typeof arguments.callee.activexstring! = "string") {var version = ["msxml2.xmlhttp.6.0", "msxml2.xmlhttp.3.0", "msxml2.xmlhttp" for (i = 0, len = version.length; i <len; i ++) {try {new activeXObject (version [i]); arguments.callee.activexString = version [i]; casser; } catch (ex) {}}} return new activeXObject (arguments.callee.activexString); } else {lance une nouvelle erreur ("pas de support pour xhr"); }} var xhr = createExhr (); alerte (xhr); // [objet xmlhttprequest]3. Remarque d'utilisation: tous les exemples de cette section sont appliqués au côté serveur
1. Appelez la méthode Open (). Il accepte 3 paramètres: le type de demande à envoyer ("Get", "Post", etc.), l'URL de la demande et la valeur booléenne indiquant si la demande est envoyée de manière asynchrone.
2. Pour envoyer une demande, appelez la méthode Send () et acceptez un paramètre, c'est-à-dire qu'il doit faire l'objet de la demande. null si ce n'est pas nécessaire
3. Les données retournées seront automatiquement remplies dans les propriétés de l'objet XHR.
var xhr = createExhr (); // Ouvrez le fichier example.txt dans Get Synchronely // Synchronisation: le code JavaScript attendra que le serveur réponde et exécute xhr.open ("get", "example.txt", false); xhr.send (null); // Le statut représente le statut http de la réponse // 200 Représente OK, 304 représente le cache if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.ResponsEtExt); // Renvoie le texte de la réponse, 123456} else {alert ("La demande n'a pas réussi:" + xhr.status); }4.Example.Text Le contenu du fichier est une chaîne: 123456
4. Bien sûr, il n'y aura aucun problème avec la méthode de synchronisation utilisée dans le processus précédent. Nous devons défier une méthode asynchrone.
var xhr = createExhr ();// xhr.readystate représente l'état actuel de la demande / réponse, et 4 représente que toutes les données de réponse ont été acceptées // en plus, tant que la valeur de Xhr.readyState change, l'événement xhr.onreadystatechange déclenchera xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if (xhr && xhr.status <300) || xhr.status == 304) {alert (xhr.ResponseText); } else {alert ("La demande a échoué:" + xhr.status); }}}; xhr.open ("get", "example.txt", true); xhr.send (null);
5. Chaque demande et réponse HTTP disposera d'informations d'en-tête correspondantes.
1. Par défaut, lors de l'envoi d'une demande XHR, les informations d'en-tête suivantes seront également envoyées.
①Accept: le type de contenu que le navigateur peut gérer.
②Accept-Charset: le jeu de caractères que le navigateur peut afficher.
③Cocodage de l'acceptation: codage comprimé que le navigateur peut gérer.
④Accept-Language: la langue actuellement définie par le navigateur.
⑤Connection: le type de connexion entre le navigateur et le serveur.
⑥CooKies: tous les cookies définis sur la page actuelle.
⑦host: le domaine où se trouve la page où la demande est émise.
⑧Referer: URI de la page qui a publié la demande.
⑨User-Agent: la chaîne d'agent utilisateur du navigateur.
2. Utilisez la méthode setRequestHeader () pour définir les informations d'en-tête de demande personnalisées. Acceptez deux paramètres: le nom du champ d'en-tête et la valeur du champ d'en-tête
var xhr = createExhr (); // xhr.readystate représente l'état actuel de la demande / réponse, et 4 représente que toutes les données de réponse ont été acceptées // en plus, tant que la valeur de Xhr.readyState change, l'événement xhr.onreadystatechange déclenchera xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if (xhr && xhr.status <300) || xhr.status == 304) {alert (xhr.ResponseText); } else {alert ("La demande a échoué:" + xhr.status); }}}; xhr.open ("get", "example.txt", true); // xhr.setRequestHeader ("name", "zhang"); // le "nom" accepté peut être vu dans le http d'exemple.txt: "zhang" xhr.send (null);3. Obtenez les informations de l'en-tête de demande et les informations correspondantes, appelez la méthode GetResponseHeader () getAllResponseHeaders ()
var xhr = createExhr (); // xhr.readystate représente l'état actuel de la demande / réponse, et 4 représente que toutes les données de réponse ont été acceptées // en plus, tant que la valeur de Xhr.readyState change, l'événement xhr.onreadystatechange déclenchera xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if (xhr && xhr.status <300) || xhr.status == 304) {// Obtenez le type de contenu de l'en-tête de réponse Var Connection = Xhr.getResponseHeader ("Content-Type"); // alerte (connexion); // text / plain // obtenez toutes les informations de réponse var all = xhr.getAllResponseHeaders (); alerte (tout); } else {alert ("La demande a échoué:" + xhr.status); }}}}; xhr.open ("get", "example.txt", true); xhr.send (null);6. Obtenez la demande. Nous avons déjà discuté de la méthode de GET DEMAND. Maintenant, développez-le et ajoutons quelques paramètres à la demande GET.
/ ** URL: URL sans demande de demande: Valeur de clé de demande: Valeur de la demande Retour: URL avec la chaîne de demande * / fonction addUrlParam (url, nom, valeur) {url + = (url.indexof ("?") == -1? "?": "&"); url + = encodeuRIComponent (name) + "=" + encodeuRICPORANT (valeur); URL de retour; } var xhr = createExhr (); xhr.OnreadyStateChange = function () {if (xhr.readystate == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.ResponSext); } else {alert ("La demande a échoué:" + xhr.status); }}}}; var url = "example.txt"; url = addurlparam (url, "nom", "zhang"); url = addurlparam (url, "âge", "23"); // L'URL demandée devient: Exemple.txt? Name = zhang & age = 23 xhr.open ("get", url, true); xhr.send (null);7. Demande de poste
1. Analyse de cas: Ensuite, discutons de l'application AJAX qui envoie des demandes dans la méthode Post, c'est-à-dire l'enregistrement des utilisateurs, et l'invite sera renvoyée en fonction de votre nom d'utilisateur enregistré.
2. Étapes de mise en œuvre
1) Tout d'abord, il doit y avoir une page enregistrée (bien sûr, c'est très simple ici) ajax.html
<! Doctype html> <html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8"> <it titre> Document inédite </ title> <style> </ style> </ head> <body> <form name = "MyForm" méthode = "post"> name: <put-type = "Text =" user " id = "userLabel"> Veuillez saisir le nom d'utilisateur </ laboratoire> <br/> mot de passe: <input type = "mot de passe" name = "mot de passe" /> <br/> <input type = "soumi" valut = "login" /> <br/> </ form> <script src = "eventUtil.js"> </cript> <script src = "sérialize.js"> </ script> </ script> src = "ajax.js"> </ script> <script src = "ajaxdo.js"> </ script> <script src = "ajaxdo.js"> </ script> </ body> </html>
2) Ensuite, bien sûr, la partie javascript
①EventUtil.js, voici juste une liste des pièces d'écoute d'événement
var eventUtil = {addEvent: function (élément, type, handler) {if (element.addeventListener) {element.addeventListener (type, handler, false); } else if (element.attachevent) {element.Attachevent ("on" + type, manageur); }}}}②serialize.js: Sérialisation de formulaire
fonction serialize (form) {var parties = [], field = null, i, len, j, optlen, option, optValue; for (i = 0, len = form.elements.length; i <len; i ++) {field = form.elements [i]; switch (field.type) {case "select-one": case "select-multiple": if (field.name.length) {for (j = 0, optlen = field.options.length; j <optlen; j ++) {option = champ.options [j]; if (option.selected) {optValue = ""; if (option.hasAttribute) {optValue = (option.hasattribute ("valeur")? Option.Value: option.Text); } else {optValue = (option.attributes ["Value"]. Spécifié? Option.Value: Option.Text); } part.push (encodeuRIComponent (field.name) + "=" + EncodeuRIComponent (optValue)); } } } casser; Case Undefined: // Field Set Case "Fichier": // Fichier Entrée Case "Soumettre": // Soumettre le case du bouton "Réinitialiser": // Réinitialiser le case du bouton "Button": // Break de bouton personnalisé; case "radio": // case du bouton de radio "coche": // checkbox if (! field.checked) {break; }! }}} return Parts.Join ("&"); }③ajax.js est la fonction createExhr () ci-dessus, et il ne sera pas répertorié ici.
④ajaxdo.js, le fichier central, est la partie opérationnelle de notre nom, qui est écrit au hasard.
var form = document.forms [0]; // Get Form var Username = form.Elements ['Username']; // username var userLabel = document.QuerySelector ("# userLabel"); // invite tag eventUtil.addevent (nom d'utilisateur, "blur", function () {var xhr = createExhr (); xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) Xhr.ResponSEXT; userLabel.Firstchild.data = "Désolé, cet utilisateur existe déjà";}} else {alert ("La demande a été inscrit:" + xhr.status); "Application / X-WWW-Form-Urlencomed");3. Partie d'amélioration: tout le monde l'a vu. Lorsque nous avons soumis le formulaire tout à l'heure, nous avons sérialisé le formulaire. Le type FormData est défini pour cela au niveau 2 XMLHTTPRequest, qui sérialisera automatiquement le formulaire pour nous et nous n'avons pas besoin de l'écrire nous-mêmes.
Nous ne déplaçons qu'une partie du code
// ... le code omis ici est conforme à la demande // de la demande de post xhr.open ("Post", "dome.php", true); // il faut seulement être modifié ici pour remplacer la fonction précédente xhr.send (new FormData (formulaire));8. Autres parties (comprendre parce que la compatibilité ne suffit pas)
1. Réglage du délai d'expiration
xhr.open ("get", "example.txt", true); xhr.Timeout = 1000; // Définit le délai d'expiration sur 1 seconde (uniquement pour ie8 +) xhr.ontimeout = function () {alert ("La demande n'est pas revenu dans une seconde."); }; xhr.send (null);2. Méthode OverRidemiMetype (), le type renvoyé par le serveur
var xhr = createExhr (); xhr.open ("get", "example.txt", true); xhr.OverridemiMetype ("text / xml"); // Le précédent était le texte / plain xhr.send (null);3. Événements de progression
1. Téléchargez l'événement, déclenché tant que le navigateur reçoit les informations du serveur.
var xhr = createExhr (); xhr.onload = function () {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.ResponSext); } else {alert ("La demande a échoué:" + xhr.status); }}; xhr.open ("get", "example.txt", true); xhr.send (null);2. Événement de progression, périodiquement déclenché pendant le navigateur recevant de nouvelles données
var xhr = createExhr (); xhr.onprogress = fonction (événement) {var divStatus = document.getElementById ("Status"); // Calculez le pourcentage de données reçues de la réponse if (event.lengthcompotable) {divstatus.innerhtml = "reçu" + event.position + "de" + event.totalsize + "octets"; }}; xhr.open ("get", "altevents.php", true); xhr.send (null);Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.