概念:Ajax是一种在不加载整个网页,就可以部分更新网页的技术。
① 运用HTML和CSS来实现网页,表达信息;
② 运用XMLHttpRequest和Web服务器来进行数据的异步交换;
③ 运用js操作DOM,实现动态局部刷新。
XMLHttpRequest对象
实例化: var request = new XMLHttpRequest();
如何兼容IE5、IE6甚至更早的浏览器?
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // IE7+,FireFox,CHrome,OPera...
} else {
request = new ActiveXObject("Microsoft.XMLHttp"); // IE6,IE5
}
Http: Http是一套计算机通过网络进行协议的规则,使得浏览器向服务器去请求信息和服务;
Http协议是一种无状态的协议,使得浏览器和服务器不建立持久的联系,服务端不保留客户端传递的信息,这个连接没有任何记忆。
如果后续需要之前传递的信息,则需要重新传递。
一个完整的Http请求包括哪些内容?
① 建立TCP连接
② Web浏览器向Web服务器发送请求命令
③ Web浏览器发送请求头信息
④ Web服务器应答
⑤ Web服务器发送应答头信息
⑥ Web服务器向浏览器发送数据
⑦ Web服务器关闭TCP连接
一个http请求包括:
① 请求的动作(GET/POST)
② 正在请求的URL,即请求的地址
③ 请求头 (包括客户端环境信息,身份验证信息等)
④ 请求体,即正文部分 (包括客户提交的查询字符串信息,表单信息等)
一个http响应包括:
① 一个由数字和文字组成的状态码,用来显示请求是成功还是失败
② 响应头,和请求头一样包含很多有用的信 (包括服务器类型,日期时间等)
③ 响应体,即响应正文
GET请求和POST请求的区别:
GET:一般用于获取信息;使用URL传递参数;对所发送的信息的数量有限制,一般在2000个字符。
POST: 一般用于修改服务器上的信息,对信息的隐私性好,对信息数量无上限。
XMLHttpRequest发送请求:
.open(method,url,aync)
.setRequsetHeader()
.send(String)
XMLHttpRequest取得响应:
.responseText: 获取字符串形式的响应数据
.responseXML: 获取XML形式的响应数据
.status/statusText:以数字和文本形式返回http状态码
.getAllResponseHeader(): 获取服务器所有的响应报头
.getRequestHeader(): 查询响应中某个字段的值
readyState属性
0:请求未初始化,open还没有调用
1:服务器连接已建立,open已调用
2:请求已经接收,也就是接收到了请求头信息了
3: 请求处理中,也就是接收到响应主体了
4: 请求已完成,且响应已就绪,也就是项英已经完成了
通过监听readystate获取返回的信息
eg.
request.onreadystatechange = function () {
if (request.readystate == 4 && request.state === 200){
// to do sth...
}
}