recherche

Maison >interface Web >js tutoriel >À propos de la méthode de traversée ajax du document XML

À propos de la méthode de traversée ajax du document XML

不言
不言original
2018-07-02 16:33:551092parcourir

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 a1af4f8cd0123a4412c602fcaafa420d à 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>

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>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour en savoir plus. contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Présentation des requêtes d'obtention et de publication Ajax

AJAX utilise la publication pour envoyer des données au format XML et acceptez-le Données

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction aux requêtes d'obtention et de publication AjaxArticle suivant：Introduction aux requêtes d'obtention et de publication Ajax

Articles Liés

Voir plus