Comment faire des requêtes asynchrones via AJAX

Ce que je vais partager aujourd'hui, c'est comment faire des requêtes asynchrones via AJAX. Cela a une certaine valeur de référence et j'espère que cela sera utile à tout le monde.

Définition AJAX

AJAX est l'abréviation de Asynchronous JavaScript + XML, qui nous permet d'obtenir directement le dernier contenu sur le serveur via JavaScript sans avoir à recharger

page. Rendre le Web plus convivial. En fait, AJAX est un ensemble d'API fournies par les navigateurs, qui peuvent être appelées via JavaScript pour contrôler les requêtes et les réponses via le code.

HTTP est un protocole requête-réponse, ce qui signifie que le navigateur envoie une requête au serveur Web, le serveur Web crée ensuite une réponse qu'il renvoie au navigateur, et le navigateur restitue visuellement ce texte à l'utilisateur. . Cependant, si vous n'avez besoin de mettre à jour qu'une petite partie de la page, vous devrez utiliser AJAX, puis utiliser le modèle DOM du navigateur pour insérer dynamiquement la réponse dans la page.

Quatre étapes de requêtes asynchrones AJAX

(1) Créer un objet XMLHttpRequest pour le navigateur

var xhr = new XMLHttpRequest();

(2) Créer une fonction de requête envoyé au serveur :

xhr.open('GET', './demo.php');

(3) Une requête se produit via la connexion

xhr.send(string);

(4) Spécifiez la fonction de traitement des événements de changement de statut xhr

xhr.onreadystatechange = function () {
  // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
  if (this.readyState === 4) {
    // 通过 xhr 的 responseText 获取到响应的响应体
    console.log(this)

Quatre états de readyState

0 : représente que xhr a été créé mais que la méthode open n'a pas encore été appelée.

1 : La méthode open() a été appelée pour établir la connexion.

2 : La méthode send() est appelée et la ligne d'état et l'en-tête de réponse peuvent être obtenus.

3 : Pendant le chargement du corps de la réponse, l'attribut ResponseText peut déjà contenir certaines données.

4 : Le corps de la réponse est chargé et ResponseText peut être utilisé directement.

Exemple :

var xhr = new XMLHttpRequest()//0状态
xhr.open('GET', 'time.php')//1状态，open方法已经调用了，建立一个与服务端特定端口的连接
xhr.send()
xhr.addEventListener('readystatechange', function () {
})//里面包含了2，3，4三种状态，2分别为接受到了响应头但还没有接受到响应体；
正在下载响应报文；
报文下载下来处理响应体
xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
  }//处理函数

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tous ceux qui apprennent l'ajax.

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!