Ajax

Posted 2021-01-03 xdl-smile

AJAX - 阿贾克斯
    1、什么是AJAX
        AJAX：Asynchronous javascript And Xml（异步JS和Xml）
            同步访问：
                当客户端向服务器发送请求时，服务器在处理过程中，浏览器只能等待
                缺点：整个网页会刷新
            异步访问：
                当客户端向服务器发送请求时，服务器在处理过程中，浏览器可以做其他的事情，不需要一直等待，效率较高
                优点：局部刷新
        使用场合：
            1、搜索建议
            2、表单验证
            3、前后端完全分离
    2、AJAX核心对象 异步对象 - XMLHttpRequest
        1、什么是XMLHttpRequest
            主要称为‘异步对象’，代替浏览器向服务器发送请求并接收响应
            该对象主要由JS来提供
        2、创建异步对象
            主流的异步对象是XMLHttpRequest类型的，并且主流的浏览器（IE7+，Chrom，FireFox，Safari，Oper）已经全部支持该对象。低版本浏览器（IE7，IE6）是无法使用XMLHttpRequest，需要使用ActiveXObject来创建异步对象

            判断浏览器是否支持XMLHttpRequest
            if(window.XMLHttpRequest){
                //如果浏览器支持XMLHttpRequest的话，window.XMLHttpRequest则是一个非undefined的值，
                //如果浏览器不支持的话，此处就是一个undefined
                var xhr = new XMLHttpRquest();
            }else{
                //浏览器不支持XMLHttpRequest
                var xhr = new ActiveXobject("Microsoft.XMLHTTP");
            }

function createXhr(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }else {
        return new ActiveXObject(‘Microsoft.XMLHTTP‘);
    }
}

<button onclick="getXhr()">创建XHR</button>
    <script src="/static/js/common.js"></script>
    <script>
        function getXhr(){
            console.log(createXhr())
        }
    </script>

   <button onclick="getXhr()">创建XHR</button>
    <script>
        function getXhr(){
            //判断浏览器是否支持xhr
            console.log(window.XMLHttpRequest)
            if(window.XMLHttpRequest){
                var xhr = new XMLHttpRequest();
                console.log(xhr);
            }else{
                var xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
            }
        }
    </script>