一个简单的例子教你明白XMLHTTPRequest的原理
来源:互联网 发布:php pdo bindvalue 编辑:程序博客网 时间:2024/04/30 02:59
一个简单的例子教你明白XMLHTTPRequest的原理
首先先简单的介绍下XMLHTTPRequest对象,XMLHTTPRequest对象可以在不刷新整个页面的前提下,实现局部刷新网页,jQuery中的Ajax就是基于此原理而开发的。那废话不多说,我们切入正题。
首选先创建一个Button,里面有我们的响应事件
<input type="button" value="异步调用" onclick="XMLRq();" />
这里响应事件函数是XMLRq(),那XMLRq()的函数代码片段如下
function XMLRq() { var xmlHttpreq = null; if (window.ActiveXObject) { xmlHttpreq = new ActiveXObject("Microsoft.XMLHTTP"); //alert("xmlrequest对象创建成功") } else if (window.XMLHttpRequest) //除了IE5与IE6以外的浏览器 { xmlHttpreq = new XMLHttpRequest(); //alert("c"); } if (xmlHttpreq != null) { xmlHttpreq.open("GET", "Ajax_response1.aspx", true); xmlHttpreq.onreadystatechange = setCallback; xmlHttpreq.send(null); } function setCallback() { if (xmlHttpreq.readyState == 4) { if (xmlHttpreq.status == 200) { document.getElementById("getext").innerHTML = xmlHttpreq.responseText; } } } }
我们来依次解读下代码,为什么要有个判断window.ActiveXObject,跟window.XMLHttpRequest呢,因为ActiveXObject对象支持的是IE5根IE6浏览器,而window.XMLHttpRequest对象支持的是除了其之外的浏览器都可以使用。
我们这边采用open(“method”,”url”,boolean)方法来指定服务器的URL,设置boolean为true是因为,这里采用了异步调用的方式。好了,既然异步调用,那异步双方并没有共同的时钟,这时候,接收方需要知道发送方什么时候给它发信息。因此这行代码必不可少
xmlHttpreq.onreadystatechange = setCallback;
这里凭借它的因为也能理解其意思,onreadystatechange,翻译一下就是当初始的状态改变的时候。XMLHTTPRequest有个readystate值,当它的值改变的时候,那接收方就知道要接受信息,这里设置的回调函数是setCallback(),所以当请求加载完成,即readystate值为4,并且响应成功,这里HTTP的status为200时,说明我们已经成功响应了该按钮事件,服务器已经回传了信息。
1 0
- 一个简单的例子教你明白XMLHTTPRequest的原理
- 一个简单的例子,看明白this
- 一个简单的小例子让你明白c#中的委托
- 一个简单的使用XMLHttpRequest获得服务器数据的例子
- 一个例子让你明白C++的运算符优先级
- 一个例子让你明白Eclipse和JDK的依存关系
- 以一个最简单的例子把OO的JavaScript说明白
- 以一个最简单的例子把OO的JavaScript说明白
- 用一个最简单的例子把OO的JavaScript说明白
- 以一个最简单的例子把OO的JavaScript说明白
- 以一个最简单的例子把OO的JavaScript说明白
- 以一个最简单的例子把OO的JavaScript说明白
- 以一个最简单的例子把OO的JavaScript说明白
- 以一个最简单的例子把OO的JavaScript说明白[转]
- 以一个最简单的例子把OO的JavaScript说明白
- XMLHttpRequest对象的一个简单运用示例
- 五个简单例子,明白闭包原理
- 一个简单的例子
- 第四次上机实践项目-项目1-三角形类椎体-(3)
- Java-HashMap源码分析
- 对于ThinkPHP入口文件以及模块目录结构的学习
- android之Androidstudio下查找sha1
- 第4周项目2-太乐了
- 一个简单的例子教你明白XMLHTTPRequest的原理
- 【JavaScript】JavaScript中的checkbox之全选、全不选、反选
- 以前写的数据结构课设
- POJ 3320 Jessica's Reading Problem(尺取法)
- Android Studio 下安卓 jni 开发错误 undefined reference to AndroidBitmap_getInfo
- 组合数模板
- 学习Java JDBC,看这篇就够了
- 异或运算实现两个数的交换
- bzoj 2140: 稳定婚姻 强连通分量