1、onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
status

200: "OK"

404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function loadXMLDoc()
  5. {
  6. var xmlhttp;
  7. if (window.XMLHttpRequest)
  8.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  9.   xmlhttp=new XMLHttpRequest();
  10.   }
  11. else
  12.   {// code for IE6, IE5
  13.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  14.   }
  15. xmlhttp.onreadystatechange=function()
  16.   {
  17.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  18.     {
  19.     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  20.     }
  21.   }
  22. xmlhttp.open("GET","/ajax/test1.txt",true);
  23. xmlhttp.send();
  24. }
  25. </script>
  26. </head>
  27. <body>
  28.  
  29. <div id="myDiv"><h2>Let AJAX change this text</h2></div>
  30. <button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
  31.  
  32. </body>
  33. </html>

注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

2、使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var xmlhttp;
  5. function loadXMLDoc(url,cfunc)
  6. {
  7. if (window.XMLHttpRequest)
  8.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  9.   xmlhttp=new XMLHttpRequest();
  10.   }
  11. else
  12.   {// code for IE6, IE5
  13.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  14.   }
  15. xmlhttp.onreadystatechange=cfunc;
  16. xmlhttp.open("GET",url,true);
  17. xmlhttp.send();
  18. }
  19. function myFunction()
  20. {
  21. loadXMLDoc("/ajax/test1.txt",function()
  22.   {
  23.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  24.     {
  25.     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  26.     }
  27.   });
  28. }
  29. </script>
  30. </head>
  31. <body>
  32.  
  33. <div id="myDiv"><h2>Let AJAX change this text</h2></div>
  34. <button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>
  35.  
  36. </body>
  37. </html>

关于Ajax使用 Callback 函数的更多相关文章

  1. jQuery ajax() 参数,回调函数，数据类型，发送数据到服务器，高级选项

    $.ajax({ options:/*类型:Object;  可选.AJAX 请求设置.所有选项都是可选的.*/ async:/*类型:Boolean; 默认值: true.默认设置下,所有请求均为异 ...

  2. ajax的回调函数和匿名函数

    1.什么是js回调函数 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为函数实际上 ...

  3. js进阶 14 jquery的ajax有哪些函数和事件（多练）

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

  4. javascript callback函数的理解与使用

    最近做的一个项目中用到了callback函数,于是就研究了下总结下我对javascript callback的理解 首先从callback的字面翻译“回调” 可以理解这是一个函数被调用的机制 当我们遇 ...

  5. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  6. jQuery Callback 函数

    @(编程) Callback 函数在当前动画 100% 完成之后执行. jQuery 动画的问题 许多 jQuery 函数涉及动画.这些函数也许会将 speed 或 duration 作为可选参数. ...

  7. 什么叫CallBack函数，怎么用回调函数？

    JQuery众多常用方法中很经常会用到回调函数, 理解好js callback函数定义及用法,我们就可以利用callback函数帮我们做很多事情啦! A callback is a function ...

  8. c++将lambda作为callback函数

    想用c++发送http_post请求,用到了libcurl. 想将其包装一下,因为默认http的响应结果是打印到stdout的,如果想将响应结果另外处理,需要自己定义一个callback函数. 考虑到 ...

  9. jQuery Callback函数的用法

    在动画100%完成后,调用callback函数 语法如下 $(selector).hide(speed, callback); <!-- html部分 --> <button> ...

随机推荐

  1. BOM浏览器对象模型和API速查

    什么是BOMBOM是Browser Object Model的缩写,简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是wi ...

  2. Android自定义的webView——可实现的网页文本的复制

    package com.example.customlinearlayout.view; import android.app.ProgressDialog; import android.conte ...

  3. 转载RabbitMQ入门（5）--主题

    主题(topic) (使用Java客户端) 在先前的指南中我们改进了我们的日志系统.取代使用fanout类型的交易所,那个仅仅有能力实现哑的广播,我们使用一个direct类型的交易所,获得一个可以有选 ...

  4. vs 2005中解决找不到模板项

    开始-->所有程序-->Microsoft Visual Studio 2005-->Visual Studio Tools-->Visual Studio 2005 Comm ...

  5. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. HDU 5858 Hard problem

    Hard problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  7. public private protected和默认的区别(转自百度)

    public private protected和默认的区别 Java中对类以及类中的成员变量和成员方法通过访问控制符(access specifier)进行区分控制.刚学Java语言的同学可能对pu ...

  8. Nuttx操作系统

    前几天答辩的时候看到有同学在用,回来后查了点资料. 来源:天又亮了 1  NuttX 实时操作系统 NuttX 是一个实时操作系统(RTOS),强调标准兼容和小型封装,具有从8位到32位微控制器环境的 ...

  9. Components of the Impala Server

    Components of the Impala Server The Impala server is a distributed, massively parallel processing (M ...

  10. C++中的重载，隐藏，覆盖，虚函数，多态浅析

    直到今日,才发现自己对重载的认识长时间以来都是错误的.幸亏现在得以纠正,真的是恐怖万分,雷人至极.一直以来,我认为重载可以发生在基类和派生类之间,例如: class A { public: void ...