Méthode Ajax pour parcourir un document XML-js tutoriel-php.cn

Méthode Ajax pour parcourir un document XML

亚连

Libérer： 2018-05-25 10:34:59

original

1697 Les gens l'ont consulté

Cet article présente principalement la méthode de traversée des documents XML en ajax. Il analyse les techniques d'implémentation de jsp combinées avec la traversée des documents XML en ajax à travers des exemples. Il a une certaine valeur de référence.

Les exemples de cet article sont décrits la méthode Ajax pour parcourir les documents XML. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

L'objet XMLHttpRequest fournit deux attributs qui peuvent être utilisés pour accéder à la réponse du serveur. Le premier attribut, ResponseText, fournit la réponse sous forme de chaîne et le deuxième attribut, ResponseXML, fournit la réponse sous forme d'objet XML. Certains cas d'utilisation simples conviennent pour obtenir la réponse par un texte simple, comme l'affichage de la réponse dans une boîte d'alerte, ou la réponse est simplement un mot indiquant le succès ou l'échec.

L'exemple du à partir de l'objet XMLHttpRequest Le serveur répond et obtient la réponse sous forme de texte à l'aide de la propriété ResponseText de l'objet XMLHttpRequest.
Cette fois, nous utiliserons l'attribut réponseXML de l'objet XMLHttpRequest pour obtenir le résultat sous forme de document XML. De cette façon, nous pouvons utiliser la méthode DOM du W3C pour parcourir le document XML. (L'article précédent parlait plus ou moins de DOM, donc je ne le répéterai pas ici)

OK, regardons l'exemple.

Tout d'abord, il y a un morceau de XML code du document (parseXML.xml) comme suit :

parseXML.xml est le suivant :

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

Copier après la connexion

MyJsp.jsp est le suivant :

<%@ 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>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.