初识AJAX

初识AJAX

一、HTTP协议(HTTP/1.1)

请求报文

头行
头部
主体

响应报文

头行（状态码）
头部（expires缓存期限）
主体（HTML文件）

二、HTTP方法

1.GET-从服务器获取一份文档
不安全：用URL传递参数，对任何人可见
幂等：GET请求的次数不会改变信息（不是特别理解，先写下）
对发送信息的数量有限制（200个字符）
2.POST-向服务器发送需处理的数据
对发送信息的数量无限制
3.PUT-将请求的主体存储在服务器上
4.DELETE-从服务器删除一份文档

三、常见状态码

200 OK-请求成功
301 Moved Permanently-资源移动，浏览器自动跳转
304 Not Modified-资源未修改，浏览器读取缓存数据
400 Bad Request-请求语法错误，服务器无法理解
404 Not Found-未找到资源
500 Internal Server Error-服务器内部错误
首位数决定了状态码类型
1:服务器收到请求，正在处理
2:成功
3:重定向
4:客户端错误
5:服务器错误

四、AJAX(Asynchronous JavaScript and XML异步的JS和XML)

实例化一个XHR对象（兼容版）

方法一

function getHTTPObject() {
if (typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function() {
try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e) {}
try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e) {}
try {return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e) {}
return false;
}
return new XMLHttpRequest();
}

方法二

var xhr;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

XHR方法

xhr.open()
xhr.setRequestHeader() //POST使用
xhr.send() //POST时需有参数

取得响应

xhr.responseText //字符串形式的响应数据
xhr.responseXML //XML形式的响应数据
xhr.status\xhr.statusText //数字、文本形式的状态码
xhr.getAllResponseHeader() //获取所有响应头
xhr.getResponseHeader() //获取响应头中的某字段

readyState属性（服务器响应的变化）

0：未初始化，open未调用
1：连接建立，open调用
2：请求已接收，服务器已接收头信息
3：请求处理中，已接收主体
4：请求已完成，响应就绪

xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
//do something
}
}