Ajax补充(一)

继之前学习的认识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 = Asynchronous JavaScript and XML(异步的 JavaScript 和 X...
    鹿守心畔光阅读 6,960评论 7 135
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,369评论 0 7
  • Ajax 模块也是经常会用到的模块,Ajax 模块中包含了 jsonp 的现实,和 XMLHttpRequest ...
    对角另一面阅读 618评论 0 1
  • 本文详细介绍了 XMLHttpRequest 相关知识,涉及内容: AJAX、XMLHTTP、XMLHttpReq...
    semlinker阅读 13,834评论 2 18
  • 五十三:请解释 JavaScript 中 this 是如何工作的。1.方法调用模式当一个函数被保存为一个对象的属性...
    Arno_z阅读 618评论 0 2