Ajax

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>