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 时，表示响应已就绪：

<html>

<head>

<script type="text/javascript">

function loadXMLDoc()

{

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }

xmlhttp.open("GET","/ajax/test1.txt",true);

xmlhttp.send();

}

</script>

</head>

<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>

</body>

</html>

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

2、使用 Callback 函数

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

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

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

<html>

<head>

<script type="text/javascript">

var xmlhttp;

function loadXMLDoc(url,cfunc)

{

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=cfunc;

xmlhttp.open("GET",url,true);

xmlhttp.send();

}

function myFunction()

{

loadXMLDoc("/ajax/test1.txt",function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  });

}

</script>

</head>

<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>

</body>

</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. 省常中模拟 Test3 Day2

    matrix 找规律 题意:给定一个 N*N 的只有 0 和 1 的矩阵,有 Q 个操作,分三种:1. 将某行上的所有数字取反:2. 将某列上的所有数字取反:3. 输出 sum{ a[i][j]*a[ ...

  2. Android常用组件

    UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...

  3. Linux User's Manual IOSTAT

    IOSTAT(1) Linux User's Manual IOSTAT(1) NAME iostat - Report Central Processing Unit (CPU) statistic ...

  4. Oracle 存储过程的创建，及触发器调用存储过程

    一.创建存储过程 1.存储过程写法 create or replace procedure HVM_BYQ_TJ --变压器统计信息--->入库 (id in number) as begin ...

  5. Redis源码分析系列

    0.前言 Redis目前热门NoSQL内存数据库,代码量不是很大,本系列是本人阅读Redis源码时记录的笔记,由于时间仓促和水平有限,文中难免会有错误之处,欢迎读者指出,共同学习进步,本文使用的Red ...

  6. Filezilla中文字符文件看不到或显示乱码的解决办法

    Filezilla确实是跨平台的好软件,可之前我就在ubuntu下郁闷为什么看坛子FTP里竟然是空的.最近换MAC版的FZ结果还是这样就奇怪了. 后来想Filezilla应该是支持字符集转换的,所以在 ...

  7. WinForm使用webbrowser爬取数据，中文乱码问题

    使用winform中的webbrowser抓取某个网站的数据时,遇到中文乱码的问题: 当时使用的获取网页内容的代码为: webBrowser1.DocumentText.ToString(); 不管我 ...

  8. ASP.NET导出excel表方法汇总

    asp.net里导出excel表方法汇总  1.由dataset生成 public void CreateExcel(DataSet ds,string typeid,string FileName) ...

  9. 3D 矩阵旋转

    如图,需要将点(向量) v(x, y, 0) 绕 z 轴旋转角度 θ,求旋转后的点(向量) v'(x', y', 0). 大概思路: 1. 将 v(x, y, 0) 分解, v(x, y, 0) = ...

  10. 【和我一起学python吧】Python安装、配置图文详解

     Python安装.配置图文详解 目录: 一. Python简介 二. 安装python 1. 在windows下安装 2. 在Linux下安装 三. 在windows下配置python集成开发环境( ...