[Mozilla] Démarrage rapide Ajax

Cet article a été traduit de Mozilla Developer Network
Translator: Jin Yunlong
Adresse d'origine: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

Qu'est-ce que l'Ajax?

Ajax signifie JavaScript et XML asynchrones. En bref, c'est un langage de script qui utilise l'objet XMLHttpRequest pour communiquer avec le serveur. Il peut envoyer et recevoir des informations dans divers formats, notamment des fichiers JSON, XML, HTML et texte. La chose la plus intéressante à propos d'Ajax est sa fonctionnalité "asynchrone", ce qui signifie qu'Ajax peut communiquer avec le serveur sans actualiser la page. Vous permet de mettre à jour une partie du contenu de la page en fonction des événements utilisateur.

Deux caractéristiques qui peuvent être considérées:

• Envoyez une requête au serveur sans recharger la page.
• Recevez les données du serveur et traitez-les.

Étape 1: Comment envoyer une requête HTTP

Vous devez utiliser JavaScript pour envoyer une requête HTTP au serveur via XMLHttpRequest. Et Internet Explorer (IE) est introduit dans un ActiveXobjet XMLHTTP nommé qui implémente la XMLHttpRequestmême fonctionnalité, Mozilla, Safari et d'autres navigateurs sont utilisés XMLHttpRequest.

Si vous souhaitez être compatible avec différents navigateurs, vous pouvez le faire comme ceci:

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

Remarque : à des fins de démonstration, l'exemple XMLHTTP créé ci-dessus est un code simplifié. Pour un exemple plus réaliste, reportez-vous à la troisième étape de cet article.

Ensuite, lorsque la réponse côté serveur est reçue, l'objet de requête HTTP doit être informé d'utiliser les fonctions JavaScript pour traiter la réponse. La propriété de l' XMLHttpRequestobjet onreadystatechangeau nom de la fonction, lorsque la demande de changement d'état, la fonction est appelée.

httpRequest.onreadystatechange = nameOfTheFunction;

Remarque : Le nom de la fonction ne passe pas les parenthèses et les paramètres des paramètres, ce qui signifie que seule une référence à la fonction est allouée, au lieu d'appeler réellement la fonction. Bien entendu, une fonction anonyme peut également être définie dynamiquement afin que la réponse puisse être traitée en temps réel.

httpRequest.onreadystatechange = function(){
    // process the server response
};

Une fois la réponse du serveur traitée, nous pouvons appeler XMLHttpRequestl'objet open()et send()une méthode d'envoi d'une requête au serveur.

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);

• open()Le premier paramètre de la méthode: méthode de requête HTTP-GET, POST, HEAD et toute méthode prise en charge par le serveur. Gardez les majuscules selon la norme HTTP, sinon certains navigateurs (comme Firefox) pourraient ne pas être en mesure de traiter la demande. Pour plus d'informations sur les méthodes de requête HTTP, vous pouvez consulter la spécification W3C
• open()Le deuxième paramètre de la méthode: l'URL demandée. Pour des raisons de sécurité, le contenu de la page d'un domaine tiers ne peut pas être appelé. Lorsque vous appelez open()la méthode, assurez-vous de vérifier l'utilisation des pages dans le même nom de domaine, sinon elles obtiendront l'erreur «permission refusée». Une erreur courante consiste à utiliser domain.tld pour accéder à un site Web, mais à utiliser www.domain.tld pour demander une page. Si vous avez vraiment besoin d'envoyer une requête à un autre domaine, vous pouvez vérifier le contrôle d'accès HTTP
• open()Le troisième paramètre de la méthode: facultatif, qu'il s'agisse d'une requête asynchrone. Si c'est vrai (la valeur par défaut), cela signifie une demande asynchrone.

send()Le paramètre de méthode indique que lorsque la demande est POST, le contenu de données demandé est envoyé au serveur. Si le format de données du formulaire est envoyé, le serveur peut l'analyser comme une chaîne.

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

Le format de données envoyé au serveur peut également être JSON, SOAP, etc.

Remarque : Si vous envoyez des données à l'aide de la méthode POST, appelez send()avant la méthode pour définir le type MIME de la demande.

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Étape 2: traitement de la réponse du serveur

Lorsqu'une demande est envoyée, une fonction a été définie pour gérer la réponse.

httpRequest.onreadystatechange = nameOfTheFunction;

Que peut faire cette fonction? Tout d'abord, la fonction doit vérifier l'état de la demande. Si la valeur d'état est 4, cela signifie que la réponse côté serveur terminée est reçue et que le traitement peut continuer.

if (httpRequest.readyState === 4) {
    // everything is good, the response is received
} else {
    // still not ready
}

La liste des valeurs readyState est la suivante:

• 0-non initialisé
• 1-Chargement
• 2 chargés
• 3-interagissant
• 4-Finition

Ensuite, vous devez vérifier le code d'état de la réponse du serveur HTTP. Le site Web du W3C répertorie tous les codes d'état. Dans l'exemple suivant, en déterminant si ou 200 OKpour déterminer si l'appel Ajax de code d'état a réussi.

if (httpRequest.status === 200) {
    // perfect!
} else {
    // there was a problem with the request,
    // for example the response may contain a 404 (Not Found)
    // or 500 (Internal Server Error) response code
}

Après vérification de l'état de la demande et du code d'état de la réponse, les données envoyées par le serveur peuvent être reçues et traitées. Il existe deux options pour accéder à ces données:

• httpRequest.responseText: Renvoie la réponse côté serveur sous forme de chaîne de texte
• httpRequest.responseXML: En réponse aux XMLDocumentretours de la cible, l'objet peut utiliser la fonction de traversée du DOM JavaScript.

