ajax的底层前后台交互
为什么用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")