Connaissez-vous le développement de base d'Ajax ? Explication détaillée des étapes de développement de base d'ajax (avec exemples)-js tutoriel-php.cn

Cet article parle principalement des étapes de développement de base de ajax Si vous souhaitez avoir une compréhension plus approfondie du développement ajax, vous devez connaître les étapes de développement. Bien qu'il s'agisse des étapes de développement les plus élémentaires, il peut également permettre aux gens de le savoir. comment l'utiliser. développement ajax. Commencez à lire cet article maintenant

Qu'est-ce que l'ajax ? A quoi ça sert ?
Le nom complet d'Ajax est "Asynchrous Javascript And XML", qui fait référence à une technologie de développement Web permettant de créer des applications Web interactives. Il s'agit d'une technologie permettant de créer rapidement des pages Web dynamiques pour améliorer l'efficacité de l'interaction entre les navigateurs et les serveurs. Il peut remplacer le mode d’interaction Web traditionnel.
Comment comprendre cette synchronisation et cet asynchronisme ?

Qu'est-ce que le modèle d'interaction synchrone traditionnel ?
Dans le modèle traditionnel, le mode d'interaction synchrone est utilisé. Le navigateur client envoie une requête au serveur, puis attend que le serveur réponde à la requête et ne puisse effectuer d'autres opérations.
Qu'est-ce que le modèle d'interaction asynchrone de la technologie grand public ?
Dans le mode d'interaction asynchrone Ajax, il existe un moteur Ajax d'objet de transfert supplémentaire entre le navigateur client et le serveur. Lorsque le navigateur client soumet une requête au moteur Ajax, le moteur Ajax est alors responsable du transfert des informations de la demande vers. le serveur. , de sorte qu'une fois que le navigateur client a envoyé la demande, il puisse continuer l'opération au lieu d'être dans un état d'attente. Une fois que le serveur a traité la demande du moteur Ajax, il transmet la réponse au moteur Ajax et celui-ci met à jour la page du navigateur client.
Étapes de développement Ajax
Première étape : obtenir l'objet XMLHttpRequest.
Un exemple de code peut être trouvé dans le document XML de w3school.

var xmlhttp = null;if(window.XMLHttpRequest){    //这个是针对浏览器IE7及其7以上的版。
    xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){    //这个是针对浏览器5到7的版本。
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

Copier après la connexion

Étape 2 : Enregistrez la fonction de rappel.

 xmlhttp.onreadystatechange = function(){ 
};

Copier après la connexion

onreadystatechange est un gestionnaire d'événements pour les événements déclenchés par chaque changement d'état.

Étape 3 : open("method","URL",async,"uname","pswd")
Utilisé uniquement pour définir la méthode de requête, le chemin de l'URL et s'il faut synchroniser . Aucune demande n'est envoyée.

参数	作用
method	发送请求的方式，可选的参数有：GET、POST和PUT。
URL	要发送的URL路径，可以使用绝对路径和相对路径。
async	请求是否要被异步处理。也可以不写，默认为true。
	true，脚本处理会在send()发送之后继续处理，即异步处理。
	false，在继续脚本处理之前，脚本会等待某个响应，即同步处理。
uname	目前还没用过，文档也没有说明。直接不写就行。
pswd	目前还没用过，文档也没有说明。直接不写就行。

Et si l'URL nécessite des paramètres ?
S'il s'agit d'une requête get, concaténez les paramètres directement après l'url.
Par exemple : xmlhttp.open("get","http://www.baidu.com?name=xiaosan");

S'il s'agit d'une demande de publication, plusieurs opérations de paramétrage sont nécessaires :
Par exemple : xmlhttp.open("post","http://www.baidu.com");
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded " ;

Étape 4 : envoyer (contenu)

Envoyer la demande. S'il n'y a aucun paramètre, il est écrit comme send(null).

Étape 5 : Effectuez des opérations de données spécifiques dans la fonction de rappel.

Avant de faire cela, vous devez comprendre certaines propriétés de XMLHttpRequest.

属性	描述
onreadystatechange	状态发生改变的时候，能触发一些事情。
readyState	详情见下表
status	数字返回状态，比如”OK”为200，”Not Found”为404等
statusText	字符串返回状态，比如”OK”,”Not Found”等
responseText	以字符串返回响应。
responseXML	以XML返回响应。返回的是一个XML对象，可以用DOM进行解析

Le tableau suivant montre la valeur d'état d'un readyState et la signification de la valeur d'état :

Qu'est-ce que l'ajax ? A quoi ça sert ?
Le nom complet d'Ajax est "Asynchrous Javascript And XML", qui fait référence à une technologie de développement Web permettant de créer des applications Web interactives. Il s'agit d'une technologie permettant de créer rapidement des pages Web dynamiques pour améliorer l'efficacité de l'interaction entre les navigateurs et les serveurs. Il peut remplacer le mode d’interaction Web traditionnel.
Comment comprendre cette synchronisation et cet asynchronisme ?
Qu'est-ce que le modèle d'interaction synchrone traditionnel ?
Dans le modèle traditionnel, le mode d'interaction synchrone est utilisé. Le navigateur client envoie une requête au serveur, puis attend que le serveur réponde à la requête et ne puisse effectuer d'autres opérations. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois Colonne Manuel de développement AJAX pour en savoir plus)
Qu'est-ce que le modèle d'interaction asynchrone de la technologie grand public ?
Dans le mode d'interaction asynchrone Ajax, il existe un moteur Ajax d'objet de transfert supplémentaire entre le navigateur client et le serveur. Lorsque le navigateur client soumet une requête au moteur Ajax, le moteur Ajax est alors responsable du transfert des informations de la demande vers. le serveur. , de sorte qu'une fois que le navigateur client a envoyé la demande, il puisse continuer l'opération au lieu d'être dans un état d'attente. Une fois que le serveur a traité la demande du moteur Ajax, il transmet la réponse au moteur Ajax et celui-ci met à jour la page du navigateur client.
Étapes de développement Ajax
Première étape : obtenir l'objet XMLHttpRequest.
Un exemple de code peut être trouvé dans le document XML de w3school.

