Ajax补充(一)

作者: 蚊子简叔 | 来源:发表于2016-10-17 11:58 被阅读0次

    继之前学习的认识Ajax相关基础内容,今天将做一些补充学习。

    (一)onreadystatechange事件的补充

    什么情况下会产生onreadystatechange事件呢?
    1、每当readyState改变是,就会触发onreadystatechange事件。
    2、而readyState存在于XMLHttpRequest对象中。
    3、在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
    4、当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
    相关代码如下:

    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readystate ==4 && xmlhttp.status == 200){
          document.getElementById(xxx).innerHTML =xmlhttp. responseText;
        }
    }
    
    (二)Ajax中使用回调函数

    为什么?
    如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
    使用回调函数的代码:

    //例子
    <!doctype html>
    <html>
    <head>
        <meta charset = "utf-8">
        <title>用回调函数写Ajax</title>    
    </head>
    <body>
        <div id="myText">使用Ajax被修改的内容</div>
        <input type="button" onclick="myfunction()"  value="点击修改">
        <script type="text/javascript">
              var xmlhttp;
              、、该函数可以重复多用。把变化的东西用参数形式传进来
              function loadinformation(url,func){
                  if(window.XMLHttpRequest){
                      xmlhttp =new XMLHttpRequest();
                  }else{
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                  }
                xmlhttp.onreadystatechange =func;
                open("GET",a,true);
                send();
                }
              }
              function myfunction(){
                    //用户通过点击事件调用该函数,函数中的函数以参数形式传入。
                    loadinformation(xxxx,function(){
                      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                      document.getElementById("myText").innerHTML =  xmlhttp.responseText;
                    });           
              }
        </script>
    </body>
    </html>
    

    补充什么是回调函数:函数以一种参数的形式传递到另一函数。

    后续将会补充一下四点:

    (三)Ajax的ASP/PHP实例
    (四)Ajax的数据库
    (五)Ajax中的xml
    (六)JQuery中的Ajax

    相关文章

      网友评论

        本文标题:Ajax补充(一)

        本文链接:https://www.haomeiwen.com/subject/wqmayttx.html