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. acdream 1408 "Money, Money, Money" （水）

    题意:给出一个自然数x,要求找两个自然数a和b,任意多个a和b的组合都不能等于x,且要可以组合成大于x的任何自然数.如果找不到就输出两个0.(输出任意一个满足条件的答案) 思路:x=偶数时,无法构成, ...

  2. Java [Leetcode 112]Path Sum

    题目描述: Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding ...

  3. mysql违背了唯一约束

    执行一批数据,违背唯一约束时会中断,导致后面的数据写不进去. mysql有提供ignore关键字,使用insert ignore into .... 这样,当违背了唯一约束的时候~就会直接跳过,不会报 ...

  4. excel用vlookup,lookup时查询数据需要排序

    如题,排出来的数据不对,之前没有是看清楚..所以记下来,日是后要小心点....

  5. 使用Qmake在树莓派上开发Opencv程序

    Qt 安装 PC 端  下载安装即可 https://mirrors.ustc.edu.cn/qtproject/official_releases/qt 树莓派:Qt开发套件和opencv安装sud ...

  6. 仿windows phone风格主界面

    使用了ZAKER到最新版本,其主界面采用windows phone的风格,感觉还蛮好看的,挺喜欢的,就模仿写了一下,实现到界面截图如下: 第一版面: 第二版面: 在实现了它到九宫格菜单,还实现了背景图 ...

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

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

  8. SQL对字符串进行排序

    假设字符串中只由'A'.'B'.'C'.'D'组成,且长度为7.并设函数REPLICATE(<字符串>,<n>)可以创建一个<字符串>的n个副本的字符串,另外还有R ...

  9. bookhub -- 扁平化本地电子书管理与分享工具

    代码 github 地址:https://github.com/JackonYang/bookhub 初稿:    1. 关键功能点 扫描本地电子书(扩展名 pdf/epub 等),将不重复的复制到特 ...

  10. HDU 5311

    把anniversary分成三个区间,分别枚举每个区间在给定模板中的长度.每次枚举完一个区间,记录下区间长度和起始坐标,下次从剩下长度开始枚举,避免重复. #include<iostream&g ...