在上一章中,简单介绍了Ajax如何获得responseText字符串形式的响应数据,但在web开发中,很多情况下还需要获得responseXML形式的响应数据。
通过一个小例子来看具体代码,如下图:
1.0 date.xml:
<?xml version="1.0" encoding="UTF-8"?>
<date>
<day>
<hh>今天是十月三十一号</hh>
<mm>周六</mm>
</day>
<day>
<hh>明天是十一月一号</hh>
<mm>周天</mm>
</day>
<day>
<hh>后天又要上课了!</hh>
<mm>星期一</mm>
</day>
</date>
2.0 date.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax练习</title>
<script type="text/javascript"> var xmlHttp; var x,xx; var txt = ""; //根据不同浏览器选择相对应的创建XMLHttpRequest对象的方式 function getXMLHttpRequest() { if(window.XMLHttpRequest) { //如果浏览器是 :Firefox、 Chrome、 Opera、 IE7及以上 xmlHttp = new XMLHttpRequest(); } else { //如果浏览器是 :IE5、 IE6等老版本浏览器 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } //事件处理 function hoho() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { //得到所有day标签,存储在x里 x = xmlHttp.responseXML.documentElement.getElementsByTagName("day"); for(var i=0; i<x.length; i++) { //获取mm标签,存储在xx里 xx = x[i].getElementsByTagName("mm"); //得到标签里的值 txt += xx[0].firstChild.nodeValue; } document.getElementById("div1").innerHTML = txt; } } } //主方法 function loadXml() { getXMLHttpRequest(); //取得XMLHttpRequest对象 xmlHttp.onreadystatechange = hoho; //监听onreadystatechange属性值的变化 xmlHttp.open("post","date.xml",true); //规定请求类型、请求文件、是否异步 xmlHttp.send(); //发送请求 } </script>
</head>
<body>
<div id="div1">日期显示:</div>
<hr>
<input type="button" value="点击" onclick="loadXml()">
</body>
</html>