XMLHttpRequest 对象用于在后台与服务器交换数据。
什么是 XMLHttpRequest 对象?
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想,因为您能够:
- 在不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据
所有现代的浏览器都支持 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。
通过一行简单的 JavaScript 代码,我们就可以创建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法:
1 xmlhttp=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
1 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
XMLHttpRequest对象的属性:
1 关于异步与同步 2 异步传输是面向字符的传输,它的单位是字符; 3 同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的。
4 XMLHttpRequest对象的属性。 5 ?? onreadystatechange ?每次状态改变所触发事件的事件处理程序。 6 ?? responseText ????从服务器进程返回数据的字符串形式。 7 ?? responseXML ???从服务器进程返回的DOM兼容的文档数据对象。 8 ?? status ??????????从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪) 9 ?? statusText ??????伴随状态码的字符串信息10 ?? readyState ??????对象状态值11 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)12 1 (初始化) 对象已建立,尚未调用send方法13 ?? 2 (发送数据) send方法已调用,但是当前的状态及http头未知14 3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,15 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据16 Method :Post ??发送数据方式 url send(特属于post方式)17 ???????? Get 发送数据方式 ?url
配置实例:
1 !DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 </head> 7 <body> 8 <div id="myTime"></div> 9 <input id="Button1" type="button" value="Get Time" onclick="creatReq();" >10 11 <script type="text/javascript" language="javascript">12 ????var req; //定义变量,用来创建xmlhttprequest对象13 ????function creatReq() ?//创建xmlhttprequest,ajax开始14 ????{15 ????????var url = "ajaxServer.aspx"; //要请求的服务端地址16 ????????if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本),用xmlhttprequest对象创建17 ????????{18 ????????????req = new XMLHttpRequest();19 ????????}20 ????????else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败。21 ????????{22 ????????????req = new ActiveXObject("Microsoft.XMLHttp");23 ????????}24 ????????if(req) //成功创建xmlhttprequest25 ????????{26 ????????????req.open("GET",url, true); //与服务端建立连接(请求方式post或get,地址,true表示异步)27 ????????????req.onreadystatechange = callback; ?//指定回调函数28 ????????????req.send(null); //发送请求29 ????????}30 ????}31 ????function callback() ?//回调函数,对服务端响应处理,监视response状态32 ????{33 ????????if(req.readyState == 4) //请求状态为4表示成功34 ????????{35 ????????????if(req.status == 200) ?//http状态200表示OK36 ????????????{37 ????????????????Display(); ?//所有状态成功,执行此函数,显示数据38 ????????????}39 ????????????else // http返回状态失败40 ????????????{41 ????????????????alert("服务端返回状态" + req.statusText);42 ????????????}43 ????????}44 ????????else //请求状态还没有成功,页面等待45 ????????{46 ????????????document.getElementById("myTime").innerHTML = "数据加载中...";47 ????????}48 ????}49 50 ????function Display() ?//接受服务器端返回的数据,对其进行显示51 ????{52 ????????document.getElementById("MyTime").innerHTML = req.responseText;53 ????}54 </script>55 </body>56 </html>
XMLHttpRequest 对象
原文地址:http://www.cnblogs.com/eric_yi/p/7831664.html