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. 【C#学习笔记】检测进程是否存在并关闭

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  2. 【C#学习笔记】List容器使用

    using System; using System.Collections.Generic; namespace ConsoleApplication { class Program { stati ...

  3. 【JS】<c:foreach>用法

    <c:foreach>类似于for和foreach循环   以下是我目前见过的用法: 1.循环遍历,输出所有的元素. <c:foreach items="${list}&q ...

  4. mysql 自旋锁

    自旋(spin)是一种通过不间断地测试来查看一个资源是否变为可用状态的等待操作,用于仅需要等待很短的时间等待所需资源的场景.使用自旋这种“空闲循环(busy-loop)”来完成资源等待的方式要比通过上 ...

  5. BaseAdapter中重写getview的心得以及发现convertView回收的机制

    以前一直在用BaseAdapter,对于其中的getview方法的重写一直不太清楚.今天终于得以有空来探究它的详细机制. 下面先讲讲我遇到的几个问题: 一.View getview(int posit ...

  6. Delphi TRichEdit加载word内容

    procedure TForm1.btn6Click(Sender: TObject);var WordApp: Variant; //声明一个word对象beginWordApp := Create ...

  7. C#相关图书推荐

    C#入门经典(第6版) 作      者 [美] Karli Watson,Jacob Vibe Hammer,Jon D Reid 等 著: 出 版 社 清华大学出版社 出版时间 2014-01-0 ...

  8. codeforce 702E Analysis of Pathes in Functional Graph RMQ+二进制

    http://codeforces.com/contest/702 题意:n个点,n条边,每个点出边只有一条,问从每个点出发经过k条边的边权和,以及边权最小值 思路: f[i][j] 第i个点出发,经 ...

  9. MySQL数据库备份和还原

    备份MySQL数据库的命令 mysqldump -hhostname -uusername -ppassword databasename > backupfile.sql 备份MySQL数据库 ...

  10. <Chapter 2>2-2-2.开发Python应用(Developing a Python App)

    对App Engine来讲最简单的Python应用是一个有两个文件的简单目录:一个称为app.yaml的配置文件,一个用于请求处理器的Python代码文件.包含app.yaml文件的这个目录就是这个应 ...