communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Méthode de traitement AJAX pour XML renvoyé par le serveur

Méthode de traitement AJAX pour XML renvoyé par le serveur

亚连
Libérer： 2018-05-25 11:47:31
original
1925 Les gens l'ont consulté

Cet article présente principalement la méthode de traitement AJAX du XML renvoyé par le serveur. Il analyse les compétences d'implémentation d'Ajax et la méthode de traitement des données XML renvoyées. Les amis dans le besoin peuvent s'y référer

Les exemples de. cet article décrit la méthode de traitement AJAX pour le XML renvoyé par le serveur. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

En AJAX, si le côté serveur renvoie un document XML, il peut obtenir les données XML via l'attribut réponseXML de l'objet asynchrone. Les développeurs peuvent utiliser des méthodes liées au DOM pour le traiter.

Supposons que le document XML renvoyé par le serveur soit le suivant : 

<?xml version="1.0" encoding="gb2312"?>
<list>
 <caption>Member List</caption>
 <member>
  <name>isaac</name>
  <class>W13</class>
  <birth>Jun 24th</birth>
  <constell>Cancer</constell>
  <mobile>1118159</mobile>
 </member>
 <member>
  <name>fresheggs</name>
  <class>W610</class>
  <birth>Nov 5th</birth>
  <constell>Scorpio</constell>
  <mobile>1038818</mobile>
 </member>
 <member>
  <name>girlwing</name>
  <class>W210</class>
  <birth>Sep 16th</birth>
  <constell>Virgo</constell>
  <mobile>1307994</mobile>
 </member>
 <member>
  <name>tastestory</name>
  <class>W15</class>
  <birth>Nov 29th</birth>
  <constell>Sagittarius</constell>
  <mobile>1095245</mobile>
 </member>
 <member>
  <name>lovehate</name>
  <class>W47</class>
  <birth>Sep 5th</birth>
  <constell>Virgo</constell>
  <mobile>6098017</mobile>
 </member>
 <member>
  <name>slepox</name>
  <class>W19</class>
  <birth>Nov 18th</birth>
  <constell>Scorpio</constell>
  <mobile>0658635</mobile>
 </member>
 <member>
  <name>smartlau</name>
  <class>W19</class>
  <birth>Dec 30th</birth>
  <constell>Capricorn</constell>
  <mobile>0006621</mobile>
 </member>
 <member>
  <name>tuonene</name>
  <class>W210</class>
  <birth>Nov 26th</birth>
  <constell>Sagittarius</constell>
  <mobile>0091704</mobile>
 </member>
 <member>
  <name>dovecho</name>
  <class>W19</class>
  <birth>Dec 9th</birth>
  <constell>Sagittarius</constell>
  <mobile>1892013</mobile>
 </member>
 <member>
  <name>shanghen</name>
  <class>W42</class>
  <birth>May 24th</birth>
  <constell>Gemini</constell>
  <mobile>1544254</mobile>
 </member>
 <member>
  <name>venessawj</name>
  <class>W45</class>
  <birth>Apr 1st</birth>
  <constell>Aries</constell>
  <mobile>1523753</mobile>
 </member>
 <member>
  <name>lightyear</name>
  <class>W311</class>
  <birth>Mar 23th</birth>
  <constell>Aries</constell>
  <mobile>1002908</mobile>
 </member>
</list>
Copier après la connexion

