ホームページ >ウェブフロントエンド >jsチュートリアル >AjaxでXML文書を走査する方法について

AjaxでXML文書を走査する方法について

不言オリジナル: 2018-07-02 16:33:551100ブラウズ

この記事では、Ajax による XML ドキュメントの走査方法を主に紹介します。JSP と XML ドキュメントの走査を組み合わせた実装手法を分析します。必要な方は参考にしてください。 XML ドキュメントを走査する ajax メソッド。皆さんの参考に共有してください。具体的な分析は次のとおりです。

XMLHttpRequest オブジェクトは、サーバー応答にアクセスするために使用できる 2 つのプロパティを提供します。最初の属性、responseText は応答を文字列として提供し、2 番目の属性、responseXML は応答を XML オブジェクトとして提供します。いくつかの単純な使用例は、アラートボックスに応答を表示する、または応答が成功または失敗を示す単なる単語であるなど、単純なテキストで応答を取得するのに適しています。前の 29bb2a4ff9e1fa43c02d9ac8ec8d5e24 の例は、サーバーを取得することです。 XMLHttpRequest オブジェクトから応答を取得し、XMLHttpRequest オブジェクトの responseText プロパティを使用して応答をテキストとして取得します。

今回は、XMLHttpRequest オブジェクトの responseXML 属性を使用して結果を XML ドキュメントとして取得します。これにより、W3C DOM メソッドを使用して XML ドキュメントを走査できます。 (前の記事で DOM について多少なりとも説明したので、ここでは繰り返しません)

OK、例を見てみましょう

まず、次のような 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 中国語 Web サイトに注目してください。

AjaxでXML文書を走査する方法について

関連記事