Explication détaillée de l'utilisation d'AJAX et JavaScript

Cette fois, je vais vous apporter une explication détaillée de l'utilisation d'AJAX et de JavaScript. Quelles sont les précautions lors de l'utilisation d'AJAX et de JavaScript Voici des cas pratiques, jetons un coup d'oeil.

AJAX n'est pas une spécification JavaScript, c'est juste une abréviation "inventée" par un copain : Asynchronous JavaScript and XML, ce qui signifie utiliser JavaScript pour effectuer des requêtes réseau asynchrones.

Si vous observez attentivement la soumission d'un formulaire, vous constaterez qu'une fois que l'utilisateur clique sur le bouton "Soumettre" et que le formulaire commence à être soumis, le navigateur actualisera la page puis vous le dira dans la nouvelle page si l'opération a réussi ou non. Si malheureusement le réseau est trop lent ou pour d’autres raisons, vous obtiendrez une page 404.

Voici comment fonctionne le Web : à une requête HTTP correspond une page.

Si vous souhaitez que l'utilisateur reste dans la page actuelle et fasse une nouvelle requête HTTP en même temps, vous devez utiliser JavaScript pour envoyer la nouvelle requête. Après avoir reçu les données, utilisez JavaScript pour mettre à jour la page. De cette façon, l'utilisateur aura l'impression qu'il reste toujours sur la page actuelle, mais les données peuvent être continuellement mises à jour.

La première utilisation à grande échelle d'AJAX a été Gmail. Après le premier chargement de la page Gmail, toutes les données restantes reposaient sur AJAX pour la mise à jour.

Écrire un code AJAX complet en JavaScript n'est pas compliqué, mais il faut faire attention : les requêtes AJAX sont exécutées de manière asynchrone, c'est-à-dire que la réponse doit être obtenue via la fonction de rappel .
L'écriture d'AJAX sur les navigateurs modernes repose principalement sur l'objet XMLHttpRequest :

function success(text) {
 var textarea = document.getElementById('test-response-text');
 textarea.value = text;
}
function fail(code) {
 var textarea = document.getElementById('test-response-text');
 textarea.value = 'Error code: ' + code;
}
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
 if (request.readyState === 4) { // 成功完成
  // 判断响应结果:
  if (request.status === 200) {
   // 成功，通过responseText拿到响应的文本:
   return success(request.responseText);
  } else {
   // 失败，根据响应码判断失败原因:
   return fail(request.status);
  }
 } else {
  // HTTP请求还在继续...
 }
}
// 发送请求:
request.open('GET', '/api/categories');
request.send();
alert('请求已发送，请等待响应...');

Pour les versions inférieures d'IE, vous devez passer à un ActiveXObject Object  :

function success(text) {
 var textarea = document.getElementById('test-ie-response-text');
 textarea.value = text;
}
function fail(code) {
 var textarea = document.getElementById('test-ie-response-text');
 textarea.value = 'Error code: ' + code;
}
var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象
request.onreadystatechange = function () { // 状态发生变化时，函数被回调
 if (request.readyState === 4) { // 成功完成
  // 判断响应结果:
  if (request.status === 200) {
   // 成功，通过responseText拿到响应的文本:
   return success(request.responseText);
  } else {
   // 失败，根据响应码判断失败原因:
   return fail(request.status);
  }
 } else {
  // HTTP请求还在继续...
 }
}
// 发送请求:
request.open('GET', '/api/categories');
request.send();
alert('请求已发送，请等待响应...');

Si vous souhaitez mélanger l'écriture standard et l'écriture IE, vous pouvez écrire comme ceci :

var request;
if (window.XMLHttpRequest) {
 request = new XMLHttpRequest();
} else {
 request = new ActiveXObject('Microsoft.XMLHTTP');
}

Détection de passewindow Le fait que l'objet ait l'attribut XMLHttpRequest détermine si le navigateur prend en charge la norme XMLHttpRequest. Notez que n'utilisez pas le navigator.userAgent du navigateur pour détecter si le navigateur prend en charge une certaine fonctionnalité JavaScript. L'une est parce que la chaîne elle-même peut être falsifiée et l'autre est de juger JavaScript. via la version IE, les fonctionnalités seront très complexes.

Après avoir créé l'objet XMLHttpRequest, vous devez d'abord définir la fonction de rappel de onreadystatechange. Dans la fonction de rappel, il suffit généralement de juger si la demande est terminée via readyState === 4 Si elle est terminée, alors en fonction du statut. === 200Déterminez s'il s'agit d'une réponse réussie. La méthode
XMLHttpRequest de l'objet open() a 3 paramètres Le premier paramètre précise s'il s'agit de GET ou de POST. deux paramètres spécifient l'adresse URL et le troisième paramètre spécifie s'il faut utiliser le mode asynchrone. La valeur par défaut est true, il n'est donc pas nécessaire de l'écrire.

Remarque, ne spécifiez jamais le troisième paramètre comme false, sinon le navigateur cessera de répondre, jusqu'à ce que l'AJAX la demande est complétée. Si cette demande prend 10 secondes, vous constaterez dans les 10 secondes que le navigateur est dans un état de « mort suspendue ».

Enfin, la méthode send() est appelée pour envoyer réellement la requête. Les requêtes GET ne nécessitent pas de paramètres et les requêtes POST nécessitent que la partie du corps soit transmise sous forme de chaîne ou d'objet FormData.

Restrictions de sécurité

L'URL dans le code ci-dessus utilise des chemins relatifs. Si vous le modifiez de à 'http://www.sina.com.cn/' et que vous l'exécutez à nouveau, une erreur sera certainement signalée. Dans la console Chrome, vous pouvez également voir un message d'erreur.

Ceci est dû à la politique de même origine du navigateur. Par défaut, lorsque JavaScript envoie une requête AJAX, le nom de domaine de l'URL doit être exactement le même que celui de la page actuelle.

完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。有的浏览器口子松一点，允许端口不同，大多数浏览器都会严格遵守这个限制。

那是不是用JavaScript无法请求外域（就是其他网站）的URL了呢？方法还是有的，大概有这么几种：

一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。

二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器：
'/proxy?url=http://www.sina.com.cn'代理服务器再把结果返回，这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。

第三种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源：

<html>
<head>
 <script src="http://example.com/abc.js"></script>
 ...
</head>
<body>
...
</body>
</html>

JSONP通常以函数调用的形式返回，例如，返回JavaScript内容如下：
foo('data');这样一来，我们如果在页面中先准备好foo()函数，然后给页面动态加一个