AJAX: un moyen de demander des données sans rafraîchir toute la page;
Le noyau technique d'Ajax est l'objet XMLHttpRequest;
Processus de demande AJAX: Créez un objet XMLHTTPRequest, connectez-vous au serveur, envoyez des demandes et recevez des données de réponse;
/ ** * Obtenez un objet ajax * / fonction getajaxhttp () {var xmlhttp; essayez {// chrome, firefox, opera 8.0+, safari xmlhttp = new xmlhttprequest (); } catch (e) {// Internet Explorer essaie {// ie5, 6 xmlhttp = new activeXObject ("msxml2.xmlhttp"); } catch (e) {try {// ie7 ou supérieur xmlhttp = new activeXObject ("Microsoft.xmlhttp"); } catch (e) {alert ("Votre navigateur ne prend pas en charge ajax!"); retourne false; }}} return xmlhttp;} / ** * Envoyer une demande ajax * url - url * méthodeType (post / get) * con (true (asynchrone) | false (synchrone)) * paramètre (paramètre) * fonctionname (nom de la méthode de rappel, aucune citation n'est requise, elle est appelée unique L'autre est l'objet à traiter) * obj doit aller à l'objet à traiter dans la méthode de rappel * / fonction ajaxRequest (url, methodtype, con, paramètre, functionname, obj) {var xmlhttp = getajaxhttp (); xmlhttp.onReadyStateChange = function () {// ReadyState Value Description // 0, Initialisation, l'objet XHR a été créé, l'ouverture n'a pas encore été exécutée // 1, le chargement, la méthode ouverte a été appelée, mais la demande n'a pas encore été envoyée // 2 requête ou URL trouvée // 500: le serveur génère une erreur interne if (xmlhttp.readystate == 4 && xhr.status == 200) {// La réponse http a été entièrement reçue avant d'appeler functionname (xmlhttp, obj); }}; xmlhttp.open (méthodeType, URL, con); xmlhttp.send (paramètre);} // Il s'agit de la fonction de paramètre createExml () {var xml = "<user> <DeurId> Asdfasdfasdf <// userrid> </serving>"; // "//" Ce n'est pas Capital V mais la fuite gauche est la slash gauche et le return droit xml; JSON = {id: 0, nom d'utilisateur: "bonne personne"}; return json;} fonction c () {alert ("");}//test
ajaxRequest ("http://www.baidu.com", "post", true, createExml (), c, document);Regardons un autre exemple
ajax ({URL: "./testxhr.aspx", // Type d'adresse de demande: "Post", // Données de méthode de demande: {nom: "Super", âge: 20}, // Demande de dataType de paramètre: "JSON", fonction: fonction (statut) {// code exécuté après le placement de défaillance}); fonction ajax (options) {options = options || {}; options.type = (options.Type || "get"). ToupperCase (); options.datatype = options.datatype || "JSON"; var params = formatParams (options.data); // Create - non Ie6 - Étape 1 if (window.xmlHttpRequest) {var xhr = new XmlHttpRequest (); } else {// ie6 et sous les navigateurs var xhr = new activeXObject ('Microsoft.xmlhttp'); } // reçoit - étape 3 xhr.onreadystateChange = function () {if (xhr.readystate == 4) {var status = xhr.status; if (status> = 200 && status <300) {options.success && options.success (xhr.ResponSeText, xhr.Responsexml); } else {options.fail && options.fail (status); }}} // connecter et envoyer - étape 2 if (options.type == "get") {xhr.open ("get", options.url + "?" + Params, true); xhr.send (null); } else if (options.type == "post") {xhr.open ("post", options.Url, true); // Définissez le type de contenu lors de la soumission du formulaire xhr.setRequestHeader ("Content-Type", "Application / X-WWW-Form-Urlencoded"); xhr.send (params); }} // Format Fonction Paramètre FormatParams (données) {var arr = []; for (var name in data) {arr.push (encodeuRIComponent (name) + "=" + EncodeuRIComponent (data [name])); } arr.push (("v =" + math.random ()). remplacer (".", ")); return arr.join (" & ");}Jetons un coup d'œil au principe
1. Créer
1.1. Les versions IE7 et ci-dessus prennent en charge les objets XHR natifs, vous pouvez donc l'utiliser directement: var oajax = new xmlHttpRequest ();
1.2. Dans IE6 et ses versions précédentes, l'objet XHR est implémenté via un objet ActiveX dans la bibliothèque MSXML. Certains livres ont affiné trois versions différentes de ces objets dans IE, à savoir msxml2.xmlhttp, msxml2.xmlhttp.3.0 et msxml2.xmlhttp.6.0; Je pense que c'est trop gênant, donc je peux utiliser directement l'instruction suivante pour le créer: var oajax = new activeXObject ('Microsoft.xmlhttp');
2. Connectez et envoyez
2.1. Trois paramètres de la fonction ouverte (): la méthode de la demande, l'adresse de demande et s'il faut demander de manière asynchrone (il y a très peu de demandes synchrones et n'ont pas encore été utilisées);
2.2. La méthode Get Request consiste à soumettre des données au serveur via des paramètres URL, tandis que le post soumet des données au serveur en tant que paramètre d'envoi;
2.3. Dans une demande de poste, avant d'envoyer des données, le type de contenu du formulaire soumis doit être défini;
2.4. Les paramètres soumis au serveur doivent être codés par la méthode EncodeuRIComponent (). En fait, sous la forme de la liste des paramètres "key = valeur", la clé et la valeur doivent être codées car elles contiendront des caractères spéciaux. Chaque fois que vous demandez, une chaîne de "v = xx" sera orthographiée dans la liste des paramètres. Il s'agit de rejeter le cache, et chaque fois que vous le demandez directement au serveur.
Encodeuri (): Utilisé pour coder tout l'URI, et ne codera pas des caractères spéciaux qui appartiennent à l'URI, tels que des colons, des barres obligées, des marques d'interrogation et des signes de livre; sa fonction de décodage de décodage correspondante ();
EncodeuRIComponent (): est utilisé pour coder une partie de l'URI et coder tous les caractères non standard qu'il trouve; sa fonction de décodage correspondante de décodeuriComponent ();
3. Recevoir
3.1. Après avoir reçu la réponse, les données de réponse seront automatiquement remplies de l'objet XHR. Les attributs pertinents sont les suivants
ResponseText: le contenu corporel renvoyé par la réponse, du type de chaîne;
ResponseXml: Si le type de contenu de la réponse est "texte / xml" ou "application / xml", les données XML correspondantes seront stockées dans cette propriété, qui est le type de document correspondant à XML;
Statut: le code d'état HTTP de réponse;
StateStext: Description de l'état HTTP;
3.2. La propriété ReadyState de l'objet XHR représente l'étape active actuelle du processus de demande / réponse. La valeur de cette propriété est la suivante
0-ininitialisée, la méthode Open () n'a pas encore été appelée;
La méthode 1-start, open () est appelée, Send () n'est pas appelé;
2 sens, la méthode Send () a été appelée et aucune réponse n'a été reçue;
3 réceptions, une partie des données de réponse a été reçue;
4-Complete, toutes les données de réponse ont été reçues;
Tant que la valeur des modifications ReadyState, l'événement ReadyStateChange sera appelé (en fait, pour une douceur logique, vous pouvez mettre ReadyStateChange après l'envoi, car le serveur est demandé pendant l'envoi, et la communication réseau sera effectuée, ce qui prend du temps. Il est également correct de spécifier la standardisage et de compatibilité croissante.
3.3. Dans l'événement ReadyStateChange, déterminez d'abord si la réponse est reçue, puis déterminez si le serveur gère la demande avec succès. xhr.status est le code d'état. Le code d'état commence par 2 et tous réussissent. 304 signifie sortir du cache. Le code ci-dessus ajoute un nombre aléatoire à chaque fois que la demande est demandée, de sorte que la valeur du cache n'a pas besoin d'être jugée.
4. Les demandes d'Ajax ne peuvent pas être du domaine croisé!