서버에서 반환된 XML에 대한 AJAX 처리 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

亚连

May 25, 2018 am 11:47 AM

ajax 방법 섬기는 사람

이 글은 주로 서버에서 반환된 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

로그인 후 복사

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

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7681

자바 튜토리얼

1639

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1286

PHP 튜토리얼

1229

Related knowledge

Tomato Free Novel 앱에서 소설 쓰는 방법 Tomato Novel에서 소설 쓰는 방법에 대한 튜토리얼을 공유하세요. Mar 28, 2024 pm 12:50 PM

Tomato Novel은 매우 인기 있는 소설 읽기 소프트웨어입니다. 우리는 종종 Tomato Novel에서 읽을 새로운 소설과 만화를 가지고 있습니다. 많은 친구들도 용돈을 벌고 소설의 내용을 편집하고 싶어합니다. 글로 쓰고 싶은데, 그 안에 소설을 어떻게 쓰는지 친구들도 모르니까, 소설 쓰는 방법에 대한 소개를 함께 살펴보는 시간을 가져보겠습니다. 토마토 소설을 사용하여 소설을 쓰는 방법에 대한 튜토리얼을 공유하세요. 1. 먼저 휴대폰에서 토마토 무료 소설 앱을 열고 개인 센터 - 작가 센터를 클릭하세요. 2. 토마토 작가 도우미 페이지로 이동하여 새로 만들기를 클릭하세요. 소설의 끝 부분에 예약하십시오.

컬러풀 마더보드에서 바이오스로 진입하는 방법은 무엇입니까? 두 가지 방법을 가르쳐주세요. Mar 13, 2024 pm 06:01 PM

컬러풀한 마더보드는 중국 국내 시장에서 높은 인기와 시장 점유율을 누리고 있지만 일부 컬러풀한 마더보드 사용자는 아직도 설정을 위해 BIOS에 진입하는 방법을 모르시나요? 이러한 상황에 대응하여 편집자는 다채로운 마더보드 BIOS에 들어갈 수 있는 두 가지 방법을 특별히 가져왔습니다. 방법 1: U 디스크 시작 단축키를 사용하여 U 디스크 설치 시스템에 직접 들어갑니다. 한 번의 클릭으로 U 디스크를 시작하는 Colour 마더보드의 단축키는 ESC 또는 F11입니다. 먼저 Black Shark 설치 마스터를 사용하여 Black을 만듭니다. Shark U 디스크 부팅 디스크를 켠 후 컴퓨터를 켜면 시작 화면이 나타나면 키보드의 ESC 또는 F11 키를 계속 눌러 시작 항목을 순차적으로 선택할 수 있는 창으로 커서를 "USB. "가 표시된 후

WeChat에서 삭제된 연락처를 복구하는 방법(삭제된 연락처를 복구하는 방법을 알려주는 간단한 튜토리얼) May 01, 2024 pm 12:01 PM

불행하게도 사람들은 어떤 이유로든 실수로 특정 연락처를 삭제하는 경우가 많습니다. WeChat은 널리 사용되는 소셜 소프트웨어입니다. 사용자가 이 문제를 해결할 수 있도록 이 문서에서는 삭제된 연락처를 간단한 방법으로 검색하는 방법을 소개합니다. 1. WeChat 연락처 삭제 메커니즘을 이해하면 삭제된 연락처를 검색할 수 있습니다. WeChat의 연락처 삭제 메커니즘은 연락처를 주소록에서 제거하지만 완전히 삭제하지는 않습니다. 2. WeChat에 내장된 "연락처 복구" 기능을 사용하세요. WeChat은 "연락처 복구"를 제공하여 시간과 에너지를 절약합니다. 사용자는 이 기능을 통해 이전에 삭제한 연락처를 빠르게 검색할 수 있습니다. 3. WeChat 설정 페이지에 들어가서 오른쪽 하단을 클릭하고 WeChat 애플리케이션 "나"를 열고 오른쪽 상단에 있는 설정 아이콘을 클릭하여 설정 페이지로 들어갑니다.

휴대폰에서 글꼴 크기를 설정하는 방법(휴대폰에서 글꼴 크기를 쉽게 조정) May 07, 2024 pm 03:34 PM

휴대폰이 사람들의 일상 생활에서 중요한 도구가 되면서 글꼴 크기 설정은 중요한 개인화 요구 사항이 되었습니다. 다양한 사용자의 요구를 충족하기 위해 이 기사에서는 간단한 조작을 통해 휴대폰 사용 경험을 개선하고 휴대폰의 글꼴 크기를 조정하는 방법을 소개합니다. 휴대폰의 글꼴 크기를 조정해야 하는 이유 - 글꼴 크기를 조정하면 텍스트가 더 명확하고 읽기 쉬워집니다. - 다양한 연령대의 사용자의 읽기 요구에 적합 - 시력이 좋지 않은 사용자가 글꼴 크기를 사용하는 것이 편리합니다. 휴대폰 시스템의 설정 기능 - 시스템 설정 인터페이스에 들어가는 방법 - 찾기에서 설정 인터페이스의 "디스플레이" 옵션을 입력합니다. - "글꼴 크기" 옵션을 찾아 타사를 통해 글꼴 크기를 조정합니다. 애플리케이션 - 글꼴 크기 조정을 지원하는 애플리케이션 다운로드 및 설치 - 애플리케이션을 열고 관련 설정 인터페이스로 진입 - 개인에 따라

