이 글은 XML 문서를 탐색하는 Ajax의 방법을 주로 소개합니다. XML 문서를 탐색하는 Ajax와 결합된 구현 기술을 분석합니다. 필요한 친구들이 참고할 수 있습니다. Ajax의 XML 문서 탐색 방법. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
XMLHttpRequest 개체는 서버 응답에 액세스하는 데 사용할 수 있는 두 가지 속성을 제공합니다. 첫 번째 속성인 responseText는 응답을 문자열로 제공하고, 두 번째 속성인 responseXML은 응답을 XML 객체로 제공합니다. 경고 상자에 응답을 표시하는 것과 같이 간단한 텍스트로 응답을 얻는 데 적합하거나 응답이 성공 또는 실패를 나타내는 단어일 뿐인 경우도 있습니다.
이전이번에는 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 'MyJsp.jsp' 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('all');"/><br> <input type="button" value="View All Listed Northern States" onclick="startRequest('north');"/><br> <input type="button" value="View All Listed Southern States" onclick="startRequest('south');"/> </form> </body> </html>
위 내용은 이 글의 전체 내용입니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!
관련 권장사항:
Ajax get 및 post 요청 소개AJAX는 post를 사용하여 xml 형식의 데이터를 전송하여 데이터를 받습니다.위 내용은 Ajax가 XML 문서를 탐색하는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!