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")

 

posted @ 2017-10-22 22:01  鱼樱前端  阅读(359)  评论(0编辑  收藏  举报