Explication détaillée du fonctionnement d'Ajax

Cette fois, je vais vous apporter une explication détaillée du principe de fonctionnement d'ajax, et quelles sont les précautions lors de l'utilisation d'ajax. Voici des cas pratiques, jetons un coup d'œil.

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques. AJAX permet aux pages Web de se mettre à jour de manière asynchrone en échangeant de petites quantités de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

1. La technologie incluse dans ajax

Tout le monde sait qu'ajax n'est pas une nouvelle technologie, mais une combinaison de plusieurs technologies originales. Il est composé des technologies suivantes.

Représenté en CSS et XHTML.

Utilisez le modèle DOM pour l'interaction et l'affichage dynamique.

Utilisez XMLHttpRequest pour communiquer de manière asynchrone avec le serveur.

Utilisez javascript pour vous lier et appeler.

Parmi les technologies ci-dessus, à l'exception de l'objet XmlHttpRequest, toutes les autres technologies sont basées sur les standards du Web et ont été largement utilisées. Bien que XMLHttpRequest n'ait pas encore été adopté par le W3C, il s'agit déjà d'un standard de facto. presque tous les principaux navigateurs le prennent actuellement en charge.

2. Comment créer un ajax

Le principe d'Ajax est simplement d'utiliser l'objet XmlHttpRequest pour envoyer des requêtes asynchrones au serveur et obtenir données du serveur. Utilisez ensuite javascript pour manipuler le DOM et mettre à jour la page. L’étape la plus critique consiste à obtenir les données de la demande auprès du serveur. La création native d'Ajax peut être divisée en quatre étapes suivantes.

1. Créez un objet XMLHttpRequest

Tous les navigateurs modernes (IE7+, Firefox, Chrome, Safari et Opera) ont des objets XMLHttpRequest intégrés.

Syntaxe de création d'objets XMLHttpRequest :

var xhr = new XMLHttpRequest();

Les anciennes versions d'Internet Explorer (IE5 et IE6) utilisent des objets ActiveX :

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

Pour gérer tous les navigateurs modernes navigateur, y compris IE5 et IE6, veuillez vérifier si le navigateur prend en charge l'objet XMLHttpRequest. Si pris en charge, crée un objet XMLHttpRequest. S'il n'est pas supporté, créez un ActiveXObject :

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. Préparez la requête

Initialisez l'objet XMLHttpRequest en acceptant trois paramètres :

xhr.open(method,url,async);

Le premier paramètre représente la chaîne de type de requête , et sa valeur peut être GET ou POST.

Requête GET :

xhr.open("GET",demo.php?name=tsrot&age=24,true);

Requête POST  :

xhr.open("POST",demo.php,true);

Le deuxième paramètre est l'URL à laquelle la requête doit être envoyée .

Le troisième paramètre est vrai ou faux, indiquant si la requête est émise en mode asynchrone ou synchrone. (La valeur par défaut est true, false n'est généralement pas recommandé)

false : les requêtes émises en mode synchrone suspendront l'exécution de tout le code javascript jusqu'à ce que le serveur obtienne une réponse si le navigateur se connecte au réseau ou télécharge un. file Si quelque chose ne va pas, la page restera bloquée pour toujours.
true : Une requête émise en mode asynchrone. Pendant que l'objet de requête envoie et reçoit des données, le navigateur peut continuer à charger la page et exécuter d'autres codes javascript

Envoyer une requête . 🎜>

xhr.send();

Généralement, les paramètres soumis à l'aide d'Ajax sont pour la plupart de simples chaînes. Vous pouvez directement utiliser la méthode GET pour écrire les paramètres à soumettre dans le paramètre url. de la méthode open. À l'heure actuelle, les paramètres de la méthode send sont nuls ou vides.

Requête GET :

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

Requête POST :

Si vous avez besoin de POST des données comme un formulaire HTML, utilisez setRequestHeader() pour ajouter des en-têtes HTTP. Précisez ensuite les données que vous souhaitez envoyer dans la méthode send() :

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("name="+userName+"&age="+userAge);

4. Traitez la réponse

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}

événement onreadystatechange :

Lorsqu'une requête est envoyée au serveur, nous devons effectuer certaines tâches basées sur les réponses. Chaque fois que readyState change, l'événement onreadystatechange est déclenché.

Attribut readyState :

0 : L'objet a été créé, mais la méthode open() n'a pas encore été appelée.

1 : La méthode open() a été appelée, mais la requête n'a pas encore été envoyée.

2：请求已经发送，标题和状态已经收到，并可用。

3：接收到来自服务器的响应。

4：接收完请求数据，表示已经完成请求。

status属性：

200:”OK”

404: 未找到页面

responseText：获得字符串形式的响应数据

responseXML：获得 XML 形式的响应数据

返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象。

5、完整例子

demo.html

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
xhr.open("GET","./data.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText).name);
}
}

data.json

{
"name":"tsrot",
"age":24
}

三、ajax应用场景

场景 1. 数据验证

场景 2. 按需取数据

场景 3. 自动更新页面

四、ajax优缺点

优点：

1、页面无刷新，用户体验好。

2、异步通信，更加快的响应能力。

3、减少冗余请求，减轻了服务器负担

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1、ajax干掉了back按钮，即对浏览器后退机制的破坏。

2、存在一定的安全问题。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、无法用URL直接访问。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

AJAX请求数组应该如何实现

在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!