Le client obtient les données XML du serveur et le convertit affiché dans le tableau. Le code est le suivant : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>responseXML</title>
<style>
<!--
.datalist{
 border:1px solid #744011; /* 表格边框 */
 font-family:Arial;
 border-collapse:collapse; /* 边框重叠 */
 background-color:#ffd2aa; /* 表格背景色 */
 font-size:14px;
}
.datalist th{
 border:1px solid #744011; /* 行名称边框 */
 background-color:#a16128; /* 行名称背景色 */
 color:#FFFFFF;    /* 行名称颜色 */
 font-weight:bold;
 padding-top:4px; padding-bottom:4px;
 padding-left:12px; padding-right:12px;
 text-align:center;
}
.datalist td{
 border:1px solid #744011; /* 单元格边框 */
 text-align:left;
 padding-top:4px; padding-bottom:4px;
 padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
 background-color:#dca06b; /* 动态变色 */
}
input{ /* 按钮的样式 */
 border:1px solid #744011;
 color:#744011;
}
-->
</style>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
 if(window.ActiveXObject)
  xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
 else if(window.XMLHttpRequest)
  xmlHttp = new XMLHttpRequest();
}
function getXML(addressXML){
 var url = addressXML + "?timestamp=" + new Date();
 createXMLHttpRequest();
 xmlHttp.onreadystatechange = handleStateChange;
 xmlHttp.open("GET",url);
 xmlHttp.send(null);
}
function addTableRow(sName, sClass, sBirth, sConstell, sMobile){
 //表格添加一行的相关操作，可参看7.2.1节
 var oTable = document.getElementById("member");
 var oTr = oTable.insertRow(oTable.rows.length);  
 var aText = new Array();
 aText[0] = document.createTextNode(sName);
 aText[1] = document.createTextNode(sClass);
 aText[2] = document.createTextNode(sBirth);
 aText[3] = document.createTextNode(sConstell);
 aText[4] = document.createTextNode(sMobile);
 for(var i=0;i<aText.length;i++){
  var oTd = oTr.insertCell(i);
  oTd.appendChild(aText[i]);
 }
}
function DrawTable(myXML){
 //用DOM方法操作XML文档
 var oMembers = myXML.getElementsByTagName("member");
 var oMember = "", sName = "", sClass = "", sBirth = "", sConstell = "", sMobile = "";
 for(var i=0;i<oMembers.length;i++){
  oMember = oMembers[i];
  sName = oMember.getElementsByTagName("name")[0].firstChild.nodeValue;
  sClass = oMember.getElementsByTagName("class")[0].firstChild.nodeValue;
  sBirth = oMember.getElementsByTagName("birth")[0].firstChild.nodeValue;
  sConstell = oMember.getElementsByTagName("constell")[0].firstChild.nodeValue;
  sMobile = oMember.getElementsByTagName("mobile")[0].firstChild.nodeValue;
  //添加一行
  addTableRow(sName, sClass, sBirth, sConstell, sMobile);
 }
}
function handleStateChange(){  
 if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
  DrawTable(xmlHttp.responseXML);//responseXML获取到XML文档
}
</script>
</head>
<body>
<input type="button" value="获取XML" onclick="getXML(&#39;9-4.xml&#39;);"><br><br>
<table class="datalist" summary="list of members in EE Studay" id="member">
 <tr>
  <th scope="col">Name</th>
  <th scope="col">Class</th>
  <th scope="col">Birthday</th>
  <th scope="col">Constellation</th>
  <th scope="col">Mobile</th>
 </tr>
</table>
</body>
</html>
Copier après la connexion

On peut voir que le code pour obtenir le fichier XML sur le client est le suivant : 

<input type="button" value="获取XML" onclick="getXML(&#39;9-4.xml&#39;);">
Copier après la connexion

En d'autres termes, les données XML sont obtenues directement. Dans le développement réel, le travail de renvoi des données XML est généré dynamiquement via du code côté serveur (tel que ASP.NET, JSP, etc.). En d'autres termes, l'adresse du fichier dans getXML('...') doit être le suffixe d'une page dynamique telle que .aspx ou .jsp.

Utilisez le framework jQuery pour implémenter

Si vous utilisez le framework jQuery sur le client, implémentez AJAX pour obtenir les données XML côté serveur.

Le code est le suivant : 



  demo 
 
 
 


 <input type="button" value="获取XML" onclick="getXML(&#39;9-4.xml&#39;);">
 

 

 

 Name
 Class
 Birthday
 Constellation
 Mobile
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde. à l'avenir.

Articles connexes :

Explication détaillée de la synchronisation ajax et de l'asynchronisme dans jquery

Comment implémenter ASP.NET et Ajax

Comment JQuery ajax renvoie JSON

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!

Étiquettes associées：
ajax 方法 服务器
source：php.cn
Article précédent：Analyse d'un exemple de communication asynchrone simple AJAX Article suivant：JavaScript est basé sur Ajax pour afficher dynamiquement le contenu du fichier sur la page Web sans actualisation
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Afficher les fichiers PDF AWS en mode Bootstrap dans Laravel J'ai téléchargé l'URL AWS comme https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6...
Depuis 2024-04-04 22:16:18
0
1
1450
Titre révisé : Calculer le total en fonction de la sélection d'une case à cocher Je développe une application simple de suivi financier. Dans l'application, il y a un tabl...
Depuis 2024-04-04 13:45:50
0
1
3465
Générer du contenu à l'aide d'Ajax - le défilement jusqu'à Id ne fonctionne pas Je génère du contenu de page basé sur des données obtenues via ajax. Le problème que j'ai ...
Depuis 2024-04-04 09:29:39
0
1
397
Comment passer plusieurs listes d'ajax à Django J'ai un problème, je veux obtenir toutes les données de la liste, donc je veux parcourir c...
Depuis 2024-04-03 23:20:06
0
1
362
Téléchargez plusieurs fichiers image dans CodeIgniter en utilisant Ajax et PHP J'ai du mal à télécharger plusieurs fichiers image côté serveur. Ce serait formidable si q...
Depuis 2024-04-03 22:35:03
0
1
318
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal