前后端交互的革命技术之ajax及其使用场景


什么是ajax

以前前后端是后端返回整个HTML 每次更新一些数据,他都会整个网页刷新

现在ajax帮助我们向服务器发异步请求

同步和异步

同步:事件执行结束再执行下事件

异步:执行事件的时候,同时执行另一个

原理

通过XMLHttpRequest对象向服务器发异步请求,从服务器或的数据

然后通过JS来操作DOM而更新页面

它是在IES 中首先引入的,是一种异步请求的技术

简单的说,也就是JAVASCRIPT 可以及时向服务器提出请求和处理响应,而不阻塞用户,达到无刷新的效果

注意

JAVAScript是单线程的,会阻塞代码运行,所以引入XMLhttpRequest请求处理异步数据

var xhr
//创建ajax对象
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{//code for IE6,IE5
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
}
//设置请求地址及方式
xhr.open("get","https://suggest.taobao.com/sug?code=utf-8&q=%E5%86%B0%E7%AE%B1&callback=cb",true)
//发送请求
xhr.send()
//等到浏览器返回结果接受响应
// on readystate change 事件
//    readystate属性:请求状态
//    0   (初始化) 还没用调用open()方法
//    1   (载入) 已调用send()方法完成,已收到全部响应内容
//    2   (载入完成)send(),正在发送请求
//    3   (解析) 正在解析响应内容
//    4   (完成) 相应内容解析完成,可以在客户端调用了
//status 属性可设置或返回窗口状态栏中的文本。
xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
        alert('成功')
        //容错处理
        if(xhr.status===200){
            alert(xhr.responseText);
        }
    }else{
        alert('出错了,Err:'+xhr.status)
    }
}

文章作者: Bibooo
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Bibooo !
评论
  目录