ajax的底层前后台交互
2021-05-20 01:30
标签：验证 切换页面 change 原理 set activex function 为什么 后台 ajax的底层前后台交互 标签：验证 切换页面 change 原理 set activex function 为什么 后台 原文地址：http://www.cnblogs.com/lhl66/p/7712191.html为什么用ajax或者它的优点：
异步加载数据，无需切换页面
更加的用户体验，局部刷新，及时验证，操作步骤简化；
节省流量
js控制数据的加载，更加灵活多用。
底层就是XMLHttpRequest对象：
以下就是ajax前后台交互底层的原理步骤
if(window.XMLHttpRequest){
var xhr =new XMLHttpRequest(); ----->创建XMLHttpRequest对象；
}else{
var xhr = ActiveXObject("Microsoft.XMLHTTP");------>兼容写法
}
xhr,open("GET","./demo.json?user=lili&password=12345&t"=new Date().getTime(),true);----->加个时间戳禁止缓存
xhr.send();
xhr.onreadystatechange = function(){
if (4 == xhr.readyState) {
if (200 == xhr.status) {
var json1 = xhr.responseText; ------>获取到json数据
console.log(json1)
var json2 = eval("("+json1+")");------>对数据处理
console.log(json2)
}
}
}
post请求一般无需考虑缓存
xhr.open("POST","./demo.json",true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("user=lili&password=12345")
下一篇：前端基础--jquery