집 >웹 프론트엔드 >JS 튜토리얼 >Ajax가 XML 문서를 탐색하는 방법에 대해

Ajax가 XML 문서를 탐색하는 방법에 대해

不言원래의: 2018-07-02 16:33:551093검색

이 글은 XML 문서를 탐색하는 Ajax의 방법을 주로 소개합니다. XML 문서를 탐색하는 Ajax와 결합된 구현 기술을 분석합니다. 필요한 친구들이 참고할 수 있습니다. Ajax의 XML 문서 탐색 방법. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

XMLHttpRequest 개체는 서버 응답에 액세스하는 데 사용할 수 있는 두 가지 속성을 제공합니다. 첫 번째 속성인 responseText는 응답을 문자열로 제공하고, 두 번째 속성인 responseXML은 응답을 XML 객체로 제공합니다. 경고 상자에 응답을 표시하는 것과 같이 간단한 텍스트로 응답을 얻는 데 적합하거나 응답이 성공 또는 실패를 나타내는 단어일 뿐인 경우도 있습니다.

이전 c222f84a5f93b53894445f1a3d7c5284의 예는 서버를 가져오는 것입니다. XMLHttpRequest 객체로부터 응답을 받고 XMLHttpRequest 객체의 responseText 속성을 사용하여 응답을 텍스트로 가져옵니다.

이번에는 XMLHttpRequest 객체의 responseXML 속성을 사용하여 결과를 XML 문서로 가져옵니다. 이러한 방식으로 W3C DOM 메서드를 사용하여 XML 문서를 탐색할 수 있습니다. (이전 기사에서는 DOM에 대해 어느 정도 이야기했기 때문에 여기서는 반복하지 않겠습니다.)

자, 예제를 살펴보겠습니다.

우선 다음과 같은 XML 문서 코드(parseXML.xml)가 있습니다.

parseXML.xml은 다음과 같습니다.

<?xml version="1.0" encoding="UTF-8"?>
<states>
<north>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</north>
<south>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</south>
<east>
<state>New York</state>
<state>North Carolina</state>
<state>Massachusetts</state>
</east>
<west>
<state>California</state>
<state>Oregon</state>
<state>Nevada</state>
</west>
</states>

MyJsp.jsp는 다음과 같습니다.

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP &#39;MyJsp.jsp&#39; starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript">
var flg=false;
var requestType = "";
//得到XMLHttpRequest对象
function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {}
}
}
return xmlreq;
}
function startRequest(requestedList){
requestType=requestedList;
flg=newXMLHttpRequest();
//当XMLHttpRequest对象在请求过程中间状态改变的时候
//回来调用handleStateChange方法
flg.onreadystatechange = handleStateChange;
flg.open("GET", "parseXML.xml", true);
flg.send(null);
}
//处理函数
function handleStateChange(){
if(flg.readyState==4){
if(flg.status==200){
if(requestType=="north"){
listNorthStates();
}else if(requestType=="all"){
listAllStates();
}if(requestType=="south"){
listSouthStates();
}
}
}
}
//用于显示NorthStates方法
function listNorthStates(){
var xmlDoc=flg.responseXML;
var northNode=xmlDoc.getElementsByTagName("north")[0];
var northStates=northNode.getElementsByTagName("state");
outputList("North States",northStates);
}
//用于显示SouthStates方法
function listSouthStates(){
var xmlDoc=flg.responseXML;
var SouthNode=xmlDoc.getElementsByTagName("south")[0];
var SouthStates=SouthNode.getElementsByTagName("state");
outputList("South States",SouthStates);
}
//用于显示AllStates方法
function listAllStates(){
var xmlDoc=flg.responseXML;
var allStates=xmlDoc.getElementsByTagName("state");
outputList("All States in Document", allStates);
}
//输出元素并显示于提示框中
function outputList(title,states){
var out=title;
var currState=null;
for(var i=0;i<states.length;i++){
currState=states;
out=out+"\n-"+currState.childNodes[0].nodeValue;
}
alert(out);
}
</script>
<body>
<form action="#">
<input type="button" value="View All Listed States"
  onclick="startRequest(&#39;all&#39;);"/><br>
<input type="button" value="View All Listed Northern States"
  onclick="startRequest(&#39;north&#39;);"/><br>
<input type="button" value="View All Listed Southern States"
  onclick="startRequest(&#39;south&#39;);"/>
</form>
</body>
</html>

위 내용은 이 글의 전체 내용입니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!

Ajax가 XML 문서를 탐색하는 방법에 대해

관련 기사