onreadystatechange事件:

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

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

readyState属性存有XMLHttpRequest的状态信息

XMLHttpRequest对象的三个重要的属性:

属性 描述
onreadystatechange 存储函数(函数名)每次readystate改变时就会调用该函数
readyState

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

0:请求未初始化

1:服务器连接已建立

2:请求已接收

3:请求处理中

4:请求已完成,且响应已就绪

status

200:"ok"

404:请求未找到

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

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

 xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

onreadystatechange事件被触发5次,对应着readyState的每个变化

使用回调函数:

回调函数是一种以参数的形式传递给另一个函数的函数

如果页面存在多个AJAX任务,就应该为创建XMLHttpRequest对象编写一个标准的函数,并为每个AJAX任务调用该函数

该函数应该包含URL以及发生onreadystatechange事件执行时的任务

 <script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 代码
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>

[AJAX系列]onreadystatechange事件的更多相关文章

  1. Ajax 的onreadystatechange事件注意事项.

    <script type="text/javascript"> function createXHR() { var request = false; try { re ...

  2. [转]深入理解ajax系列——进度事件

    一般地,使用readystatechange事件探测HTTP请求的完成.XHR2规范草案定义了进度事件Progress Events规范,XMLHttpRequest对象在请求的不同阶段触发不同类型的 ...

  3. 深入理解ajax系列第一篇——XHR对象

    × 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

  4. [AJAX系列]XMLHttpRequest请求

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ASP.NET之Ajax系列(三)

    我们通过前两篇文章的学习,已经大致掌握了Ajax的实现方法,同时也可以对比出两种方式的优劣.但是我们还是没有搞清楚真正的ajax的实现原理,以及最原始的,未经过封装的ajax是什么样的,今天我们一起来 ...

  6. ajax系列之用jQuery的ajax方法向服务器发出get和post请求

    打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个 ...

  7. Ajax系列之二:核心对象XMLHttpRquest

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhanghongjie0302/article/details/31432939           ...

  8. onreadystatechange()事件

    onreadystatechange(): 存储函数(或函数名),当 readyState 改变时,就会触发 onreadystatechange()  事件. xmlhttp.onreadystat ...

  9. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

随机推荐

  1. <代码整洁之道>、<java与模式>、<head first设计模式>读书笔记集合

    一.前言                                                                                       几个月前的看书笔记 ...

  2. 内部类访问的局部变量必须加final

    (1)内部类是外部类的一个成员,就像外部类的成员方法一样,所以内部类有权限访问外部类的所有成员,包括private的.  (2)内部类不能访问外部类方法中的局部变量,除非变量是final的(一般发生在 ...

  3. MATLAB学习(一)——状态好状态坏,自作自受

    状态不好,学学MATLAB做做准备吧. 一.基本情况 1.1 书写 一行写不下? %可以加上三个小黑点(续行符)并按下回车键,然后接下去再写.例如 s=-/+/-/+/-/+/-…- /+/-/+/- ...

  4. 151008-JS初级完成,PHP入门(变量常量等)-没假放了

    hi 今天是10月8号,你懂的,好困好困哒 上午搞定了JS的入门篇,真的是入门篇,基本都是JS做基本的输出.样式变化.惯例给出代码 <!DOCTYPE HTML><html>& ...

  5. Machine Learning Algorithms Study Notes(2)--Supervised Learning

    Machine Learning Algorithms Study Notes 高雪松 @雪松Cedro Microsoft MVP 本系列文章是Andrew Ng 在斯坦福的机器学习课程 CS 22 ...

  6. FJOI省队集训 florida

    省队成员(大部分)都没来...像我这种沙茶天天写写玄学算法都能排在榜上面...果然正解写挂的人远比暴力拍对的人少啊...陆陆续续会补一些题解.(不过有些题太神了可能补不上题解 有n个物品,两个袋子A和 ...

  7. 【BZOJ 1001】[BeiJing2006]狼抓兔子

    Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的,而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个 ...

  8. Html5 Egret游戏开发 成语大挑战(六)游戏界面构建和设计

    本篇将主要讲解游戏界面的构建和设计,会应用到egret.eui的自定义组件,可以很直观的构建一个游戏整体,这里我们仍然只需要使用EgretWing就可以达到目的,本篇可能是篇幅最少的一个,但是涉及自定 ...

  9. 【传递智慧】C++基础班公开课第六期培训

    11月11日 二 213 进程间关系和守护进程 11月12日 三 213 信号 11月13日 四     11月14日 五 213 线程(创建,销毁,回收) 11月15日 六 213 线程同步机制 1 ...

  10. Fragment生命周期