AJAX学习笔记1：XHR对象介绍

Bowman_han 发布于2019-08-20 11:09 / 3396人阅读

摘要：是第一款引入对象的浏览器。在中，对象是通过库中的一个对象实现的。在收到响应后，响应的数据会自动填充对象的属性，相关的属性简介如下。作为响应主体被返回的文本。属性对象的属性表示请求响应过程的当前活动阶段。

创建Ajax对象的跨浏览器兼容方法

Ajax 技术的核心是 XMLHttpRequest 对象（简称 XHR），这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。IE5 是第一款引入 XHR 对象的浏览器。在 IE5 中， XHR 对象是通过 MSXML 库中的一个 ActiveX对象实现的。因此，在 IE 中可能会遇到三种不同版本的 XHR 对象，即 MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MXSML2.XMLHttp.6.0。因此，创建XHR对象应该是用一个函数：

//适用于 IE7 之前的版本
function createXHR(){
    if (typeof arguments.callee.activeXString != "string"){
        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
        "MSXML2.XMLHttp"],i, len;
        for (i=0,len=versions.length; i < len; i++){
            try {
                new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                break;
            } catch (ex){
                //跳过
            }
        }
    }
    return new ActiveXObject(arguments.callee.activeXString);
}

鉴于IE7+、 Firefox、 Opera、 Chrome 和 Safari 都支持原生的 XHR 对象，在这些浏览器中创建 XHR 对象要像下面这样使用 XMLHttpRequest 构造函数。

var xhr = new XMLHttpRequest();

在必须支持IE7以下版本时，必须使用以下函数：

function createXHR(){
    /*如果浏览器支持原生XMLHttpRequest对象，返回用原生对象创建的XMLHttpRequest对象*/
    if (typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined"){
     //否则使用MSXML库的ActiveX对象创建
    if (typeof arguments.callee.activeXString != "string"){
        var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
        "MSXML2.XMLHttp"],i, len;
        for (i=0,len=versions.length; i < len; i++){
            try {
                new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                break;
            } catch (ex){
                //跳过
            }
        }
    }
    return new ActiveXObject(arguments.callee.activeXString);
    } else {   //都不支持则返回错误
    throw new Error("No XHR object available.");
    }
}

创建对象的浏览器兼容方式是 var xhr = createXHR();

XHR对象的两个方法

open()：它接受 3 个参数：要发送的请求的类型（"get"、 "post"等）、请求的 URL 和表示是否异步发送请求的布尔值（true代表异步，false代表同步，默认是是异步）。下面就是调用这个方法的例子。
xhr.open("get", "example.php", false);
调用 open()方法并不会真正发送请求，而只是启动一个请求以备发送。具体发送请求需要使用.send()方法。

send()方法：
xhr.open("get", "example.txt", false);
xhr.send(null);
这里的 send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入 null，因为这个参数对有些浏览器来说是必需的。

在收到响应后，响应的数据会自动填充 XHR 对象的属性，相关的属性简介如下。
 responseText：作为响应主体被返回的文本。
 responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保
存包含着响应数据的 XML DOM 文档。对于非XML数据，responseXML的值是null。
 status：响应的 HTTP 状态。200~300之间是正常响应，304表示请求的资源未修改，因此可以使用浏览器中缓存的数据，也即响应有效。
 statusText： HTTP 状态的说明。

readyState 属性

XHR 对象的 readyState 属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。
 0：未初始化。尚未调用 open()方法。
 1：启动。已经调用 open()方法，但尚未调用 send()方法。
 2：发送。已经调用 send()方法，但尚未接收到响应。
 3：接收。已经接收到部分响应数据。
 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
只要 readyState 属性的值由一个值变成另一个值，都会触发一次 onreadystatechange 事件。可以利用这个事件来检测每次状态变化后 readyState 的值。通常，我们只对 readyState 值为 4 的阶段感兴趣，因为这时所有数据都已经就绪。不过，必须在调用 open()之前指定 onreadystatechange事件处理程序才能确保跨浏览器兼容性。使用DOM0级事件处理程序的代码如下：

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){ //每次readyState改变都检查一次，仅当4时才真正作用
            //如果状态码>200且<300，或者为304,输出响应文本
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true); //添加onreadystatechange事件后使用open()方法
xhr.send(null);

XHR的两种请求方式：GET and POST

