关于ajax的基础知识

Posted 2021-12-20 hellonico

一、是什么

　　一种异步请求数据的web开发技术，对于改善用户体验和页面性能很有帮助。简单的说就是在不需要刷新页面的情况下实现局部dom的更新。应用场景如：模糊查询以及验证提示等。

二、原理

　　因为js是一个单线程的脚本语言，那么他是如何实现ajax异步的呢？这就得益于流浪器提供的一个XMLHttpRequest对象。我们举个例子：领导想找小李让其汇报下工作。

　　　　1、领导告诉秘书叫小李过来

　　　　2、领导接着干别的事儿

　　　　3、秘书去叫小李

　　　　4、秘书领小李过来

　　　　5、秘书告诉领导小李来了

　　　　6、小李向领导汇报工作

　　以上基本可以模拟ajax的请求过程，其中XMLHttpRequest对象就扮演了秘书一角色，使得流浪器可以发出http请求接收http响应。流浪器发出请求之后就可以做其他的事情了，等收到XMLHttpRequest对象返回的数据就开始渲染页面。

三、使用

<script type="text/javascript">
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.open("POST","test.html",true);  
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//post方法要设置请求头  
    xhr.send("fname=Henry&lname=Ford");  //post请求参数放在send里面，即请求体


    //1、同步处理
    document.getElementById("xxx").innerText = xhr.responseText
    //2、异步处理
    xhr.onreadystatechange=function()
        if(xhr.readyState == 4 && xhr.status ==200)
            document.getElementById("xxx").innerText = xhr.responseText
        
    
</script>