• Ajax基本写法


     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>Insert title here</title>
     6 <script>
     7 var xhr=initAjax();
     8 function initAjax()
     9 {
    10     if(window.XMLHttpRequest)
    11     {
    12         return new XMLHttpRequest();
    13     }
    14     else if(window.ActiveXObject)
    15     {
    16         try
    17         {
    18             return new ActiveXObject("Msxml2.XMLHttp");
    19         }
    20         catch(e)
    21         {
    22             try
    23             {
    24                 return new ActiveXObject("Microsoft.XMLHttp");
    25             }
    26             catch(e)
    27             {
    28                 //return undefined
    29                 alert("Your browser doesn't support AJAX!");
    30             }
    31         }
    32     }
    33 }
    34 function showInfo()
    35 {
    36     //var xhr=new ActiveXObject("Msxml2.XMLHttp");
    37     if(xhr!=null)
    38     {
    39         xhr.onreadystatechange=xhrStateChange;
    40         xhr.open("GET","info.xml",true);
    41         xhr.send(null);
    42     }
    43     
    44 }
    45 function xhrStateChange()
    46 {
    47     if(xhr.readyState==4)
    48     {
    49         document.getElementById("infoDiv").innerHTML=xhr.responseText;
    50     }
    51     else if(xhr.readyState==3)
    52     {
    53         document.getElementById("infoDiv").innerHTML="Loading...";
    54     }
    55     
    56 }
    57 </script>
    58 </head>
    59 <body>
    60 <input type="button" value="click me" onclick="showInfo()">
    61 <div id="infoDiv"></div>
    62 </body>
    63 </html>

    initAjax函数实现了对浏览器的兼容(IE5,6), 不过现在ActiveX技术早已过时, 被浏览器默认禁用.

    showInfo函数中将xhrStateChange函数绑定到onreadystatechange事件, 注意这种绑定方式不支持传参(只写函数名不能加括号)!!!而且这句代码写在函数外也是可以的.结果如下

    第49行如果把innerHTML改为innerText, 则将不考虑xml文件中的标签, 内容原样显示, 如下

    另外, xhr除了responseText属性, 还有一个属性:responseXml.

    附readyState的各状态

  • 相关阅读:
    面向对象的三大特性(封装、继承、多态)-----继承
    前端---HTML
    几个排序算法的python实现
    构造方法关键字---this
    构造方法中关键字-- super
    多态(instanceof)
    接口
    抽象
    继承(重写与重载对比)
    数组的逆序
  • 原文地址:https://www.cnblogs.com/wincent98/p/9953257.html
Copyright © 2020-2023  润新知