什么是AJAX?
Asynchronous Javascript And Xml
Asynchornous:异步的
同步(一个任务没完成没法进行下一个任务的场景)
同步访问:当客户端向服务器发送请求时,服务器在处理过程中,浏览器只能等待,效率偏低
异步访问:当客户端向服务器发送请求时,服务器在处理过程中,客户端可以做其他的操作,
不需要一直等待,效率偏高
Xml: eXtensible Markup Language(可扩展的 标签 语言)
AJAX的优点:
1.异步访问
2.局部刷新
AJAX的使用场合:
1.搜索建议
2.表单验证
3.前后端完全分离
AJAX的核心对象-异步对象(XMLHttpRequest)
什么是XMLHttpRequest
简称’xhr’
称为异步对象,代替浏览器向服务器发送请求并接受响应
xhr 是由JS来提供
创建异步对象(xhr)
主流的异步对象是 XMLHttpRequest 类型的,并且主流
浏览器都支持(IE7+,chorme,Firefox,Safari,Opera)全部支持,但在IE低版本
浏览器中(IE6及其以下),就不支持XMLHttpRequest,需要使用ActiveXObject()
来创建异步对象
创建:
支持 XMLHttpRequest: new XMLHttpRequest()
不支持 XMLHttpRequest:new ActiveXObject('Microsoft.XMLHTTP')
创建一个对象 XMLHttpRequest
- 创建一个对象 XMLHttpRequest
var xhr = new XMLHttpRequest();为了支持ie6以及更早的版本,要 var xhr=new ActiveXObject()
2.监听请求成功后的状态变化
3.设置请求参数
4.发起请求
5.操作DOM,实现动态局部刷新
而什么是一个完整的HTTP请求呢?
一个完整的请求由四部分组成
接下来,我们就要监听请求成功的状态变化了
onreadystatechange:用来监听readyState的变化的
readyState:表示当前请求的后台的状态
status:表示处理的结果
其中readyState:表示当前请求的后台的状态
0:请求未初始化(还没有调用open())
1:请求已经建立,但是还没有发送(还没有调用send())
2:请求已经发送,正在处理中
3:请求正在处理中,通常响应中已经有部分数据可以用了
4:响应已经完成,可以获取并使用服务器的响应了
而status:表示处理的结果(状态码)
1XX,表示收到请求正在处理中
status == 200 是表示处理的结果是OK的
状态码:200到300是指服务端正常返回
304:如果网页自请求者上次请求后再也没有更改过,应将服务器配置为返回此响应,进而节省带宽和开销
404:找不到对象(404 not found)
503:服务器超时
设置请求参数
xhr对象接受三个参数
1:表示请求类型
2:表示请求的网址
3:表示是否异步
get/post/put/delete
Get和post方法的区别:
get是获取数据,get的send方法的参数可以是null或者空,对发送信息有限制,一般在2000个字符,一般是用来查询(幂等)
post可以发送数据,但是在使用post方法发送数据,需要使用setRequestHeader()来添加HTTP头,同时,post的send()方法需要写入要发送的数据的值, 一般用于修改服务器上的资源,对信息数量无限制,也更安全
3常见问题
使用post提交需要忘记content-type的问题
4.解决方案
xhr.open(“post”, “/carrots-admin-ajax/a/login”,true);
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
xhr.send(“name=” + name + “&pwd=” + code);
Content-type要作为请求头放在open和send之间
编码
var xhr = new XMLHttpRequest();
function ip() {
var name = $("#name").val();
var code = $("#code").val();
// 指定通信过程中状态改变时的回调函数
xhr.open("post", "/carrots-admin-ajax/a/login",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=" + name + "&pwd=" + code);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
if (JSON.parse(xhr.responseText).code >= 0) {
window.location.href = "http://dev.admin.carrots.ptteng.com/";
} else {
$(".alert").html("该用户不存在或密码不正确");
}
}
}
};
}
$(function () {
$("#summit").click(function () {
var name = $("#name").val();
var code = $("#pwd").val();
$.ajax({
type: "POST",
url: "/carrots-admin-ajax/a/login",
data: {
"name": name,
"pwd": code
},
// beforeSend: function(xhr){xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");},
datatype:"json",
success: function (data) {
console.log(data);
if (JSON.parse(data).code==0) {
alert(JSON.parse(data).message);
}
else {
alert(JSON.parse(data).message)
}
}
})
})
});