这里要做的是使用XMLHttpRequest对象读取XML文件。
a.xml文件内容如下:(其实是一个HTML格式的XML文件)
<html>
<head>
<title>Hello, Ajax!</title>
</head>
<body>I am there.</body>
</html>
MyHtml.html文件内容如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyAjax</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="javascript" type="text/javascript">
/*
* 实例化一个HttpRequest对象
*/
function getHttpRequest()
{
var xmlrequest = false;
//对于Firefox和Opera等浏览器
if (window.XMLHttpRequest) {
xmlrequest = new XMLHttpRequest();
//有此版本的Mozilla浏览器在处理服务器返回的包含XML mime-type头部信息内容时会出错。
//所以,为了确保返回内容是text/xml信息,需要包含下面的语句。
if(xmlrequest.overrideMimeType)
{
xmlrequest.overrideMimeType("text/xml");
}
}
else //对于IE浏览器
{
//将IE的不同XMLHttp实现声明数组
var MSXML=new Array('Msxml2.XMLHTTP.7.0',
'Msxml2.XMLHTTP.6.0',
'Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP');
//依次对每个XMLHTTP实现创建XMLHttpRequest对象
for(var i=0; i<MSXML.length; i++)
{
try
{
xmlrequest=new ActiveXObject(MSXML[i]);
break;
}
catch (ex) {
}
}
}
return xmlrequest;
}
/*
* 使用一个已经实例化HttpRequest的对象执行GET请求
*/
var request;
function processRequest(url,processMethod)
{
request = getHttpRequest();
if(request)
{
request.onreadystatechange = processMethod;
request.open("GET",url,true);//第3个参数设置为true时将发生异步调用 ,false时为同步调用。
request.send(null);
}
}
/*
* GET请求时执行的详细方法。【多个不同的GET请求可以定制多个方法】
*/
function processMethod1()
{
if(request.readyState == 4){
if(request.status == 200){
var xmlObj = request.responseXML;//获得XML对象
//var titlee = xmlObj.getElementsByTagName("title")[0].text 只兼容IE
//var titlee = xmlObj.getElementsByTagName("title")[0].textContent 只兼容FireFox
var titlee = xmlObj.getElementsByTagName("title")[0].childNodes[0].nodeValue;
alert(titlee);
}
else
alert("Error");
}
}
</script>
</head>
<body>
This is my HTML page. <br>
<input name="btn" type="button" id="btn"
οnclick="processRequest('a.xml',processMethod1);" value="弹出消息" size=25px/>
</body>
</html>
修改上面的processRequest()方法,可以更直接调用XMLHttpRequest对象,但不灵活。代码如下:
/*
* 使用一个已经实例化HttpRequest的对象执行GET请求
*/
var request;
function processRequest()
{
request = getHttpRequest();
if(request)
{
request.onreadystatechange = function(){ //在这里直接嵌入执行方法
if(request.readyState == 4){
if(request.status == 200){
var xmlObj = request.responseXML;//获得XML对象
var titlee = xmlObj.getElementsByTagName("title")[0].childNodes[0].nodeValue;
alert(titlee);
}
else
alert("Error");
}
};
request.open("GET","a.xml",true);//第3个参数设置为true时将发生异步调用 ,false时为同步调用。
request.send(null);
}
}
本文参考自:
《JSP宝典》邹竹彪
http://xplq.iteye.com/blog/197522
http://www.cnblogs.com/sunbett/archive/2010/10/12/1848891.html
http://blog.csdn.net/bianzhiqi/article/details/4640700