XMLHttpRequest
XMLHttpRequest是一个函数,用来创建一个http请求。最初XHR是IE通过ActiveX对象实现的。以后各个浏览器都开始支持了。现在流行的AJAX就是通过XMLHttpRequest对象来实现的。总的来说ajax就是不必刷新整个页面而获取新的内容的一种方法。通过ajax我们可以做类似桌面的程序。
AJAX:Asynchronous Javascript and XML.
- Asynchronous,向服务器发个请求,并不用等待返回。但是它可以做其他的事情并且通过一个事件来得知有一个相应返回。
- Javascript,我们通过javascript来创建一个XHR对象。
- XML,因为最初的开发人员都是用XHR请求一个XML文档。把它作为数据返回到页面上。现在比较流行用JSON的格式。
用XHR非常简单只需要两个步骤
- 发出一个请求,创建一个XHR对象,并且给它一个监听器。
- 处理响应,事件的监听器能得知响应的返回。这样代码就能处理这个响应了。
发送一个请求
为了用于演示,以下的代码在各个浏览器可能不太一样。
第一步创建一个XHR对象
var xhr = new XMLHttpRequest();
第二步给readystatechange添加一个监听器。
xhr.onreadystatechange = myCallback;
第三步调用XHR对象的open方法
xhr.open('GET', 'somefile.txt', true);
第一个参数是HTTP请求的类型,一般都是post和get。如果不需要向服务端发送大量的数据可以用get。不然的话就用post。第二个参数是请求的url。这个例子中是个相同目录下的somefile.txt文件。最后一个参数指定是否为异步。
第四步发送一个请求。
xhr.send('');
这个方法,可以向服务端发送数据。对于GET请求,是个空字符串。对于post请求它是个字符串 key=value&key2=value2
处理请求
我们已经给readystatechange加了一个监听器了。什么事ready state,它是怎样改变的呢?
XHR有个属性叫做readyState.它每次变化都会去执行readystatechange事件。
readyState属性的值如下
- 0-uninitialized
- 1-loading
- 2-loaded
- 3-interactive
- 4-complete
当readyState的值为4的时候,也就是response返回了。在上个例子的myCallback函数中,在确认readyState值为4的之后,还要确认HTTP请求的status code(状态码).如请求了一个不存在的URL,http的状态码为404.如果状态码是200就说明是正确的了。所以,myCallback函数中会检查这个状态码。我们可以用过XHR的status属性来获取状态码。
所以如果readyState为4,http状态码为200,你就可以通过XHR的responseText属性访问请求URL的内容了。
具体看代码
function myCallback() {
if (xhr.readyState < 4) {
return; // 还没有返回
}
if (xhr.status !== 200) {
alert('Error!'); // HTTP状态码错误。
return;
}
// 查看返回的内容。
alert(xhr.responseText);
}
通过xhr.responseText。你就可以获取请求URL内容,并且可以把它添加到当前的页面中了。
在IE浏览器中创建XHR对象
因为在IE中,是用ActiveX来创建XHR对象的。但是各个IE浏览器版本之间也有所不同。
因此如果要跨浏览器创建XHR对象,代码如下
var ids = ['MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP'];
var xhr;
if (typeof window.XMLHttpRequest === 'function') {
xhr = new XMLHttpRequest();
} else {
for (var i = 0; i < ids.length; i++) {
try {
xhr = new ActiveXObject(ids[i]);
break;
} catch (e){}
}
}
来解释下上面的程序。首先这个ids数组存放着三个不同的ActiveX的ID。用来解决IE浏览器版本的问题。
然后在检查window.XMLHttpRequest是否是个合法的函数。如果支持说明浏览器支持XMLHttpRequest(一般firefox,Safari,Opera都支持)。
关于异步
现在我们知道了怎样创建一个XHR以及处理响应。如果发出两个异步请求的话会怎么样呢?如果第二个响应在第一个响应之前返回呢?
在上个例子中XHR是个全局的对象myCallBack函数依赖于全局的XHR对象。如何避免用全局的变量呢,那就把回调函数封装为闭包。看下代码
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = (function(myxhr){
return function(){myCallback(myxhr);}
})(xhr);
xhr.open('GET', 'somefile.txt', true);
xhr.send('');
这个例子中,myCallback函数接收了XHR对象,就不需要访问全局的XHR了。
关于XML
虽然JSON已经明显要比XML流行的多,但是XML仍然是一个好的选择。如果是XML文档,我们可以用responseXML来访问一个XML文档。这样返回的内容就可以用DOM解析的方式来读取了。如getElementsByTagName()等等。
分享到:
相关推荐
2.6、使用Firebug查看XMLHttpRequest 15 2.7、查看页面上所有的CSS与JS 16 2.8、查看页面上所有的资源列表 17 2.9、使用Firecookie调试页面cookie 18 3.Chrome浏览器对JS的调试方法 18 3.1.准备工作 18 3.1.1所涉及...
XMLHttpRequest Deno Polyfill 的XMLHttpRequest的越野车填充工具用于杰诺(和其他浏览器和类似浏览器的环境中)通过browserifying 。 import XMLHttpRequest from ...
在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。Internet ...
Internet Explorer 首先以 ActiveX 物件方式提供 XMLHTTP 类别,而 Mozilla、Safari 及其他浏览器则随后以 XMLHttpRequest 类别支援此 ActiveX 物件中的类别及属性。 因此,如果想跨浏览器,那么可以这么写: 代码...
在非IE的浏览器中,需要用 new XmlHttpreQueSt()来创建对象,如下: var xmlHttpReq = new XMLHttpRequest(); xmlHttpReq.open("GET", "http://localhost/books.xml", false); xmlHttpReq.send(); alert(xmlHttpReq...
在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。 ...
看如下的javascript脚本:if (window.XMLHttpRequest) { //Mozilla, Safari,...IE7 alert('Mozilla, Safari,...IE7 ');if(!window.ActiveXObject){ // Mozilla, Safari,... alert('Mozilla, Safari')...
在 (用于XMLHTTPRequest )或 (用于fetch )的顶部使用它,以在没有服务器的情况下在浏览器端(例如单页应用程序)测试JavaScript REST客户端。用法伪XMLHTTPRequest < script src =" /path/to/FakeRest.min....
开发跨浏览器JavaScript时要注意的问题开发跨浏览器JavaScript时要注意的问题
拦截由XMLHttpRequest发出的浏览器http请求.zip
这几天要构思用Javascript调用Asp.Net的WebService,需要到XMLHTTP来支持,但发现Opera的XMLHttpRequest很烂,实在支持不下去,后来到处找,终于发现这份代码,在Opera中是利用java.net.URL等类来实现的,不敢独享,...
XMLHTTPRequest 在iOS 7中,Apple引入了[通过JavaScriptCore JavaScript引擎执行JavaScript]( )的可能性。 不幸的是,JavaScriptCore缺少浏览器JavaScript环境将具有的某些对象和功能。 尤其是JavaScriptCore并未...
前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0。下面是上传图片的核心代码: HTML <input type="file" id=...
2.1.html JavaScript中this在不同位置指向的对象。 2.2.html null类型的简单应用。 2.3.html 算术运算符用法。 2.4.html 逻辑运算符使用方法。 2.5.html 位运算符使用方法。 2.6.html 赋值...
此外,JavaScript是一种解释性脚本语言,提供了比其他语言更加灵活、更加宽松的程序设计环境,程序设计新手在这种环境中能够很快适应。 《JavaScript权威指南》全面介绍了JavaScript语言的核心,以及Web浏览器中实现...
在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。Internet ...
AJAX中的"A"代表了"异步",这意味着 XMLHttpRequest对象的send()方法可以立即返回,从而让Web页面上的其它HTML/JavaScript继续其浏览器端处理而由服务器处理HTTP请求并发送响应。
第13章 web浏览器中的javascript 309 13.1 客户端javascript 309 13.2 在html里嵌入javascript 313 13.3 javascript程序的执行 319 13.4 兼容性和互用性 326 13.5 可访问性 333 13.6 安全性 334 13.7 客户端框架 339...
当微软在IE中添加了用于执行JavaScript的ActiveX XMLHTTP对象以后,仿佛播下了AJAX这一Web应用开发的革命的火种。如今,Firefox, Safari, Opera, 以及其他的浏览器都提供了XMLHttpRequest,使得他们可以访问colr.org...
第13章 Web浏览器中的JavaScript 13.1 客户端JavaScript 13.2 在HTML里嵌入JavaScript 13.3 JavaScript程序的执行 13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14章 Window对象 14.1 计时器 ...