Qu'est-ce qu'ajax ? Une introduction détaillée à ajax

Ajax en lui-même n'est pas une technologie, mais a été lancé par Jesse James Garrett en 2005 et décrit comme une « nouvelle » façon d'appliquer de nombreuses technologies existantes, notamment : HTML ou XHTML, feuilles de style en cascade, JavaScript, The Document. Modèle objet, XML, XSLT et surtout l'objet XMLHttpRequest.

En combinant ces technologies dans le modèle Ajax, l'application Web peut mettre à jour rapidement et progressivement l'interface utilisateur au lieu de rafraîchir l'intégralité de l'interface de navigation, ce qui rend l'application plus rapide et l'expérience utilisateur meilleure.

Bien que x représente xml en ajax, json est plus utilisé en raison de ses avantages d'être plus léger et de faire partie de javascript. Json et XML dans le modèle ajax sont utilisés pour regrouper les informations sur les données.

Qu'est-ce qu'AJAX ?

AJAX signifie Asynchronous JavaScript And XML En bref, il utilise XMLHttpRequestobject pour communiquer avec le serveur. Il peut être utilisé de différentes manières. pour envoyer et recevoir des informations, notamment des fichiers JSON, XML, HTML et texte. La fonctionnalité la plus intéressante d'AJAX est « asynchrone », ce qui signifie qu'il peut communiquer avec le serveur et échanger des données pour mettre à jour la page sans actualiser la page.

Les deux principales fonctionnalités d'ajax :

• Ne pas actualiser la page pour demander des données

• De Le serveur obtient les données

Étape 1 – Comment demander

Afin de demander au serveur en utilisant javascript, nous devons instancier un objet avec les fonctions nécessaires. C'est de là que vient XMLHttpRequest. À l'origine, Internet Explorer implémentait un objet ActiveX appelé XMLHTTP. Depuis lors, Mozilla, Safari et d'autres fabricants de navigateurs ont successivement implémenté l'objet XMLHttpRequest pour prendre en charge cette méthode et les fonctions d'objet ActiveX similaires à celles de Microsoft. Parallèlement, Microsoft a également implémenté XMLHttpRequest.

// Ancien code de compatibilité, plus nécessaire.

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ .. .

httpRequest = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE 6 et versions antérieures

httpRequest = new ActiveXObject("Microsoft.XMLHTTP ");

}

Remarque : Le code ci-dessus est fourni uniquement à titre d'explication et crée uniquement une instance de XMLHttp. Vous pouvez passer à l'étape 3 pour voir des exemples plus pratiques.

Après la demande, nous devons recevoir le résultat de la demande. A ce stade, nous devons indiquer à l'objet de requête XMLHttp de gérer la méthode JavaScript de réponse en configurant sa méthode onreadystatechangeproperty comme suit :

httpRequest.onreadystatechange = nameOfTheFunction;

ou

