JavaScript之AJAX

最新推荐文章于 2025-02-01 10:23:00 发布

鹤啸九天-西木

最新推荐文章于 2025-02-01 10:23:00 发布

阅读量392

点赞数

分类专栏： # Web前端文章标签： AJAX XMLHttpRequest XMLHttp 异步 ActiveXObject

Web前端专栏收录该内容

23 篇文章

订阅专栏

一、AJAX（全称Asynchronous JavaScript and XML）：

Ajax的概念由杰西·詹姆士·贾瑞特所提出，是综合了多项技术的浏览器端网页开发技术。传统的Web应用允许用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的响应时间依赖于服务器的响应时间，这导致了用户界面的响应比本机应用慢很多。但Ajax可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，请求数据更少所以服务器响应更快了。同时很多处理工作可以在发出请求的客户端上完成，因此Web服务器的负荷也减少了。可以看出Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。实际上数据格式除了用XML外，还可以使用Json即所谓的AJAJ，它们的基础是XMLHttpRequest。

二、XMLHTTP：

XMLHTTP最初是由微软公司发明的，在Internet Explorer 5.0中用作ActiveX对象，可通过JavaScript、VBScript或其它浏览器支持的脚本语言访问。Mozilla的开发人员后来在Mozilla 1.0中实现了一个兼容的版本、之后苹果电脑公司在Safari 1.2中开始支持XMLHTTP，而Opera从8.0版开始也宣布支持XMLHTTP。

XMLHTTP是一组API函数集，可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用，通过HTTP在浏览器和web服务器之间收发XML或其它数据。XMLHTTP最大的好处在于可以动态地更新网页，它无需重新从服务器读取整个网页，也不需要安装额外的插件。该技术被许多网站使用，以实现快速响应的动态网页应用。例如：Google的Gmail服务、Google Suggest动态查找界面以及Google Map地理信息服务。XMLHTTP是AJAX网页开发技术的重要组成部分，除XML之外，XMLHTTP还能用于获取其它格式的数据，如JSON或者甚至纯文本。XMLHTTP的实现有两种，分别是：

1、ActiveXObject：

Microsoft ActiveX控件是由软件提供商开发的可重用的软件组件。使用ActiveX控件，可以很快地在网址、台式应用程序、以及开发工具中加入特殊的功能。例如，StockTicker控件可以用来在网页上即时地加入活动信息，动画控件可用来向网页中加入动画特性。一般只有IE5和IE6才使用ActiveXObject。创建ActiveXObject对象的方法为：

var http = new ActiveXObject(servername.typename[, location])

其中：servername是提供对象的应用程序名称，typename是要创建的对象的类型，location（非必选项）是要在其中创建对象的网络服务器的名称。

2、XMLHttpRequest：

XMLHttpRequest是一个JavaScript对象，它最初由微软设计，随后被Mozilla、Apple和Google采纳。如今该对象已经被W3C组织标准化，通过它你可以很容易的取回一个URL上的资源数据。尽管名字里有XML，但XMLHttpRequest可以取回所有类型的数据资源，并不局限于XML，而且除了HTTP，它还支持FILE和FTP协议。XMLHttpRequest在AJAX中被大量使用，目前主流浏览器都支持XMLHttpRequest。创建XMLHttpRequest对象的方法为：

var http = new XMLHttpRequest();

三、XMLHttpRequest使用：

现在所有浏览器均支持XMLHttpRequest，但IE5和IE6使用的是ActiveXObject。为了在不同的浏览器中创建XMLHttpRequest对象，可以使用如下兼容：

var http;
if (typeof XMLHttpRequest != "undefined") {
    http = new XMLHttpRequest();
} else {
    var versions = ["Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", 
        "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp"];
    for (var i = 0; i < versions.length; i++) {
        try {
            http = new ActiveXObject(versions[i]);
            break;
        } catch (e) {}
    }
}

1、XMLHttpRequest（简称xhr）对象常用属性有：

1>readyState：表示HTTP请求的状态，当一个XMLHttpRequest初次创建时，这个属性的值从0开始，直到接收到完整的HTTP响应，这个值增加到4。readyState的值不会递减，除非当一个请求在处理过程中的时候调用了abort()或open()方法。每次这个属性的值增加的时候，都会触发onreadystatechange事件句柄。5个状态中每一个都有一个相关联的非正式的名称，状态、名称和含义如下：

