JavaScript Ajax
简介
Ajax，Asynchronous JavaScript + XML，核心是XMLHttpRequest对象。
IE7+，Chrome，Firefox，Safari原生支持XHR对象。
在JavaScript中一个客户端Http请求通常有四个部分组成。
- Http请求方法或动作；
- 正在请求的URL；
- 一个可选的请求头集合，其中可能包括身份验证信息；
- 一个可选的请求主体。
一个服务端返回的HTTP响应包含3个部分。
- 一个数字和文字组成的状态码，用显示请求的成功和失败；
- 一个响应头集合；
- 一个响应主体。
XMLHttpRequest()使用
使用XHR建立http请求代码示例.
var xhr = new XMLHttpRequest();
//打开http请求,第一个参数 http请求的方法或动作,第二次参数http的请求URL,第三个参数ajax是否为异步执行。
xhr.open("get","example.php?value1=a&value2=b",false);
// 设置可选的请求头集合，主要包括对请求主体、当前浏览器环节、cookie的信息。
//使用多个setRequestHeader()方法会对请求合集增加内容。
xhr.setRequsetHeader("Content-Type","text/plain");
//设置请求主体,对于get方法参数在url中填写,故使用null代替。
xhr.send(null);
使用XHR处理服务器返回响应
//本端代码插入上端第10行和第1行之间。
//对XHR对象中自带onreadyStatechange事件,添加事件函数。该事件监听readyState值的变化。
xhr.onreadyStatechange = function(){
//xhr.readyState表示请求或响应过程中的活动阶段,0表示初始化；1表示启动;2表示发送;3表示接受;4表示完成。
//处理服务器返回响应,在请求或响应过程完成阶段。
if(xhr.readyState == 4){
//xhr.status表示响应的HTTP状态码,200表示成功,304表示请求资源没有修改可以使用缓存中的版本,这两个状态码表示响应有效。
if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
//解析响应头集合,识别响应主体内容
var type = xhr.getResponseHeader("Content-Type");
if(type.match(/^text/)){
//处理响应主体
alert(xhr.responseText);
}
}
}
}
