Ajax中用XMLHTTP的GET方法

最近刚学了一些关于Ajax的知识来论坛上总结一下,欢迎大家批评指正!!

使用Ajax实现网站的异步刷新功能,貌似是使用javascript 通过XMLHTTP 对象实现数据访问后台数据,当其调用后台数据的时候,使用后台准备好的XML数据源,或者从数据库传来的数据拼成XML 文件形式,然后返回给前天的JS脚本,添加到客户端!(我个人是这么认为的,当然还可以使用其他形式)

下面举个简单例子,作为我学习的总结,也希望有能够给有希望的朋友一点帮助吧!

  <script language="javascript" type="text/javascript">
        var xmlHttp;
        var requestInfo;
        //创建XMLHTTP对象,判断浏览器是IE还是其他浏览器
        function createXMLHttp()
        {   //IE
            if(window.ActiveXObject)
            {
                return new ActiveXObject("Microsoft.XMLHttp");
            }
            //其他遵循W3C标注的浏览器
            if(window.XMLHttpRequest)
            {
                return new XMLHttpRequest();
            }
        }
        //点击button按钮事件,出发getBook()事件
        function getBook(obj)
        {
            requestInfo=obj;
            //调用createXMLHttp创建xmlHttp对象
            xmlHttp=createXMLHttp();
            //默认使用异步回发状态是TRUE,此时与服务器通讯有5状态
            xmlHttp.onreadystatechange=changeState;
            //通过GET方法发送请求道服务器 读取Books.xml数据,这里采用的是相对路径
            xmlHttp.open("GET","Books.xml",true)
            //在使用GET方法的时候.send方法法的数据类型为NULL ,具体参见Http通讯协议
            xmlHttp.send(null);
        }
        //在与服务器通讯过程中的5种状态
        function changeState()
        {
            if(xmlHttp.readyState==4) //当xmlHttp.readyState=4的时候说明通信完毕,
            {
                if(xmlHttp.status==200)//虽然通讯完毕,但是还要考虑 请求的服务器页面是否存在,xmlHttp.status=200表示OK了 页面存在
                {
                    //调用ReadXML方法 获取数据
                    ReadXML(requestInfo);
                }
            }
           
        }
        function ReadXML(requestInfo)
        {  
            //获取文档对象实例,通过xmlHttp.responseXML方法;
             var xmlDom= xmlHttp.responseXML;
             //判断请求的条件
            if(requestInfo=="book")
            {
                //获得xml文件第一本书
               var xnode=xmlDom.documentElement.getElementsByTagName("book")[0];
               //虽然可以使用很多方法的道数据的文本,但是xml类型是跨平台的,所以这里尽量获取每个节点的xml数据
               var result=xnode.attributes[0].value+"\n作者:"+xnode.firstChild.childNodes[0].xml+"\n出版社:"+xnode.selectNodes("publisher")[0].firstChild.xml+"\n价格:"+xnode.selectNodes("price")[0].childNodes[0].xml;
               alert(result);
               //得到页面要插入的DIV的节点
               var d=document.getElementById("Book");
               //清空一下DIV 获取还有更好的方法
               d.innerHTML="";
               var txtNode=document.createTextNode(result);
               //插入文本节点
               d.appendChild(txtNode);
            }
            if(requestInfo=="Books")
            { 
               var xnode=xmlDom.documentElement;
               var d=document.getElementById("Book");
               d.innerHTML="";
               //将根节点下的所有节点直接赋值给DIV的 innerHTML
               d.innerHTML=xnode.xml;
            
            }
        }
    </script>

//HTML部分

<body style="left:300px; top:200px;">
    <input id="Button1" type="button" value="firstBook" onclick="getBook('book');" />
    <br />
    <input id="Button2" type="button" value="allBooks" onclick="getBook('Books')" />
   
       <div id="Book">
       
       </div>
</body>


原文地址:https://www.cnblogs.com/kaixinmenghuan/p/1638233.html