简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

亚连
풀어 주다： 2018-05-25 11:47:31
원래의
1834명이 탐색했습니다.

이 글은 주로 서버에서 반환된 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
로그인 후 복사

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

관련 기사:

jquery의 ajax 동기화 및 비동기성에 대한 자세한 설명

Ajax 및 ASP.NET을 구현하는 방법

JQuery ajax가 반환될 때 JSON을 반환하는 방법

위 내용은 서버에서 반환된 XML에 대한 AJAX 처리 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
ajax 方法 服务器
원천：php.cn
이전 기사：AJAX 단순 비동기 통신 예시 분석 다음 기사：JavaScript는 Ajax를 기반으로 하여 새로 고침 없이 웹 페이지에 파일 콘텐츠를 동적으로 표시합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
AJAX, PHP 및 서버 전송 이벤트를 사용하여 OpenAI API에서 데이터 스트리밍 SSE(Server Sent Events)를 사용하여 JavaScript 및 PHP를 사용하는 위 API의 데이터를 브라우저 클라이언트로 스트리밍하려면 어떻게 해...
에서 2023-11-11 12:03:23
0
1
497
AJAX 요청을 사용하여 응답에서 JSON을 구문 분석할 때 발견되지 않은 구문 오류: 예기치 않은 토큰 '<', "<br /> datefrom과 dateto를 사용하여 드롭다운 메뉴를 만든 다음 이 날짜 사이의 날짜를 표시하지만 표시되지 않고 콘솔에 이 오류 메시지가 계속 나타납니다. V...
에서 2023-11-01 10:06:57
0
1
269
페이지를 떠나지 않고 PHP 실행 양식(su라는 이름의 텍스트 영역)과 제출 버튼이 있습니다. 양식이 제출된 후 "에코" 페이지를 새로 고치거나 떠나거나 어떻게든 화면에 반환 내...
에서 2023-10-23 19:05:06
0
1
285
JavaScript를 사용하면 CSS 사용자 정의 속성(CSS 변수라고도 함)에 액세스할 수 있습니다. JavaScript(일반 또는 jQuery)를 사용하여 CSS 사용자 정의 속성(스타일시트에서 var(…)을 통해 액세스되는 속성)을 가져오고 설정하는 방법은 무...
에서 2023-10-20 22:42:04
0
2
244
Vue 2 - 소품 변경에 대한 경고 https://laracasts.com/series/learning-vue-step-by-step 시리즈를 시작했습니다. 다음 오류로 인해 Vue, Laravel...
에서 2023-10-13 10:49:44
0
2
217
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！