GET请求：
GET 是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到 URL 的末尾，以便将信息发送给服务器。对 XHR 而言，位于传入 open()方法的 URL 末尾的查询字符串必须经过正确的编码才行。使用 GET 请求经常会发生的一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用 encodeURIComponent()进行编码，然后才能放到 URL 的末尾；而且所有名-值对儿都必须由和号（&）分隔：

xhr.open("get", "example.php?name1=value1&name2=value2", true);

POST请求：通常用于向服务器发送应该被保存的数据。 POST 请求应该把数据作为请求的主体提交，而 GET 请求传统上不是这样。 POST 请求的主体可以包含非常多的数据，
而且格式不限。在 open()方法第一个参数的位置传入"post"，就可以初始化一个 POST 请求，如下面的例子所示。

xhr.open("post", "example.php", true);

发送 POST 请求的第二步就是向 send()方法中传入某些数据。由于 XHR 最初的设计主要是为了处理 XML，因此可以在此传入 XML DOM 文档，传入的文档经序列化之后将作为请求主体被提交到服务器。当然，也可以在此传入任何想发送到服务器的字符串。

云服务器 GPU云服务器对象属性介绍 self对象介绍 AJAX核心对象学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80420.html

AJAX的学习笔记

摘要：的学习笔记是异步和的缩写，它的作用是执行异步的网络请求。这就是一个格式的，向这个地址请求，将得到一个回调函数，执行就得到数据。 AJAX的学习笔记 AJAX是异步JavaScript和XML的缩写，它的作用是执行异步的网络请求。因为JS是线性同步，如果需要用户向浏览器发送一个请求，那么就需要等浏览器接收到了结果才能继续运行，如果发送到接受的时间太长，浏览器就会很长时间处于假死状态，这样...

RobinTang 2019-08-22 14:03 评论0 收藏0
AJAX学习笔记2：XHR实现跨域资源共享（CORS）以及和JSONP的对比

摘要：补充同源策略还应该对一些特殊情况做处理，比如限制协议下脚本的访问权限。注意，该请求的查询字符串有一个参数，用来指定回调函数的名字，这对于是必需的。 1 前言：首先对参考文章作者表示感谢，你们的经验总结给我们这些新手提供了太多资源。本文致力于解决AJAX的CORS问题，我在逻辑上进行了梳理：首先，系统的总结了CORS问题的起源---同源策略；其次，介绍JSONP这种仅能支持GET请求的...

QiuyueZhong 2019-08-20 11:36 评论0 收藏0
AJAX学习笔记2：XHR实现跨域资源共享（CORS）以及和JSONP的对比

摘要：补充同源策略还应该对一些特殊情况做处理，比如限制协议下脚本的访问权限。注意，该请求的查询字符串有一个参数，用来指定回调函数的名字，这对于是必需的。 1 前言：首先对参考文章作者表示感谢，你们的经验总结给我们这些新手提供了太多资源。本文致力于解决AJAX的CORS问题，我在逻辑上进行了梳理：首先，系统的总结了CORS问题的起源---同源策略；其次，介绍JSONP这种仅能支持GET请求的...

makeFoxPlay 2019-08-01 15:49 评论0 收藏0
Ajax学习笔记

摘要：最近在学，刚刚入门，用到很多与相关的交互。也用了挺久的了，想写一下学习笔记来记录一下。实现过程是的基础，是核心对象，首先要实例化一个对象进行请求，规定请求的类型以及是否异步处理请求。响应服务器状态响应服务器状态涉及对象的三个重要的属性。最近在学php，刚刚入门，用到很多与Ajax相关的交互。Ajax也用了挺久的了，想写一下学习笔记来记录一下。今天先简单写一下原理和过程。欢迎大家一起探...

Forest10 2019-08-23 14:01 评论0 收藏0
Ajax学习笔记

摘要：最近在学，刚刚入门，用到很多与相关的交互。也用了挺久的了，想写一下学习笔记来记录一下。实现过程是的基础，是核心对象，首先要实例化一个对象进行请求，规定请求的类型以及是否异步处理请求。响应服务器状态响应服务器状态涉及对象的三个重要的属性。最近在学php，刚刚入门，用到很多与Ajax相关的交互。Ajax也用了挺久的了，想写一下学习笔记来记录一下。今天先简单写一下原理和过程。欢迎大家一起探...

wing324 2019-08-02 12:14 评论0 收藏0