值	状态	描述
0	Uninitialized (已初始化)	XMLHttpRequest对象已创建或已被abort()方法重置。
1	Open（已打开）	open()方法已被成功调用，send()方法还未被调用
2	Sent（已发送）	send()方法已经被调用，HTTP请求已发送到Web服务器，未接收到响应。
3	Receiving（正在接收）	所有响应头部都已经接收到，响应体开始接收但未完成。
4	Loaded（已完成）	HTTP 响应已经完全接收。

2>status：由服务器返回的HTTP状态代码，如200表示成功，而404表示 "Not Found" 错误。当readyState小于3的时候读取这一属性会导致异常。

3>statusText：这个属性用名称而不是数字指定了请求的HTTP的状态代码。也就是说，当状态为200的时候它是 "OK"，当状态为 404的时候它是 "Not Found"。和status属性一样，当readyState小于3的时候读取这一属性会导致异常。

4>responseType：是xhr level 2新增的属性，用来指定response的数据类型，目前还存在些兼容性问题。支持的数据类型有：

值	数据类型	说明
""	String字符串	在不设置responseType时的默认值
"text"	String字符串
"document"	Document对象	希望返回XML格式数据时使用
"json"	javascript对象	存在兼容性问题，IE10/IE11不支持
"blob"	Blob对象
"arrayBuffer"	ArrayBuffer对象

5>responseText：只有当responseType为"text"或""时，xhr对象上才有此属性。表示从服务器接收到的响应体（不包括头部），如果还没有接收到数据的话，就是空字符串。如果 readyState小于3，这个属性就是一个空字符串。当readyState为3，这个属性返回目前已经接收的响应部分。如果readyState为 4，这个属性保存了完整的响应体。如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，默认使用Unicode UTF-8。

6>responseXML：只有当responseType为"text"、""或"document"时，xhr对象上才有此属性。表示从服务器接收到的响应体（不包括头部），解析为XML并作为Document对象返回。

7>timeout：表示一个请求在被自动终止前所消耗的毫秒数。默认值为0，意味着没有超时时间。超时并不能应用在同步请求中，否则会抛出一个InvalidAccessError异常。当发生超时时，timeout 事件将会被触发。

8>withCredentials：表明在进行跨站（cross-site）的访问控制（Access-Control）请求时，是否使用认证信息 (例如cookie或授权的header)。默认为 false。注意：这不会影响同站same-site请求。

2、XMLHttpRequest对象常用方法有：

1>open(method,url,async,username,password)：用于打开连接请求，其中：

method：用于设置请求的类型（GET、POST、PUT或DELETE等），如果method不是有效的值将会抛出SyntaxError异常，如果method为CONNECT、TRACE或TRACK（不区分大小写）将会抛出SecurityError异常。如果method为GET，则send()中参数只能为null；

url：用于设置请求文件在服务器上的位置，为了避免得到的数据是缓存的结果，最好在url的最后加一个key=value形式的随机数作为参数，并用?连接，例如："/project/test.php?rand=" + Math.random()，如果url不能被成功解析将会抛出SyntaxError异常；

async：用于设置是否要异步请求（true或false，默认为true，如果为false，则send()方法不会返回任何东西，直到接收到服务器的返回数据，timeout必须为0，withCredentials必须为false，responseType必须为""，置为"text"也不允许），如果要用于AJAX的话，async必须是true；

username：用于设置授权的用户名；

password：用于设置授权的密码。

示例：

var http = new XMLHttpRequest();
http.open("GET","/project/test.php?rand=" + Math.random(),true);

2>setRequestHeader(key,value)：设置HTTP请求头信息，调用此方法时必须确保已经调用open()方法打开了一个URL。示例：

var http = new XMLHttpRequest();
http.open("POST","/project/test.php?rand=" + Math.random(),true);
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");

3>overrideMimeType(mimeType) ：用于重写由服务器返回的MIME类型，这个方法必须确保send()已被调用。MimeType即对应资源的媒体类型，通常是通过HTTP协议，由Web服务器告知浏览器，更准确地说是通过响应报文的Header头的Content-Type属性来指定的，媒体类型对照表参考：https://blog.youkuaiyun.com/lzghxjt/article/details/50493026。示例：