<code>httpRequest.onreadystatechange = function(){<br>    // Process the server response here.<br>};</code>

avant de déclarer comment accepter la réponse. Après cela, nous devons lancer une requête en appelant les méthodes open() et send() de l'objet de requête HTTP, comme suit :

<code>httpRequest.open('GET', 'http://www.example.org/some.file', true);<br>httpRequest.send();</code>

• Le premier paramètre of open() est la méthode de requête HTTP – GET, POST, HEAD ou autres méthodes prises en charge par le serveur. Les noms de méthodes en majuscules sont des standards HTTP, sinon certains navigateurs (par exemple : Firefox) risquent de ne pas émettre la requête. Cliquez sur les spécifications du W3C pour plus d'informations sur les méthodes de requête http.

• Le deuxième paramètre est l'url à demander. Pour des raisons de sécurité, les requêtes d'URL inter-domaines ne peuvent pas être effectuées par défaut. Assurez-vous que toutes les pages sont sous le même nom de domaine, sinon vous obtiendrez une erreur « autorisation refusée » lors de l'appel de la méthode open(). Un problème courant entre domaines est que le nom de domaine de votre site Web est domain.tld, mais que vous essayez d'accéder à la page en utilisant www.domain.tld. Si vous souhaitez vraiment effectuer des requêtes d'origine croisée, consultez le contrôle d'accès HTTP.

• Le troisième paramètre facultatif définit si la requête est synchrone ou asynchrone. Si c'est vrai (valeur par défaut), JavaScript continuera à s'exécuter et le serveur renverra des données pendant que l'utilisateur exploite la page. C'est l'AJAX.

Les paramètres de la méthode send() peuvent être n'importe quelle donnée (POST) que vous souhaitez envoyer au serveur. Les données du formulaire doivent être sous une forme que le serveur peut analyser, telle qu'une chaîne de requête :

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

ou d'autres formes, telles que multipart/form-data, JSON, XML, etc.

Notez que si vous souhaitez POST des données, vous souhaiterez peut-être définir le type MIME de la requête. Par exemple, nous mettons le code suivant avant d'appeler send() pour envoyer les données du formulaire sous forme de données de requête :

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

Étape 2 – Lors du traitement de la réponse du serveur à la requête

, nous ont fourni une méthode JavaScript pour gérer la réponse :

httpRequest.onreadystatechange = nameOfTheFunction;

Que fait cette méthode ? Tout d’abord, nous devons vérifier l’état de la demande. Si la valeur est XMLHttpRequest.DONE (4), cela signifie que toutes les réponses du serveur ont été acceptées.

<code>if (httpRequest.readyState === XMLHttpRequest.DONE) {<br>    // Everything is good, the response was received.<br>} else {<br>    // Not ready yet.<br>}</code>

Toutes les valeurs possibles de readyState peuvent être visualisées sur XMLHTTPRequest.readyState, comme suit :

• 0 (non initialisé) ou (la requête n'est pas initialisée)

• 1 (chargement) ou (serveur établissant la connexion)

• 2 (chargé) ou (demande reçue)

• 3 (interactif) ou (exécuter la demande)

• 4 (complet) ou (demande terminée et la réponse est prêtedemande de réponse terminée en place)

• Value	State	Description
  0	UNSENT	Client has been created. open() not called yet.
  1	OPENED	open() has been called.
  2	HEADERS_RECEIVED	send() has been called, and headers and status are available.
  3	LOADING	Downloading; responseText holds partial data.
  4	DONE	The operation is complete.

(Source)

接下来，检查HTTP响应的 response code 。查看 W3C看到可能的值。下面例子我们用response code是不是等于200来判断ajax请求是否成功。

<code>if (httpRequest.status === 200) {<br>    // Perfect!<br>} else {<br>    // There was a problem with the request.<br>    // For example, the response may have a 404 (Not Found)<br>    // or 500 (Internal Server Error) response code.<br>}</code>

检查完响应值后。我们可以随意处理服务器返回的数据，有两个选择获得这些数据：

• httpRequest.responseText – 返回服务器响应字符串

• httpRequest.responseXML – 返回服务器响应XMLDocument 对象 可以传递给JavaScript DOM 方法

上面的代码只有在异步的情况下有效（open() 的第三个参数设置为true）。如果你用同步请求，就没必要指定一个方法。但是我们不鼓励使用同步请求，因为同步会导致极差的用户体验。

Step 3 – 一个简单的例子

我们把上面的放在一起合成一个简单的HTTP请求。我们的JavaScript 将请求一个HTML 文档， test.html, 包含一个字符串 "I'm a test."然后我们alert()响应内容。这个例子使用普通的JavaScript — 没有引入jQuery， HTML, XML 和 PHP 文件应该放在同一级目录下。

<code><button id="ajaxButton" type="button">Make a request</button><br><br><script><br>(function() {<br>  var httpRequest;<br>  document.getElementById("ajaxButton").addEventListener('click', makeRequest);<br><br>  function makeRequest() {<br>    httpRequest = new XMLHttpRequest();<br><br>    if (!httpRequest) {<br>      alert('Giving up :( Cannot create an XMLHTTP instance');<br>      return false;<br>    }<br>    httpRequest.onreadystatechange = alertContents;<br>    httpRequest.open('GET', 'test.html');<br>    httpRequest.send();<br>  }<br><br>  function alertContents() {<br>    if (httpRequest.readyState === XMLHttpRequest.DONE) {<br>      if (httpRequest.status === 200) {<br>        alert(httpRequest.responseText);<br>      } else {<br>        alert('There was a problem with the request.');<br>      }<br>    }<br>  }<br>})();<br></script></code>

在这个例子里：

• 用户点击"Make a request” 按钮；

• 事件调用 makeRequest() 方法；

• 请求发出，然后 (onreadystatechange)执行传递给 alertContents()；

• alertContents() 检查响应是否 OK, 然后 alert() test.html 文件内容。

 

 

注意 1: 如果服务器返回XML，而不是静态XML文件，你必须设置response headers 来兼容i.e.。如果你不设置headerContent-Type: application/xml, IE 将会在你尝试获取 XML 元素之后抛出一个JavaScript "Object Expected" 错误 。

 

 

注意 2: 如果你不设置header Cache-Control: no-cache 浏览器将会缓存响应不再次提交请求，很难debug。你可以添加永远不一样的GET 参数，例如 timestamp 或者 随机数 (查看 bypassing the cache)

 

注意 3: 如果 httpRequest 变量是全局的，混杂调用 makeRequest()会覆盖各自的请求,导致一个竞争的状态。在一个closure 里声明 httpRequest 本地变量 来避免这个问题。

在发生通信错误(如服务器崩溃)、onreadystatechange方法会抛出一个异常,当访问响应状态。为了缓解这个问题,你可以用ry…catch包装你的if...then 语句:

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

Step 4 – 使用 XML 响应

在前面的例子里，在获取到响应之后，我们用request 对象responseText 属性获得 test.html 文件内容。现在让我们尝试获取responseXML 属性。

首先，让我们创建一个有效的XML文档，留着待会我们请求。(test.xml)如下:

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

在这个脚本里，我们只要修改请求行为：

<code>...<br>onclick="makeRequest('test.xml')"><br>...</code>

然后在alertContents()里，我们需要把 alert(httpRequest.responseText); 换为：

<code>var xmldoc = httpRequest.responseXML;<br>var root_node = xmldoc.getElementsByTagName('root').item(0);<br>alert(root_node.firstChild.data);</code>

这里获得了responseXML的XMLDocument，然后用 DOM 方法来获得包含在XML文档里面的内容。你可以在here查看test.xml，在here查看修改后的脚本。

Step 5 – 使用数据返回

最后，让我们来发送一些数据到服务器，然后获得响应。我们的JavaScript这次将会请求一个动态页面，test.php将会获取我们发送的数据然后返回一个计算后的字符串 - "Hello, [user data]!"，然后我们alert()出来。

首先我们加一个文本框到HTML，用户可以输入他们的姓名：

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

我们也给事件处理方法里面加一行获取文本框内容，并把它和服务器端脚本的url一起传递给 makeRequest() 方法：

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

我们需要修改makeRequest()方法来接受用户数据并且传递到服务端。我们将把方法从 GET 改为 POST，把我们的数据包装成参数放到httpRequest.send()：

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

如果服务端只返回一个字符串， alertContents() 方法可以和Step 3 一样。然而，服务端不仅返回计算后的字符串，还返回了原来的用户名。所以如果我们在输入框里面输入 “Jane”，服务端的返回将会像这样：

{"userData":"Jane","computedString":"Hi, Jane!"}

要在alertContents()使用数据，我们不能直接alert responseText, 我们必须转换数据然后 alert computedString属性:

<code>function alertContents() {<br>  if (httpRequest.readyState === XMLHttpRequest.DONE) {<br>    if (httpRequest.status === 200) {<br>      var response = JSON.parse(httpRequest.responseText);<br>      alert(response.computedString);<br>    } else {<br>      alert('There was a problem with the request.');<br>    }<br>  }<br>}</code>

test.php 文件如下：

<code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';<br>$computedString = "Hi, " . $name;<br>$array = ['userName' => $name, 'computedString' => $computedString];<br>echo json_encode($array);</code>

查看更多DOM方法, 请查看 Mozilla's DOM implementation 文档。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!