Ajax简单应用示例： XMLHttpRequest对象实例化方式及调用

来源：互联网发布：软件测试因果图编辑：程序博客网时间：2024/06/07 17:45

这里要做的是使用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);     }     elsealert("Error");   }    }         </script>  </head>    <body>    This is my HTML page. <br>    <input name="btn" type="button" id="btn"     onclick="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);       }     elsealert("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