집 > 기사 > 웹 프론트엔드 > 서버에서 반환된 XML에 대한 AJAX 처리 방법

서버에서 반환된 XML에 대한 AJAX 처리 방법

亚连원래의: 2018-05-25 11:47:311882검색

이 글은 주로 서버에서 반환된 XML의 AJAX 처리 방법을 소개하며, Ajax의 구현 기술과 XML 반환 데이터의 처리 방법을 예시로 분석합니다.

이 글에서는 그 방법을 참고할 수 있습니다. 처리 방법과 함께 서버에서 XML을 반환하는 AJAX. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

AJAX에서 서버측이 XML 문서를 반환하면 비동기 객체의 responseXML 속성을 통해 XML 데이터를 얻을 수 있습니다. 개발자는 DOM 관련 메소드를 사용하여 이를 처리할 수 있습니다.

서버에서 반환된 XML 문서가 다음과 같다고 가정합니다.

<?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>

클라이언트는 서버에서 XML 데이터를 가져와 테이블에 표시합니다.

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

클라이언트에서 XML 파일을 가져오는 코드는 다음과 같다는 것을 알 수 있습니다.

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

즉, XML 데이터를 직접 가져옵니다. 실제 개발에서는 XML 데이터를 반환하는 작업이 서버측(예: ASP.NET, JSP 등) 코드를 통해 동적으로 생성됩니다. 즉, getXML('...')의 파일 주소는 .aspx 또는 .jsp와 같은 동적 페이지의 접미사여야 합니다.

jQuery 프레임워크를 사용하여 구현

클라이언트 측에서 jQuery 프레임워크를 사용하는 경우 AJAX를 구현하여 서버 측에서 XML 데이터를 가져옵니다.

코드는 다음과 같습니다.



  demo 
 
 
 


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

 
 
 Name
 Class
 Birthday
 Constellation
 Mobile

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

서버에서 반환된 XML에 대한 AJAX 처리 방법

관련 기사