什么是AJAX?
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和 XML），是一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。
AJAX的工作原理
Ajax的工作原理相当于在用户和服务器之间加了一个中间层(AJAX引擎)，使用户操作与服务器响应异步化。客户端发送请求，请求交给xhr，xhr把请求提交给服务器，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示：
AJAX请求的五个步骤
1.建立XMLHttpRequest对象;
2.设置回调函数;
3.配置请求信息，(如open,get方法)，使用open方法与服务器建立链接;
4.向服务器发送数据;
5.在回调函数中针对不同的响应状态进行处理;
1.创建XMLHttpRequest异步对象
var xhr; //定义一个变量,用于存放XMLHttpRequest对象
if(window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2.设置回调函数
xhr.onreadystatechange = callback；
3.使用open方法与服务器建立连接
// get 方式
xhr.open("get", "test.php", true)
// post 方式发送数据 需要设置请求头
xhr.open("post", "test.php", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
4.向服务器发送数据
// get 不需要传递参数
xhr.send(null)
// post 需要传递参数
xhr.send("name=jay&age=18")
5.在回调函数中对不同的响应状态进行处理
function callback() {
// 判断异步对象的状态
if(xhr.readyState == 4) {
// 判断交互是否成功
if(xhr.status == 200) {
// 获取服务器响应的数据
var res = xhr.responseText
// 解析数据
res = JSON.parse(res)
}
}
}
- ajax中的五种状态码
-
0：请求未初始化
-
1：服务器连接已建立(已调用open方法，但还未调用send)
-
2：请求已接收(已调用send方法)
-
3：请求处理中(请求已到达服务端，正在处理)
-
4：请求已完成，且响应已就绪
-
状态： 200——正确、404——未找到页面、500——错误
-
AJAX请求成功和失败判断
ajax 的 success 和 error 方法根据响应状态码来触发。
当 XMLHttpRequest.status 为 200 的时候，表示响应成功，此时触发 success(). 其他状态码则触发 error()。
- error判断，请求失败
error: function (data) { var json = JSON.stringify(data); alert(json); }- 打印结果：
【readyState】： 0 － （未初始化）还没有调用send()方法 1 － （载入）已调用send()方法，正在发送请求 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容 3 － （交互）正在解析响应内容 4 － （完成）响应内容解析完成，可以在客户端调用了
完整的AJAX实例
// -----1.创建XMLHttpRequest对象，也就是创建一个异步调用对象
var xhr = new XMLHttpRequest();
// -----3. 创建一个新的HTTP请求，并指定该请求的方法、URL及验证信息
xhr.open('post','www.xxx.com',true)
// 接收返回值
// -----2、设置响应HTTP请求状态变化的函数------5.回调函数对不同状态进行处理
xhr.onreadystatechange = function(){ //xhr.onreadystatechange = callback;时间回调
if(xhr.readyState === 4) {
if(xhr.status >= 200 && xhr.status < 300 || CharacterData.status == 304) {
console.log(xhr.responseText);
}
}
}
// -----处理请求参数
postData = {"name1": "value1", "name2": "value2"};
postData = (function(value){
var dataString = "";
for(var key in value){
dataString += key+"="+value[key]+"&";
};
return dataString;
}(postData));
// 设置请求头
xhr.setRequestHeader("Content-type", "applicationx-www-form-urlencoded");
// 异常处理
xhr.onerror = function() {
console.log('Network request failed')
}
// 跨域携带cookie
xhr.withCredentials = true;
// ----4.发出请求
xhr.send(postData);
