Ajax: Aysnc JavaScript and XML
XML: 可拓展的标记语言(在XML文件中使用的标签都是自己拓展的)
利用自己拓展的有规则的标记来存储相关的数据
客户端JavaScript中的方法,用来向服务器端发送请求(还可以传递给服务器端数据),然后把服务器端返回的内容获取到(Ajax一般运行在客户端的浏览器中)
Ajax四步:
-> 创建一个Ajax对象(下面的这种写法在IE6及更低版本的浏览器中不支持)
var xhr = new XMLHttpRequest();
-> 发送前的基本信息配置:
配置请求的方式(get, post, put, delete, ...)
打开一个URL地址(配置向哪一个服务器地址发送请求)
同步还是异步(true: 异步, false: 同步; 默认是true)
[username]: 向服务器提供请求的用户名
[password]: 向服务器提供请求的密码, 这两个值一般不写, 只有服务器做了安全限制, 只允许特定的用户访问时才传递
xhr.open('get', url, false);
-> 给onreadystatechange这个事件绑定一个方法, 监听状态的改变(只要状态改变,就会触发方法执行)
xhr.onreadystatechange = function() {
// -> xhr.readyState: Ajax状态码,可以代表当前Ajax处理的进度
0 -> unset: 当前的请求还没有发送
1 -> opened: URL地址已经打开(发送前的参数配置已经完成)
2 -> header_received: 响应头信息已经接受
3 -> loading: 主要返回的内容正在服务器端进行处理
4 -> done: 响应主体内容已经成功返回到客户端
-> xhr.status: HTTP网络状态码,描述了服务器响应内容的状态
200 或者 /^\d{2}$/ -> 都代表响应主体内容已经成功返回
301 -> 永久重定向/永久转移
302 -> 临时重定向/临时转移 服务器的负载均衡
304 -> 本次获取的内容是读取缓存中的数据
400 -> 客户端传递给服务器端的参数出现未知错误
401 -> 无权限访问
404 -> 客户端访问的地址不存在
500 -> 未知的服务器错误
503 -> 服务器已经超负荷 一台服务器能承受一万人,那10001个人访问,如果没有做服务器的负载均衡,那么此时状态码变为501
if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
var data xhr.responseText;
}
}
-> 发送请求: 参数是请求主体中传递给服务器的内容
xhr.send(null);