ajax的底层前后台交互

Posted 2020-10-11 鱼樱、、

为什么用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")