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()等等。
分享到:
相关推荐
本主题主要关注如何在不同的浏览器环境中创建XMLHttpRequest对象,以实现跨浏览器兼容性。 王兴魁老师是一位知名的IT教育专家,他在传智播客的课程中深入讲解了这一主题。创建XMLHttpRequest对象是AJAX的核心步骤,...
随着不同浏览器版本的更新迭代,如何确保Web应用能够在各种浏览器环境中正常运行成为了关键所在。本文将详细介绍如何使用JavaScript解决浏览器兼容性问题,特别是针对XMLHttpRequest对象的创建及对不同版本IE浏览器...
尽管现代开发中更倾向于使用fetch API和async/await语法,但XMLHttpRequest仍然是一个重要的概念,尤其是在维护旧代码或需要兼容旧浏览器时。本文将详细介绍XMLHttpRequest的使用方法、工作流程以及在实际项目中的...
在不同的浏览器环境下创建`XMLHttpRequest`对象存在差异,主要表现在IE浏览器与非IE浏览器之间。为了确保代码能在所有主流浏览器中正常运行,通常需要采取一定的兼容性处理措施。 #### 三、IE浏览器下的处理 在...
JavaScript是一种广泛应用于Web开发的脚本语言,它在浏览器环境中运行,为网页提供动态交互功能。浏览器对象模型(Browser Object Model,简称BOM)是JavaScript与浏览器进行交互的基础,允许我们访问和操作浏览器的...
最后,文档中还提到了一些特定的应用实例,比如通过JavaScript调用WebOffice Web服务的示例,展示了在Web浏览器中利用Web服务实现办公自动化应用的可能。这不仅拓展了Web服务的应用场景,也展示了JavaScript在前端...
GopherJS是针对Go语言的一个重要工具,它是一个源到源的编译器,可以把Go代码转换为JavaScript,使得Go程序能够在浏览器环境中运行,从而打破了Go语言只能在服务器端执行的传统认知。 GopherJS的工作原理是将Go语言...
这份名为"JavaScript安全从浏览器到服务端.ppt"的资料详细探讨了JavaScript在浏览器、MongoDB和Node.js环境中可能面临的各类安全问题。 首先,浏览器是JavaScript的主要执行环境,也是网络安全的第一线。在浏览器上...
XMLHttpRequest对象是在浏览器环境中创建的,主要用于后台与服务器进行通信。以下是一些主要知识点: 1. **创建XMLHttpRequest对象**: 在JavaScript中,通过`new XMLHttpRequest()`来创建一个新的XMLHttpRequest...
通过上述代码片段可以看出,为了兼容各种浏览器环境,我们首先尝试使用 `ActiveXObject` 创建 XMLHttpRequest 对象,如果失败则尝试使用原生的 `XMLHttpRequest` 构造函数。 #### 三、XMLHTTPRequest的主要属性与...
### AJAX技术使用XMLHttpRequest对象传递参数的中文乱码问题 #### 背景与问题概述 在使用AJAX技术进行前后端...此外,在开发过程中还需要考虑到不同浏览器之间的差异性,以确保应用能够稳定运行于多种浏览器环境中。
首先,XMLHttpRequest是Web开发中的一个基础组件,它允许浏览器在不刷新整个页面的情况下向服务器发送请求并接收响应。在GWT中,这个功能被包装在`com.google.gwt.http.client.RequestBuilder`类中,提供了发送GET和...
而"拦截由XMLHttpRequest发出的浏览器http请求"这一主题,主要涉及的是如何在浏览器环境中对这些请求进行监控、修改或控制。在开发和调试过程中,这是一项非常有用的技能。 首先,我们来了解XHR的基本用法。...
在JavaScript中,XMLHttpRequest(XHR)对象是实现异步数据通信的关键,它允许在不刷新整个页面的情况下向服务器发送请求并接收回应。通过创建一个XMLHttpRequest实例,然后调用其`open`方法设定请求类型、URL和是否...
而XMLHttpRequest对象是实现AJAX的核心,它是浏览器提供的一种用于在后台与服务器交换数据的JavaScript对象。然而,由于浏览器的差异性,在不同浏览器中创建XMLHttpRequest对象的方式也有所不同。 在早期,Internet...
XMLHttpRequest Deno Polyfill 的XMLHttpRequest的越野车填充工具用于杰诺(和其他浏览器和类似浏览器的环境中)通过browserifying 。 import XMLHttpRequest from ...
在 IE 中,XMLHttpRequest 对象需要使用 ActiveXObject 来创建,例如:`var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");` 使用 XMLHttpRequest 对象时,需要注意 IE 的缓存问题,可以通过在请求头中添加 Cache...
**XMLHttpRequest(XHR)是Web开发中的一个关键组件,它允许JavaScript在不刷新整个页面的情况下与服务器进行异步数据交换。这种技术被称为Ajax(Asynchronous JavaScript and XML),尽管它的数据格式并不局限于XML...