Comprendre les bases de la demande de données Ajax

Articles connexes recommandés : tutoriel vidéo ajax

Aperçu d'Ajax

Il s'agit d'un ensemble de méthodes fournies par les navigateurs qui peuvent mettre à jour les données sans actualisation de page et améliorer l'expérience de l'utilisateur en matière de navigation dans les applications de sites Web.

Scénarios d'application Ajax

Tirez la page pour charger plus de données
Pagination sans actualiser les données de la liste
L'élément de formulaire quitte la validation des données
🎜> Liste déroulante du texte de l'invite du champ de recherche

Principe de fonctionnement et mise en œuvre d'Ajax

Principe de fonctionnement d'Ajax
Ajax est équivalent au navigateur qui envoie des requêtes et un agent de réception de réponses pour mettre à jour partiellement les données de la page sans affecter la navigation de l'utilisateur sur la page, améliorant ainsi l'expérience utilisateur.

Étapes de mise en œuvre d'Ajax

1. Créer un objet Ajax

 var xhr = new XMLHttpRequest();

1. Dites à Ajax l'adresse et la demande Méthode

xhr.open('get', 'http://www.example.com');

1. Envoyer une requête

 xhr.send();

1. Obtenir les données de réponse du serveur au client

xhr.onload = function () {
     console.log(xhr.responseText);
 }

Format des données de réponse côté serveur
Dans les projets réels, le côté serveur utilisera les objets JSON comme format de données de réponse dans la plupart des cas. Lorsque le client obtient les données de réponse, il doit épisser les données JSON et la chaîne HTML, puis afficher le résultat épissé sur la page.
Dans le processus de requête et de réponse http, qu'il s'agisse de paramètres de requête ou de contenu de réponse, s'il s'agit d'un type d'objet, il sera finalement converti en chaîne d'objet pour la transmission.

JSON.parse() // 将 json 字符串转换为json对象

Transmission des paramètres de demande

Soumission de formulaire de site Web traditionnel

             

 

Méthode de demande GET

xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');

Méthode de demande POST

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');

Message de requête
Le bloc de données transmis lors de la requête et de la réponse HTTP est appelé un message, comprenant les données à transmettre et quelques informations supplémentaires. Ces données et informations doivent être conformes à la réglementation. .

Format des paramètres de la requête

1. application/x-www-form-urlencoded

 name=zhangsan&age=20&sex=男

1. application/json

{name: 'zhangsan', age: '20', sex: '男'}

Spécifiez la valeur de l'attribut Content-Type dans l'en-tête de la requête comme étant application/json, indiquant au serveur que le format du paramètre de requête actuel est json.

JSON.stringify() // 将json对象转换为json字符串

Remarque : la requête get ne peut pas soumettre le format de données d'objet json, et la soumission de formulaire des sites Web traditionnels ne prend pas en charge le format de données d'objet json.

Obtenir la réponse côté serveur

Code d'état Ajax
Après avoir créé l'objet ajax, configuré l'objet ajax, envoyé la demande et reçu les données de réponse côté serveur, chaque étape de ce processus correspondra à une valeur, et cette valeur est le code d'état ajax.

0 : La requête n'a pas été initialisée (open() n'a pas encore été appelé)
1 : La requête a été établie, mais n'a pas encore été envoyée (send() n'a pas n'a pas encore été appelé)
2 : La demande a été envoyée
3 : La demande est en cours de traitement, généralement certaines données dans la réponse sont disponibles
4 : La réponse a été complétée, la réponse du serveur peut être obtenue et utilisé

xhr.readyState // 获取Ajax状态码

événement onreadystatechange

Cet événement sera automatiquement déclenché lorsque le code d'état Ajax change.
Dans la fonction de traitement des événements, vous pouvez obtenir le code d'état Ajax et le juger. Lorsque le code d'état est 4, vous pouvez obtenir les données de réponse côté serveur via xhr.responseText.

// 当Ajax状态码发生变化时
 xhr.onreadystatechange = function () {
     // 判断当Ajax状态码为4时
     if (xhr.readyState == 4) {
         // 获取服务器端的响应数据
         console.log(xhr.responseText);
     }
 }

La différence entre deux façons d'obtenir une réponse côté serveur

Gestion des erreurs Ajax

1. 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
   可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码
2. 网络畅通，服务器端没有接收到请求，返回404状态码。
   检查请求地址是否错误。
3. 网络畅通，服务器端能接收到请求，服务器端返回500状态码。
   服务器端错误，找后端程序员进行沟通。
4. 网络中断，请求无法发送到服务器端。
   会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

低版本 IE 浏览器的缓存问题
问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

 xhr.open('get', 'http://www.example.com?t=' + Math.random());

Ajax 异步编程

Ajax 封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复。
解决方案：将请求代码封装到函数中，发请求时调用函数即可。

ajax({ 
     type: 'get',
     url: 'http://www.example.com',
     success: function (data) { 
         console.log(data);
     }
 })

Ajax 概述

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

Ajax 的应用场景

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

相关学习推荐：javascript视频教程

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!