Notez que les étapes ci-dessus ne sont valides que lorsque les requêtes asynchrones ( open()le troisième paramètre de la méthode est défini sur true). Si vous utilisez une requête synchrone, vous n'avez pas besoin de spécifier de fonction. Dans l'appel send()après les moyens d'accéder aux données renvoyées par le serveur, car le script s'arrêtera et attendra une réponse du côté serveur.

Étape 3: un exemple simple

Faisons une simple requête HTTP. JavaScript demandera que contient le document HTML "Je suis un test." Texte "test.html", puis utilisera la alert()méthode pour imprimer test.htmlle contenu du fichier.

<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>
<script type="text/javascript">
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").onclick = function() { makeRequest('test.html'); };

  function makeRequest(url) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', url);
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})();
</script>

Dans cet exemple:

• Dans le navigateur, l'utilisateur clique sur le lien «Faire une demande»;
• Appelez la makeRequest()méthode du gestionnaire d'événements , le paramètre passé à la fonction, une requête est dans le même répertoire que le fichier HTML "test.html";
• Après la requête, ( onreadystatechange) exécute alertContents()la méthode;
• alertContents()Une méthode pour vérifier si une réponse est reçue correctement, en utilisant la alert()méthode de contenu d'impression du fichier "test.html" contient.

Remarque :

• Si vous envoyez une demande et renvoyez un morceau de code XML au lieu d'un fichier XML statique, certains en-têtes de réponse doivent être définis dans Internet Explorer. Si l'en-tête de réponse "Content-Type: application / xml" n'est pas défini, IE lancera une erreur JavaScript "Objet attendu" lors de la tentative d'accès à l'élément XML.
• Si l'en-tête "Cache-Control: no-cache" n'est pas défini, le navigateur mettra en cache la réponse et ne soumettra pas à nouveau la demande. Vous pouvez ajouter différents paramètres de requête GET comme un horodatage ou un nombre aléatoire (voir contournement du cache ).
• Si la httpRequestvariable est globale, makeRequest()la méthode peut être réécrite en raison d'un conflit. La httpRequestvariable est définie, ensuite dans un package fermé, pour éviter les conflits de la fonction Ajax.
• Si une erreur de communication (par exemple, le serveur est éteint), lors d'une tentative d'accès au champ d'état se produit, les onreadystatechangeméthodes lèveront une exception. Assurez-vous que l' ifinstruction pour déclarer une instruction try ... catch.

function alertContents() {
  try {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
  catch( e ) {
    alert('Caught Exception: ' + e.description);
  }
}

Étape 4: Utilisez XML pour répondre

Dans l'exemple précédent, après avoir reçu la réponse en utilisant les propriétés de l' XMLHttpRequestobjet responseTextaccessible le fichier "test.html" contient. Maintenant, essayez les responseXMLpropriétés.

Tout d'abord, créez un document XML valide nommé "test.xml" pour la requête, le code est le suivant:

<?xml version="1.0" ?>
<root>
    I'm a test.
</root>

Dans le script, seule la ligne de requête doit être modifiée:

οnclick="makeRequest('test.xml')"

Ensuite, alertContents()une méthode est nécessaire pour utiliser le code suivant pour remplacer alert(httpRequest.responseText);cette ligne de code:

var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

Ce code nécessite un objet responseXMLdonné XMLDocument, puis utilise les méthodes DOM pour accéder aux données dans un document XML.

Étape 5: Traitez les données

Enfin, envoyez des données au serveur et recevez la réponse. Le script JavaScript demande une page dynamique "test.php", qui retournera une page basée sur les données envoyées "computedString" - "Hello, [ user data]!", Et utiliser la alert()méthode d'impression.

Tout d'abord, ajoutez une zone de texte à la page HTML, à travers laquelle l'utilisateur peut entrer son nom:

<label>Your name: 
  <input type="text" id="ajaxTextbox" />
</label>
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Make a request
</span>

Le gestionnaire d'événements doit également ajouter une ligne pour acquérir les données utilisateur à partir de la zone de texte et les données avec l'URL de makeRequest()la méthode:

document.getElementById("ajaxButton").onclick = function() { 
	var userName = document.getElementById("ajaxTextbox").value;
	makeRequest('test.php',userName); 
}

Modification de makeRequest()la méthode de réception des données utilisateur et envoi du serveur. La requête GET pour modifier le POST, les données utilisateur sont passées en paramètre à httpRequest.send()la méthode:

function makeRequest(url, userName) {

	...

	httpRequest.onreadystatechange = alertContents;
	httpRequest.open('POST', url);
	httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	httpRequest.send('userName=' + encodeURIComponent(userName));
}

alertContents()Le procédé peut être utilisé comme troisième étape du alert()procédé, les données d'impression renvoyées par le serveur. Supposons que le serveur renvoie computedStringet les données utilisateur, et si le contenu de l'utilisateur dans la zone de texte "Jane" serveur répondra comme ceci:

{"UserData": "Jane", "computedString": "Salut, Jane!"}

Dans la alertContents()méthode d'utilisation de ces données, non seulement une alert()méthode pour imprimer le responseTextcontenu, il peut également être résolu et imprimer l' computedStringattribut du contenu:

function alertContents() {
  if (httpRequest.readyState === 4) {
    if (httpRequest.status === 200) {
      var response = JSON.parse(httpRequest.responseText);
      alert(response.computedString);
    } else {
      alert('There was a problem with the request.');
    }
  }
}