var http = new XMLHttpRequest();
http.open("POST","/project/test.php",true);
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http.overrideMimeType("text/plain; charset = utf-8");

4>send(obj)：将请求发送到服务器，发送的obj参数类型可以是ArrayBuffer、Blob、Document、DOMString和FormData，参数类型不同，会导致请求Header中默认的Content-type不同。如果该请求是异步模式，则该方法会立刻返回。相反如果请求是同步模式，则直到请求的响应完全接收以后，该方法才会返回。需要特别注意的是：所有相关的事件绑定必须在调用send()方法之前进行。示例：

var http = new XMLHttpRequest();
http.open("POST","/project/test.php",true);
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http.overrideMimeType("text/plain; charset = utf-8");
var form = document.getElementById("info");
http.send(serialize(form));

5>sendAsBinary() ：发送二进制的send()方法的变种。

6>abort()：如果请求已经被发送，则立刻中止请求。当资源加载已中止时，也会触发abort()事件。

7>getAllResponseHeaders()：返回所有响应头信息（响应头名和值），如果响应头还没有接收，则返回null。注意：使用该方法获取的response headers与在开发者工具 Network 面板中看到的响应头不一致。

8>getResponseHeader() ：返回指定响应头的值，如果响应头还没有被接收，或该响应头不存在，则返回 null。注意：使用该方法获取某些响应头时，浏览器会抛出异常，具体原因如下：

①W3C的xhr标准中做了限制，规定客户端无法获取response中的Set-Cookie、Set-Cookie2这2个字段，无论是同域还是跨域请求；

②W3C的cors标准对于跨域请求也做了限制，规定对于跨域请求，客户端允许获取的response header字段只限于"simple response header"和"Access-Control-Expose-Headers（服务器允许暴露给客户端访问的Header）"，常见的"simple response header"有：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified和Pragma。

9>onreadystatechange()：onreadystatechange事件会在xhr.readyState属性发生变化时触发。示例：

var http = new XMLHttpRequest();
http.open("POST","/project/test.php",true);
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
http.overrideMimeType("text/plain; charset = utf-8");
var form = document.getElementById("info");
http.send(serialize(form));
http.onreadystatechange = function(){
　　if (http.readyState == 4 && http.status == 200) {
　　　　　alert(http.responseText);
　　} else {
　　　　　alert(http.statusText);
　　}
};

10>loadstart：当程序开始加载时，loadstart事件将被触发。

11>progress：进度事件会被触发用来指示一个操作正在进行中。

12>error：当一个资源加载失败时会触发error事件。

13>load ：当一个资源及其依赖资源已完成加载时，将触发load事件。

14>timeout：当进度由于预定时间到期而终止时，会触发timeout事件。

15>loadend：当一个资源加载进度停止时 (例如，在已经分派“错误”，“中止”或“加载”之后)，触发loadend事件。

3、XMLHttpRequest的版本：

1>XMLHttpRequest Level 1：

XMLHttpRequest对象的主要属性有：

①readyState： XMLHttpRequest对象的状态；

②status：服务器返回的状态码，等于200表示一切正常；

③responseText：服务器返回的文本数据；

④statusText：服务器返回的状态文本。

XMLHttpRequest Level 1的缺点：

①只支持文本数据的传送，无法用来读取和上传二进制文件；

②传送和接收数据时，没有进度信息，只能提示有没有完成；

③受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据；

2>XMLHttpRequest Level 2：

在XMLHttpRequest Level 1的基础上做了如下改进：

①可以设置HTTP请求的超时时间；

②可以使用FormData对象（HTML5新增的对象）管理表单数据；

③可以上传文件；

④可以请求不同域名下的数据（跨域请求）；

CORS跨域资源共享（全称：Cross-origin resource sharing）：新版本的XMLHttpRequest对象，可以向不同域名的服务器发出HTTP请求，这叫做 "跨域资源共享"。如果本域名需要跨域访问远程某一域名，需要在该远程域名所在的服务器的Access-Control-Allow-Origin设置本域名。

⑤可以获取服务器端的二进制数据；

⑥可以获得数据传输的进度信息。

参考：http://www.runoob.com/ajax/ajax-tutorial.html

https://www.jianshu.com/p/22f82be980fb