ajax是一种客户端与服务器之间的异步通信技术,可实现页面局部数据刷新(不刷新整个页面);
1. 同步请求:
在ajax出现之前,前端数据请求使用的同步请求策略,每次请求都会刷新整个页面;
原因:使用同步请求,服务器的响应数据直接被送到浏览器内存中,并覆盖浏览器内存中的原有数据,浏览器收到响应数据后,只能展示服务器返回的数据,无法展示在发送请求之前浏览器中添加的数据。
缺点:浏览器直面面对服务器,也就是浏览器发送请求后,服务器未返回数据时,浏览器处于等待,卡死状态,页面无法进行其他操作;但页面请求数据量较大,回显数据较多时,后台代码编写较困难,增加服务器压力。
优点:
2.异步请求
浏览器将请求交给代理对象(XMLHttpRequest,IE6-:ActiveXObject(“microsoft XMLHTTP”)),有代理对象发送请求,接收、解析响应数据,并把数据更新对应的位置。
手写ajax
// 创建异步请求对象
var xhr = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject(“microsoft XMLHTTP”);
// 调用 open 函数
xhr.open('GET','http://127.0.0.1:8000/api/blog/detail/id=1',true);
// 调用 send 函数
xhr.send();
// 判断 响应数据是否返回成功 当xhr.readySate变化时,会调用onreadystatechange函数
xhr.onreadystatechange = function () {
if(xhr.readyState === 4) {
if(xhr.status === '200' || xhr.status === '304') {
console.log(xhr.response)
}
else {
console.log(xhr)
}
}
}
xhr.readyState | 表示状态 |
---|---|
0 | 创建请求对象,未调用open方法 |
1 | 调用open方法创建连接成功,未调用send方法 |
2 | 调用send方法,服务器已接收请求,未响应 |
3 | 服务器已返回部分响应数据,未完全返回 |
4 | 服务器返回响应数据完成 |
jQuery ajax
$.ajax({
type: "GET",
url: "http://127.0.0.1:8000/api/blog/detail/id=1",
dataType: "JSON",
async: true,
success: function (data) {
if(data.success) {
console.log(data)
}
else {
console.log(data.msg)
}
}
error: function (err) {
console.error(err)
}
})
3.GET和POST区别
-
get使用url传参、post使用请求实体传参;
-
get有长度限制,大致1024字节,post没有长度限制;url是没有长度限制,get的长度限制是因为浏览器对url的长度进行了限制;
-
post相对于get更加安全;地址栏看不到数据,浏览器会存储历史url,泄漏信息;
-
一般用get获取服务器数据,用post向服务器传递数据。