var xmlhttp = null;if(window.XMLHttpRequest){    //这个是针对浏览器IE7及其7以上的版。
    xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){    //这个是针对浏览器5到7的版本。
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

Copier après la connexion

Étape 2 : Enregistrez la fonction de rappel.
xmlhttp.onreadystatechange = function(){
};
onreadystatechange est un gestionnaire d'événements pour les événements déclenchés par chaque changement d'état.

Étape 3 : open("method","URL",async,"uname","pswd")
Utilisé uniquement pour définir la méthode de requête, le chemin de l'URL et s'il faut synchroniser, et le fait pas l'envoyer demander.

参数	作用
method	发送请求的方式，可选的参数有：GET、POST和PUT。
URL	要发送的URL路径，可以使用绝对路径和相对路径。
async	请求是否要被异步处理。也可以不写，默认为true。
	true，脚本处理会在send()发送之后继续处理，即异步处理。
	false，在继续脚本处理之前，脚本会等待某个响应，即同步处理。
uname	目前还没用过，文档也没有说明。直接不写就行。
pswd	目前还没用过，文档也没有说明。直接不写就行。

Et si l'URL nécessite des paramètres ?
S'il s'agit d'une requête get, concaténez les paramètres directement après l'url.
Par exemple : xmlhttp.open("get","http://www.baidu.com?name=xiaosan");

Envoyer la demande. S'il n'y a aucun paramètre, il est écrit comme send(null).

Étape 5 : Effectuez des opérations de données spécifiques dans la fonction de rappel.

Avant de faire cela, vous devez comprendre certaines propriétés de XMLHttpRequest.

属性	描述
onreadystatechange	状态发生改变的时候，能触发一些事情。
readyState	详情见下表
status	数字返回状态，比如”OK”为200，”Not Found”为404等
statusText	字符串返回状态，比如”OK”,”Not Found”等
responseText	以字符串返回响应。
responseXML	以XML返回响应。返回的是一个XML对象，可以用DOM进行解析

Le tableau suivant montre la valeur d'état d'un readyState et la signification de la valeur d'état :

Cet article se termine ici (pensez à Apprendre (en savoir plus, rendez-vous sur le site Web PHP chinois

状态值	代表的状态释义
0	未初始化的状态，代表XMLHttpRequest对象被创建之前
1	加载中的状态，open操作。
2	已加载的状态，send操作。
3	交互的状态，接收到了响应数据，但只有响应头，正文还没别接收。
4	完成的状态，所有的http响应接收完成。