Ajax est l'abréviation de JavaScript asynchrone et XML, et est un mécanisme pour mettre à jour une certaine partie de la page. Il vous donne le pouvoir de mettre à jour une partie de la page après avoir obtenu les données du serveur, évitant ainsi de rafraîchir la page entière. De plus, la réalisation des mises à jour des pages locales de cette manière peut non seulement créer une expérience utilisateur fluide, mais également réduire la charge sur le serveur.
Voici une analyse d'une demande de base AJAX:
var xhr = new xmlhttprequest (); xhr.open ('get', 'send-ajax-data.php'); xhr.send (null);Ici, nous créons une instance d'une classe qui peut faire des demandes HTTP au serveur. Sa méthode ouverte est ensuite appelée, où le premier paramètre est la méthode de demande HTTP et le deuxième paramètre est l'URL de la page de demande. Enfin, nous appelons la méthode d'envoi avec le paramètre NULL. Si vous utilisez la méthode de la demande de post (nous utilisons Get ici), les paramètres de la méthode d'envoi doivent contenir toutes les données que vous souhaitez envoyer.
Voici comment nous gérons la réponse du serveur:
xhr.OnreadyStateChange = function () {var Done = 4; // ReadyState 4 signifie que la demande a été envoyée au serveur var ok = 200; // Statut 200 signifie que le serveur renvoie avec succès if (xhr.readystate === DID) {if (xhr.status === OK) {console.log (xhr.ResponSeText); // Ceci est le texte renvoyé} else {console.log ("Erreur:" + xhr.status); // L'erreur s'est produite dans cette demande}}}OnReadystateChange est asynchrone, ce qui signifie qu'il sera appelé à tout moment. Ce type de fonction est appelé une fonction de rappel - une fois un traitement terminé, il est appelé. Dans ce cas, ce traitement se produit sur le serveur.
Exemple
La méthode pratique de l'Ajax est également la raison pour laquelle de nombreuses personnes comptent sur jQuery, mais en fait, l'API AJAX de JavaScript natif est également très puissant, et l'utilisation de base n'est pas très différente dans chaque navigateur. Par conséquent, vous pouvez encapsuler complètement un objet Ajax par vous-même. Ce qui suit est l'objet Ajax encapsulé:
// méthode ajax // Lazy Load Create Xhr Object Fonction CreateExhr () {if ('xmlHttpRequest' dans Window) {createExhr = function () {return new XmlHttpRequest (); }; } else if ('activexObject' dans Window) {createExhr = function () {return new activeXObject ("msxml2.xmlhttp"); }; } else {createExhr = function () {throw new error ("ajax n'est pas pris en charge par ce navigateur"); }; } return CreenExhr (); } // ajax exécute la demande de fonction (ajaxdata) {var xhr = createExhr (); ajaxdata.before && ajaxdata.before (); // Gérer les demandes asynchrones via les événements xhr.onreadystateChange = function () {if (xhr.readystate == 4) {if (xhr.status == 200) {if (ajaxdata.datatype == 'json') {// obtient l'objet JSON renvoyé par le serveur jsonstr = xhr.ResponSext; JSON1 = EVAL ('(' + jsonstr + ')'), JSON2 = (nouvelle fonction ('return' + jsonstr)) (); ajaxdata.callback (JSON2); // ajaxdata.callback (JSON.Parse (xhr.ResponSeText)); // Méthode native, non prise en charge dans IE6 / 7} else ajaxdata.callback (xhr.ResponSeText); } else {ajaxdata.error && ajaxdata.error (xhr.ResponSeText); }}}; // Définir les paramètres de demande xhr.open (ajaxdata.type, ajaxdata.url); if (ajaxdata.nocache == true) xhr.setRequestHeader ('ifodified-suce', '0'); if (ajaxdata.data) {xhr.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded'); xhr.send (ajaxdata.data); } autre {? ? xhr.setRequestHeader («x-requis avec», «xmlhttprequest»); xhr.send (null); } return xhr;} function post (ajaxdata) {ajaxdata.type = 'post'; var _Result = request (ajaxdata); return _Result;} function get (ajaxdata) {ajaxdata.type = 'get'; ajaxdata.data = null; var _Result = request (ajaxdata); retour _Result;}Voici un exemple d'utilisation:
index.html
<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <title> Implémentation native javascript ajax </ title> <link rel = "Stylesheet" type = "text / css" media = "all" href = "./ commun / commune. Font-Family: 'Lucida Grande', 'Microsoft Yahei'} #Content .BTN_CTR {Display: Block; Largeur: 120px; hauteur: 30px; marge: 0 auto 20px; Contexte: # 53A7BB; Couleur: #FFF; Police-poids: Bold; taille de police: 14px; hauteur de ligne: 30px; Décoration du texte: aucune; Border-Radius: 4px; } #test {width: 280px; hauteur: 130px; marge: 0 auto; rembourrage: 15px; Contexte: #FFF; Border-Radius: 4px; Texte-aligne: gauche; } </ style> </ head> <body> <div id = "en-tête"> <div id = "header-content"> <div id = "header-side"> <p> <a href = "http://kayosite.com/css3-animation.html" cible = "_ Blank"> Back to Article </a> </p> <p> <a href = "http://kayosite.com" Target = "_ Blank"> Mon blog </a> </p> <p> Demo by kayo © Copyright 2011-2013 </p> </div> <h1> css3 Animation </h1> </div> </v> <div id = "Content"> <a href = "javascript:;"; onclick = "get ({url: './ajax.html', rappel: function (out) {document.getElementById ('test'). innerHtml = out;}})"> ajax get contenu </a> <div id = "test"> </v> </v> <prit> // Ajax Method, pas indiqué de manière répétée répétée avec répétition à répétition Ici </cript> </ body> </html> ajax.html<! Doctype html> <html lang = "zh-cn"> <éadf> <meta charset = "utf-8"> <itle> ajax </ title> </ head> <pody> <p> obtenu avec succès ce texte </p> </ body> </html>
Pour des effets spécifiques, vous pouvez parcourir la démo complète.