概述
你可以使用AJAX最主要的两个特性做下列事:
-
在不重新加载页面的情况下发送请求给服务器。
-
接受并使用从服务器发来的数据。
快速上手
var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); // ie7+等现代浏览器 } else if (window.ActiveXObject) { // ie6,老版Opera xhr = new ActiveXObject('Microsft.XMLHTTP'); } xhr.open('get', 'db.json', true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { /* readyState 请求的当前状态 status 响应码 */ xhr.responseText; JSON.parse(xhr.responseText); } } xhr.send();
发送HTTP请求具体步骤
1.创建一个异步调用对象xhr
var xhr = null; // 创建异步对象 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); // ie7+等现代浏览器 } else if (window.ActiveXObject) { // ie6,老版Opera xhr = new ActiveXObject('Microsft.XMLHTTP'); }
2.初始化一个请求
xhr.open('GET', 'db.json', true);
- 第二个参数是你要发送的URL。由于安全原因,默认不能调用第三方URL域名。 确保你在页面中使用的是正确的域名,否则在调用
open()
方法是会有 “权限被拒绝” 错误提示。一个容易犯的错误是你企图通过domain.tld
访问网站, 而不是使用www.domain.tld
。如果你真的需要向另一个域名发送请求, 可以查看 HTTP access control。 - 第三个参数是可选的,用于设置请求是否是异步的。如果设为
true
(默认设置),JavaScript执行会持续,并且在服务器还没有响应的情况下与页面进行交互。
3.设置http请求头的值
请求报文中请求头的Content-Type应该跟随请求体格式的变化而变化
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); httpRequest.send('key1=value1&key2=value2'); xhr.setRequestHeader('Content-Type', 'application/json'); httpRequest.send('{"foo":"123"}');
4.发送请求
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on" //或者其他格式, 类似 multipart/form-data,JSON,XML等。
处理服务器响应
xhr.onreadystatechange
xhr.onreadystatechange = function () { // 若为同步,此代码不用写,直接在send后,用`xhr.responseText`即可。 if (xhr.readyState == 4 && xhr.status == 200) { //在检查完请求状态和HTTP响应码后, 你就可以用服务器返回的数据做任何你想做的了 xhr.responseText; JSON.parse(xhr.responseText); } }
xhr.readyState请求状态
|
名 |
解释 |
---|---|---|
0:未初始化 |
UNSENT |
尚未调用open()方法 |
1:启动 |
OPENED |
已经调用open()方法,已建立服务器连接,但尚未调用send()方法 |
2:发送 |
HEADERS_RESPONSE |
已经调用send()方法,请求已接受,但尚未接受到响应拿不到响应体(responseText),此时可以拿到头.getAllResponseHeaders() |
3:接收 |
LOADING |
已经接收到部分响应数据 |
4:完成 |
DONE |
已经接收到全部响应数据,而且可以在客户端使用 |
xhr.status响应码
xhr.responseText
服务器以文本字符的形式返回
xhr.responseXML
以 XMLDocument 对象方式返回,之后就可以使用JavaScript来处理
本文链接集
跨域问题 HTTP access control
HTTP所有响应码 MDN