AJAX 核心 —— XMLHTTPRequest 对象回顾
一、AJAX概述
不使用 AJAX 的网页,如果要更新内容,需要重载整个页面。
AJAX ( Asynchronous Javascript And XML ,异步 Javascript 和 XML)用于异步通讯,通过在后台与服务器进行少量的数据交换,在不重载整个网页的情况下,对网页局部实现异步刷新。
二、AJAX核心
JavaScript 中使用 XMLHTTPRequest 对象(XHR)实现 AJAX 请求。使用这个对象之前,先了解一下它的属性和方法:
属性 | 描述 |
readyState |
表示 XMLHttpRequest 对象的状态: 0:未初始化状态。已创建 XMLHTTPRequest 对象。 1:准备发送状态。已调用 open 方法,send 方法尚未调用。 2:已经发送状态。send 方法已经调用,尚未开始接受数据。 3:正在接收状态。已经接收到 HTTP 响应头信息,但是响应体还没有完全接收到。 4:完成响应状态。响应数据接受完成。 |
onreadystatechange |
当 readyState 值(XMLHTTPRequest 对象状态)发生改变时的响应事件。 |
responseText |
服务器响应的文本内容。 |
responseXML |
服务器响应的 XML 内容。 |
status |
服务器响应的 HTTP 状态码。200:OK。304:资源未修改。404:页面未找到。500:服务器错误。 |
statusText |
服务器响应的 HTTP 状态文本。OK、资源未修改、页面未找到、服务器错误等。 |
方法 | 描述 |
open(method,url, asynch,username, password) |
指定和服务器端交互的HTTP方法,URL地址,即其他请求信息; Method:表示http请求方法,一般使用"GET","POST"。 url:表示请求的服务器的地址。 asynch:表示是否异步(ture),默认为 true。 后边两个可以不指定。 username 和 password 分别表示用户名和密码,提供 HTTP 认证机制需要的用户名和密码。 |
setRequestHeader(header, value) |
设置请求头。header: 头名称。value: 头的值。 |
getResponseHeader(header) | 获取指定 header 的响应头信息。 |
getAllResponseHeaders() | 获取所有响应头信息。 |
send(content) |
向服务器发出请求,如果采用异步方式,该方法会立即返回。 content:POST请求时以字符串或 formData 对象传进去,GET请求时不填参数或设为 null 。 |
abort() |
中止请求。XMLHTTPRequest 对象恢复到状态0(未初始化)。 |
三、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 数据,用 responseXML 属性获取 // DOM 操作 } } // 第三步,建立请求 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请求体
这里,强调以下四点(引用自 廖雪峰的官方网站 ,第 4 条略作修改)
-
通过检测 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 请求不需要参数(或者 null),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 的中文手册,实例请参考 http://www.cnblogs.com/jayleke/archive/2012/08/10/2633174.html
六、推荐阅读
比较详细的 AJAX 介绍,并且文末涉及了 CORS 跨域:廖雪峰的官方网站-AJAX
七、扩展阅读
AJAX 请求不可避免的涉及到两个问题:第一是AJAX以何种格式来交换数据(通常是JSON);第二是跨域需求是怎么解决的(通常是JSONP)。这篇文章有通俗易懂的解释:【原创】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
既然 AJAX 请求涉及了跨域,那么什么是跨域?跨域的实现方式又有哪些(JSONP、CORS、服务器跨域、postmessage ...... )?推荐看看这篇文章:跨域请求的几种实现方式
还有就是GET 请求经常会读取缓存,解决方法是在 url 后面添加一个随机数,或者用 jQuery 的 $.ajaxSetup({cache: false}); 等,详细请看这篇文章: 解决jquery load,get 方法缓存数据问题