Javascript Ajax学习笔记
1. 什么是ajax?
AJAX: 异步JavaScript和XML,是指一种创建交互式网页应用的网页开发技术。(不严格)定义: 客户端向服务器端发送请求,而无需刷新当前页面的技术.
2.http请求
(1)HTTP(HyperText Transfer Protocol)是一种无状态的协议.
无状态是指浏览器和服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后服务器返回响应,然后连接就被关闭.
在服务器端不会保留连接的有关信息.
HTTP遵循请求/应答模型.浏览器向服务器发送请求,服务器处理请求并返回适当的应答。所有HTTP连接都被构造成一套请求和应答。
(2)HTTP请求方法:
· GET 通过请求URI得到资源
· POST,用于添加新的内容
· PUT用于修改某个内容
· DELETE,删除某个内容
· CONNECT,用于代理进行传输,如使用SSL
· OPTIONS询问可以执行哪些方法
· PATCH,部分文档更改
· PROPFIND, (wedav)查看属性
· PROPPATCH, (wedav)设置属性
· MKCOL, (wedav)创建集合(文件夹)
· COPY, (wedav)拷贝
· MOVE, (wedav)移动
· LOCK, (wedav)加锁
· UNLOCK (wedav)解锁
· TRACE用于远程诊断服务器
· HEAD类似于GET, 但是不返回body信息,用于检查对象是否存在,以及得到对象的元数据
3.实现Ajax请求步骤
(1)创建Ajax的核心对象
// 创建Ajax的核心对象(兼容IE6)
function getXhr(){
var xhr = null;
try{
//其他浏览器
xhr = new XMLHttpRequest();
//IE浏览器
try{
//IE7+
xhr = new ActiveXObject("Microsoft.XMLHttp");
}catch(e){
//IE6
xhr = new ActiveXObject("Msxml2.XMLHttp");
}
}
return xhr;
}
var xhr = getXhr();
(2)建立与服务器简历连接
* 使用的是XMLHttpRequest对象的open()方法.
xhr.open(type, url, async):
* type - 请求类型(方式) GET | POST
* url - 请求地址
* async - 是否异步(Boolean值)
* true - 默认值,表示异步
* false - 不建议使用,表示同步
* 注意
* 是XMLHttpRequest对象的第一个版本
(3)向服务器端发送请求数据
如果为GET请求,xhr.send(null),请求数据添加在URL后面
如果为POST请求,调用send()方法前,设置请求头信息。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
然后xhr.send(data | null);
(4)接收数据
使用的是XMLHttpRequest对象的onreadystatechange事件,用于监听服务器端的通信状态;
使用的是XMLHttpRequest对象的readyState属性, 判断服务器端当前的通信状态.
备选值
* 0 - 未初始化
* 1 - 正在连接
* 2 - 正在请求
* 3 - 正在响应
* 4 - 响应完毕
使用的是XMLHttpRequest对象的status属性
* 作用 - 表示服务器端的状态码
判断当前的请求是否成功
* 200 - 表示成功
* 404 - 网页未找到
* 500 - 服务器端的内部错误
* 使用的是XMLHttpRequest对象的responseText属性
* 是以字符串类型接收服务器端响应的数据内容
xhr.onreadystatechange = function(){
var XMLHttpReq = xhr;
if (XMLHttpReq.readyState == 4 && XMLHttpReq.status == 200) {
var text = XMLHttpReq.responseText;
console.log(text);
}
};