AJAX 核心 —— XMLHTTPRequest 对象回顾记录

时间：2017-07-20 00:59:54 阅读：234 评论：0 收藏：0 [点我收藏+]

标签：useragent pen ajax back 一个 end hang 添加创建

AJAX 概述

　　不使用 AJAX 的网页，如果要更新内容，需要重载整个页面。

　　AJAX （ Asynchronous Javascript And XML ，异步 Javascript 和 XML）用于异步通讯，通过在后台与服务器进行少量的数据交换，在不重载整个网页的情况下，对网页局部实现异步刷新。

AJAX 核心

　　JavaScript 中使用 XMLHTTPRequest 对象（XHR）实现 AJAX 请求。

AJAX 步骤

　　一般步骤如下：

实例化 XMLHTTPRequest 对象（注意 IE 兼容性）
绑定监听事件（onreadystatechange 属性，判断就绪用 readState 属性 == 4，判断响应成功用 status 属性 == 200，获取响应用 responseText 或 responseXML 属性。
建立请求（open() 方法，注意最后一个参数为ture（因为是 AJAX ））
设置请求头（setRequestHeader() 方法，仅限于POST）
发送请求（send() 方法，POST 请求时在 send() 方法添加提交参数）

AJAX 代码

// 第一步，创建 XMLHTTPRequest 对象
var xhr = window.XMLHTTPRequest ? new XMLHTTPRequest() : new ActiveXObject(‘Microsoft.XMLHttp‘);

if(!xhr){
    alert(‘创建 XMLHTTPRequest 对象失败！‘);
    return false;
}

// 第二步，绑定回调函数
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4 && xhr.status = 200){ // 请求就绪 && 响应成功
        var data = xhr.responseText; // 如果是 XML 数据，就用 var data = xhr.responseXML 获取
        
        // DOM 操作
        // document.getElementById("myDiv").innerHTML = data;
    }
}

// 第三部，建立请求
xhr.open("POST", url, true); // 参数三默认为 true（异步），可以不填

// 第四步，设置请求头（仅限于POST）
xhr.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘);

// 第五步，发送请求
xhr.send(‘fname=michael&&lname=jordan‘); // POST请求的请求体

这里，强调以下四点（引用自廖雪峰的官方网站）

通过检测 window 对象是否有 XMLHttpRequest 属性来确定浏览器是否支持标准的XMLHttpRequest。注意，不要根据浏览器的 navigator.userAgent 来检测浏览器是否支持某个 JavaScript 特性，一是因为这个字符串本身可以伪造，二是通过IE版本判断JavaScript特性将非常复杂。
当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 200判断是否是一个成功的响应。
XMLHttpRequest 对象的 open() 方法有3个参数，第一个参数指定是 GET 或者 POST，第二个参数指定 URL 地址，第三个参数指定是否使用异步，默认是true，所以可以不写。注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。
最后调用 send() 方法才真正发送请求。GET 请求不需要参数，POST 请求需要把body部分以字符串或者FormData对象传进去。

jQuery 中的 AJAX

　　直接用 JS 写 AJAX 步骤有些繁琐。jQuery 中封装了 AJAX 的快捷方法。

$.ajax(url,[settings])          // 执行异步 HTTP (Ajax) 请求
$(‘选择器‘).load(url,[data],[callback])	// 从服务器加载数据，把返回 HTML 放入匹配元素
$.get(url,[data],[fn],[type])	// GET 请求加载数据
$.getJSON(url,[data],[fn])	// GET 请求加载 JSON 编码数据
$.getScript(url,[callback])	// GET 请求 JavaScript 文件，并执行
$.post(url,[data],[fn],[type])	// POST 请求加载数据

　　更多jQuery 的AJAX请参考 jQuery 的中文手册，实例请参考 jQuery Ajax 实例 ($.ajax、$.post、$.get)