ajax初级教程之获取博文列表

 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 http://www.w3.org/1999/xhtml">
    
        
        
        
    
    
        
    
 

function getBlogTitle(){
    //根据浏览器类型创建xmlHttpRequest对象
    var xmlHttp;
    if(window.XMLHttpRequest){
        //ie7、火狐、谷歌等浏览器
        xmlHttp = new XMLHttpRequest();
    }else{
        //ie5、ie6浏览器
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //设置异步交互完成后的回调函数
    //function(){}为一个匿名函数，这个过程就是把函数的地址传给XMLHttpRequest对象的onreadystatechange属性
    xmlHttp.onreadystatechange=function(){
      //正常情况下status值应该是200，但本地测试无论成功失败返回的都是0
    if(xmlHttp.readyState == 4 && xmlHttp.status == 0){
      //接受xml格式的返回数据，接收文本格式的数据为：xmlHttp.responseText();
      var requestXML = xmlHttp.responseXML;
      //获取xml中的内容部分
      var blogContent = requestXML.getElementById("feedContent");
      //获取内容中的h3标题。注意blogTitles将是一个数组，由于javascript是弱类型语言，因此不必指明
      var blogTitles = blogContent.getElementsByTagName("h3");
      //获取html页面中的ul标签对象
      var ulObj = document.getElementById("blogTitleList");
      //用来临时存放博客标题
      var tempTitle;
      //遍历blogTitles数组，获取所有的博客标题
      for(i=0;i         //获取title元素的值
        tempTitle = blogTitles[i].firstChild.childNodes[0].nodeValue;
        //将title值插入到界面的ul标签中
        ulObj.innerHTML += "

" + tempTitle + "

";
      }
        }
    };
    //构造交互参数
    //第一个参数是指GET方式提交还是POST方式
    //第二个参数是提交的URL，它可以是一个文本文件(*.xml)、脚本文件(*.aspx)等。
    //第三个参数表示是否异步通信，ture表示异步。
    xmlHttp.open("GET","rss.xml",true);
    //提交请求
    xmlHttp.send();
}

 

         上边的代码注释非常详细，相信读者能够领会这个过程。

         补充说明：

         l  注意本例中，在设置XMLHttpRequest对象的onreadystatechange属性时，在回调函数中应该判断服务器是否响应完成，其中readyState值为4表示响应完成，status值为200表示请求成功，但由于本例是在本地演示的，并没有搭建服务器环境，因此status的值总是0。

         l  所谓跨域访问，即在某个服务器中通过javascript脚本请求其他服务器，所有类似这样的请求都叫跨域。跨域访问会直接被浏览器拒绝。跨域关键问题在于是浏览器拒绝了请求，是javascript权限不足引起的，而不是说XMLHttpRequest对象没有跨域访问的功能，XMLHttpRequest对象无所谓域，假如把XMLHttpRequest对象写在程序中(包括C/S、B/S程序)而不是脚本中，可以随意访问服务器，甚至可以模拟手工访问。关于如何解决跨域访问问题，请读者自行google。