XMLHttpRequest对象 /《Ajax全接触》课程总结

XMLHttpRequest 对象

var xhr;
if(window.XMLHttpRequest){
    // IE7+、FireFox、Chrome ...
    xhr = new XMLHttpRequest();
} else {
    // IE5、IE6
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

XHR英文全名XMLHttpRequest，中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言，Http超文本传输协议，Request请求。XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

    * 只支持文本数据的传送，无法用来读取和上传二进制文件。
    * 传送和接收数据时，没有进度信息，只能提示有没有完成。
    * 受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据。

一、Http请求、响应过程7步：
1、建立TCP连接
2、Web浏览器向服务器发送请求命令
3、Web浏览器发送请求头信息
4、服务器应答
5、服务器回传应答头信息
6、服务器向浏览器发送数据
7、关闭TCP连接
二、Http请求（Request 四部分组成）
1、Http请求的方法或动作，如GET、POST

1.1 GET：
一般用于信息的获取/查询，不修改数据本身；
使用URL传递参数；
对所发送的信息数量有限制，一般在2000个字符。
1.2 POST：
一般用于修改服务器上的资源；
对所发送信息数量无限制。

2、请求的URL地址
3、请求头，包含客户端系统环境信息、身份验证信息等
4、请求体，即请求正文。可包含客户提交的查询字符串、表单信息等
三、Http响应（Response 三部分组成）
1、状态码，由3位数字和文字构成，用来说明请求是成功还是失败。状态码说明：

1XX：信息类，表示收到浏览器请求，正在进一步处理中
2XX：已成功，用户请求被正确接收、理解和处理，如200 OK
3XX：重定向，请求失败，客户必须采取进一步的动作
4XX：客户端错误，客户端提交的请求有错误，如404页面/资源不存在
5XX：服务器错误，不能完成对请求的处理，如500

2、响应体，与请求头类似，包含许多有用信息，如服务器类型、日期时间、内容类型及长度等等
3、响应体，即响应正文
四、XMLHttpRequest对象方法

// **请求Request部分**
xhr.open('POST', 'receive-page.php', true);
// open(method, url, async)
// method: 请求方法，GET、POST等
// url: 请求地址，绝对地址或相对地址
// async: 是否为异步请求，默认为true
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// 请求头部发送内容格式
// Content-type介绍：http://www.runoob.com/http/http-content-type.html
xhr.send();
// **响应Response部分**
xhr.onreadystatechange = function(){
    // onreadystatechange监听readyState属性b
    if(xhr.readyState===4){
        // readyState属性值
        // 0：请求未初始化，open方法还没有调用
        // 1：服务器连接已建立，opne方法已调用
        // 2：请求已接收，即服务器已接收到请求头信息
        // 3：请求处理中
        // 4：请求处理已完成，服务器响应结束
        if(xhr.status===200){
            // 状态码 200 ok
            // status和statusText
            console.log(xhr.responseText);
            document.getElementById('id').innerHTML = xhr.responseText;
            // responseText：获得字符串形式的响应数据
            // responseXML：获得XML形式的响应数据
        } else {
            alert('Error: '+ xhr.status);
        }
    }
}

其他参数说明
1、getAllResponseHeader() 获取所有响应头信息
2、getResponseHeader() 查询响应中的某个字段的值
五、jQuery中的Ajax
1、jQuery.ajax([setting])
type 类型，POST或GET
url 发送请求的地址
data 是一个对象，发送到服务器的数据
dataType 预期服务器返回的数据类型。若未指定，jQuery将根据HTTP包MIME信息自动判断。目前流行json格式。
success: function(data){ ... } 请求成功的回调函数
error 请求失败的回调函数，传入XMLHttpRequest对象
2、jQuery Ajax

jQuery.ajax({
    type: 'post',
    url: 'receive-page.php',
    data: {},
    success: function(data){
        console.log(data);
        $('#id').text(data);
    },
    error: function(){
        // ...
    }
});

六、处理跨域的方式
http:// www . abc.com : 8080 / receive-page.php
(协议) (子域名) (主域名) (端口号) (请求资源地址)
当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间资源请求就叫做“跨域”
JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象，js的同源策略限制。
1、服务器后台代理
通过在同域名的Web服务器端创建一个代理
2、JSONP
可用于解决主流浏览器的跨域数据访问的问题

// a.com 页面中 jsonp.js
function jsonp(json){
    alert(json['name']);
}

// b.com 页面中引入jsonp.js文件
// <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.a.com/jsonp.js"></script>
jsonp({"name": "洪七", "age": "32"});

该方法只支持get请求
3、XHR2
H5提供的XMLHttpRequest Level 2可以实现跨域访问及其它的一些新功能；

// 相比老版本的XMLHttpRequest对象：
    * 可以设置 HTTP 请求的时限。
    * 可以使用 FormData 对象管理表单数据。
    * 可以上传文件。
    * 可以请求不同域名下的数据（跨域请求）。
    * 可以获取服务器端的二进制数据。
    * 可以获得数据传输的进度信息。

IE10以下版本的浏览器都不支持此方法
在服务器端的配置：

header("Access-Control-Allow-Origin:*"); // * 代表任意域名
header("Access-Control-Allow-Methods: POST, GET");

扩展阅读 "XMLHttpRequest Level 2 使用指南"：http://kb.cnblogs.com/page/157047/