Comment fonctionne ajax (avec schéma)

Cet article vous parle principalement du principe de fonctionnement d'ajax. Il a une certaine valeur de référence. Les amis intéressés peuvent en apprendre davantage.

Ajax fait référence à Asynchronous JavaScript et XML (JavaScript et XML asynchrones). Le plus grand avantage est qu'il peut échanger des données avec le serveur et mettre à jour une partie du contenu de la page Web sans recharger la page entière. Le principe de base de la mise en œuvre est le suivant : l'objet DOM de la page Web peut exploiter avec précision une partie du contenu de la page Web. XML, en tant que pur support de stockage de données, permet au client et au serveur d'échanger uniquement les données du contenu de la page Web. informations supplémentaires telles que les styles de page Web, XMLHttpRequest est un objet de requête qui interagit avec le serveur indépendamment de la requête intégrée du navigateur lui-même.

Le processus abstrait d'interaction de l'application Web Ajax avec le serveur est le suivant :

Explication détaillée du processus :

1 : Utiliser Technologie Ajax, les bases La base est de créer un objet XMLHttpRequest, sans lequel il n'y a aucune possibilité de transmission asynchrone :

var xmlhttp;
if (window.XMLHttpRequest) { //检查浏览器的XMLHttpRequest属性，如果为真则支持XMLHttpRequest
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest(); 
} else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}

2 : Lier les opérations asynchrones en réponse à certains événements dans la page web : Transmettre via le xmlhttp objet créé ci-dessus Demander et transporter des données. Avant de faire une requête, vous devez d'abord définir la méthode de l'objet de requête, quel fichier soumettre au serveur pour le traitement de la requête, quelles données transporter et si elles sont asynchrones.

Parmi elles, comme les données de soumission de requête ordinaires, il existe ici deux méthodes : GET/POST

 xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",);
 xmlhttp.send();

xmlhttp.open("POST","/try/ajax/demo_post2.php","Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

3 : Une fois que le serveur a reçu la requête, il transmet les données jointes en entrée pour le traitement. fichier demandé, par exemple ici : passez fname=Henry&lname=Ford en entrée du fichier /try/ajax/demo_get2.php. Ensuite, le fichier est traité en fonction des données entrantes, et le résultat est finalement renvoyé et renvoyé via l'objet de réponse. Le client obtient le contenu de la réponse en fonction de l'objet xmlhttp, puis appelle l'objet DOM pour modifier partiellement le contenu de la page Web en fonction du contenu de la réponse.

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)//请求处理完毕且状态为成功
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//用response内容来修改DOM中的元素的内容
    }

Parmi eux, il existe deux types de réponse : le type chaîne et le texte XML. Les différentes extractions des deux réponses sont les suivantes :

l'attributresponseText renvoie la réponse sous forme de chaîne :

document.getElementById("myp").innerHTML=xmlhttp.responseText;

Si la réponse du serveur est XML, doit être analysé comme un objet XML, utilisez ResponseXML ：

xmlDoc=xmlhttp.responseXML; //获取服务器响应的XML文本并转换得到XMLDOM对象
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");//通过XMLDOM对象调用方法来获取XML对象中的内容
for (i=0;i<x.length;i++) {
txt=txt + x[i].childNodes[0].nodeValue + "<br>"; }
 
document.getElementById("myDiv").innerHTML=txt;//把获取到的内容通过document对象更新到网页内容去容去

Tutoriels associés : Tutoriel vidéo 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!