zoukankan      html  css  js  c++  java
  • 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>


  • 相关阅读:
    CentOS7安装minio
    xshell连接虚拟机Connection failed
    Mysql时间加减函数
    mysql存储过程模板
    Activiti实现会签功能
    2018考研复试流程
    C编程经验总结5(剧终)
    《数据结构总结》
    《关于安卓和IOS开发》
    番外特别篇之 为什么我不建议你直接使用UIImage传值?--从一个诡异的相册九图连读崩溃bug谈起
  • 原文地址:https://www.cnblogs.com/kaixinmenghuan/p/1638233.html
Copyright © 2011-2022 走看看