Dnsmasq를 DHCP 릴레이 서버로 구성하는 방법 Mar 21, 2024 am 08:50 AM

DHCP 릴레이의 역할은 두 서버가 서로 다른 서브넷에 있더라도 수신된 DHCP 패킷을 네트워크의 다른 DHCP 서버로 전달하는 것입니다. DHCP 릴레이를 사용하면 네트워크 센터에 중앙 집중식 DHCP 서버를 배포하고 이를 사용하여 모든 네트워크 서브넷/VLAN에 IP 주소를 동적으로 할당할 수 있습니다. Dnsmasq는 네트워크에서 동적 호스트 구성을 관리하는 데 도움이 되도록 DHCP 릴레이 서버로 구성할 수 있는 일반적으로 사용되는 DNS 및 DHCP 프로토콜 서버입니다. 이 기사에서는 dnsmasq를 DHCP 릴레이 서버로 구성하는 방법을 보여줍니다. 내용 항목: 네트워크 토폴로지 중앙 집중식 DHCP 서버의 DHCP 릴레이 D에서 고정 IP 주소 구성

모바일 드래곤 알 부화의 비밀이 공개됩니다(모바일 드래곤 알을 성공적으로 부화하는 방법을 단계별로 알려드립니다) May 04, 2024 pm 06:01 PM

모바일 게임은 기술의 발전과 함께 사람들의 삶에 없어서는 안될 부분이 되었습니다. 귀여운 드래곤 알 이미지와 흥미로운 부화 과정으로 많은 플레이어들의 관심을 끌었으며, 특히 주목을 받은 게임 중 하나가 드래곤 알 모바일 버전이다. 플레이어가 게임에서 자신만의 드래곤을 더 잘 육성하고 성장시킬 수 있도록 이 글에서는 모바일 버전에서 드래곤 알을 부화시키는 방법을 소개합니다. 1. 적절한 유형의 드래곤 알을 선택하십시오. 플레이어는 게임에서 제공되는 다양한 유형의 드래곤 알 속성과 능력을 기반으로 자신이 좋아하고 적합한 드래곤 알 유형을 신중하게 선택해야 합니다. 2. 부화기의 레벨을 업그레이드하세요. 플레이어는 작업을 완료하고 소품을 수집하여 부화기의 레벨을 향상시켜야 합니다. 부화기의 레벨에 따라 부화 속도와 부화 성공률이 결정됩니다. 3. 플레이어가 게임에 참여하는데 필요한 자원을 수집하세요.

빨리 익히세요: Huawei 휴대폰에서 두 개의 WeChat 계정을 여는 방법 공개! Mar 23, 2024 am 10:42 AM

현대 사회에서 휴대폰은 우리 삶에 없어서는 안 될 필수품이 되었습니다. 일상적인 의사소통, 업무, 생활을 위한 중요한 도구로 WeChat이 자주 사용됩니다. 그러나 서로 다른 거래를 처리할 때 두 개의 WeChat 계정을 분리해야 할 수도 있습니다. 이를 위해서는 휴대폰이 동시에 두 개의 WeChat 계정에 로그인하는 기능을 지원해야 합니다. 국내 유명 브랜드인 화웨이 휴대폰은 많은 사람들이 사용하고 있습니다. 그렇다면 화웨이 휴대폰에서 위챗 계정을 2개 개설하는 방법은 무엇일까요? 이 방법의 비밀을 공개해보겠습니다. 우선, Huawei 휴대폰에서 두 개의 WeChat 계정을 동시에 사용해야 합니다.

에픽서버가 오프라인 상태일 때 게임에 접속할 수 없으면 어떻게 해야 하나요? 에픽게임즈가 오프라인으로 게임에 입장할 수 없는 이유에 대한 해결책 Mar 13, 2024 pm 04:40 PM

에픽서버가 오프라인 상태일 때 게임에 접속할 수 없으면 어떻게 해야 하나요? 이 문제는 많은 친구들이 겪었을 것입니다. 이 메시지가 나타나면 정품 게임을 시작할 수 없습니다. 이 문제는 일반적으로 네트워크 및 보안 소프트웨어의 간섭으로 인해 발생합니다. 이 문제의 편집자는 어떻게 설명합니까? 저는 여러분과 솔루션을 공유하고 싶습니다. 오늘의 소프트웨어 튜토리얼이 문제 해결에 도움이 되기를 바랍니다. 에픽 서버가 오프라인일 때 게임에 들어갈 수 없는 경우 해결 방법: 1. 게임 플랫폼과 보안 소프트웨어의 방해를 받을 수 있습니다. 2. 두 번째는 네트워크 변동이 너무 심하다는 것입니다. 라우터를 다시 시작하여 작동하는지 확인해보세요. 조건이 괜찮다면 5g 모바일 네트워크를 사용해 작동해 보세요. 3. 그럼 더 있을 수도 있겠네요

See all articles

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

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제