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. apache开源项目 -- tomee

    Apache TomEE,发音是“Tommy”,是一个经Apache.JavaEE6.Web框架认证的适配器,其在Tomcat服务器中是最强大的.Apache TomEE是由香草项目(简化常见编程任务 ...

  2. javascript中常用数组函数

    1.split方法——通过分隔符,将字符串分割,导出字符数组 常用于:分割IP地址,分割文件路径(上传文件时)等等 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  3. MySQL基础之第7章 索引

    第7章 索引 MySQL中,所有的数据类型都可以被索引,包括普通索引,唯一性索引,全文索引,单列索引,多列索引和空间索引等. 7.1.索引简介 7.1.1.索引的含义和特点 BTREE索引,HASH索 ...

  4. Android平台程序崩溃的类型及原因列举

    Android平台程序崩溃大家都应该遇到过,force close和ANR应该是大家遇到较多的. 这里把Android平台程序崩溃的各种类型做一个简述和原因列举. 1.ANR(可见ANR): 发生场景 ...

  5. 位图引起的内存溢出OutOfMemory解决方案

    一.问题描述:Android下的相机在独自使用时,拍照没有问题,通过我们的代码调用时,也正常,但是更换了不同厂商的平板,ROM由Android4.0变成了Android4.1后,拍照出现了OutOfM ...

  6. Fitnesse+RestFixture:Web服务回归测试利器

    RestFixture是Fitness的一个测试REST服务的插件,用于调用标准的http GET/POST等请求方法,并可以用XPath语法和Javascript语法检验http响应.本文介绍安装运 ...

  7. 将VLC库封装为duilib的万能视频播放控件

    转载请说明出处,谢谢~~ 昨天封装好了基于webkit的浏览器控件,修复了duilib的浏览器功能的不足,而我的仿酷狗播放器项目中不光需要浏览器,同时也需要视频播放功能,也就是完成MV的功能.所以我打 ...

  8. 【windows核心编程】一个HOOK的例子

    一.应用场景 封装一个OCX控件,该控件的作用是来播放一个视频文件,需要在一个进程中放置四个控件实例. 由于控件是提供给别人用的,因此需要考虑很多东西. 二.考虑因素 1.控件的父窗口resize时需 ...

  9. C++第一章概述

    1:C++主要是对于C的继承性做的相当的出色,主要扩充在于程序员可以自己定义自己的数据结构,用数据结构去描述日常生活中的事务,而不是C语言中当当仅有的Struct数据类型等等 2: 每一种语言都有自己 ...

  10. C语言的代码内存布局

    由以下3个部分组成: 1)BSS 段 BSS段(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英文Block Started by Symbol的简称.BSS ...