AJAX 上

作者: FF_C | 来源:发表于2018-01-02 22:47 被阅读0次

    学习要点
    1 XMLHttpRequest
    2 GET与POST
    3 封装Ajax

    Ajax技术核心是XMLHttpRequest,简称为XHR。
    XHR的出现,意味着,用户只要触发某事件,在不刷新网页的情况 下,更新服务器最新的数据。
    虽然Ajax中的X代表的是XML,但Ajax通信和数据格式无关,也就是说这种技术 不一定使用XML.

    var xhr= new XMLHttpRequest();
    alert(xhr);    //XMLHttpRequest
    

    //服务端测试
    如果是IE6及以下,那我们必须还需要使用ActiveX库来实现。在低版本IE浏览器可能会遇到三种不同版本的XHR对象 ,即MSXML2.XMLHttp MSXML2.XMLHttp.3.0 MSXML2.XMLHttp6.0 . 我们可以写一个函数。

    function createXHR(){
        if(typeof XMLHttpRequest != 'undefined'){
            return new XMLHttpRequest();
        }else if (type of ActiveXObject !='undefined'){   //IE6
            var versions=[
                'MSXML2.XMLHttp.6.0',
                'MSXML2.XMLHttp.3.0',
                'MSXML2.XMLHttp'
            ];
            for(var i =0; version.length;i++){
                try{
                    return new ActiveXObject(version[i])
                }catch(e){
                    //跳过
                }            
            }
        }else{
            throw new Error('您的系统或浏览器不支持XML对象');
        }
    }
    
    var xhr=createXHR();
    alert(xhr); 
    
    

    在使用XHR对象时,先必须调用 open()方法,它接受三个参数 :
    要发送的请求类型(get post).请求的URL和表示是否异步.

    xhr.open('get','demo.php',false); //对于demo.php的get请求,false同步

    open()方法并不会真正的发送请求,而只是启动一个请求以备发送。通过send()方法进行发送请求,send()方法接受一个参数 ,作为请求主体发送的数据。如果不需要则 必须填为null.执行send()方法之后,请求就会发送到服务器上。
    xhr.send(null);//发送请求

    addEvent(document,'click',function(){
        var xhr=createXHR();
        xhr.open('get','demo.php',false); 
        xhr.send(null);
        alert(xhr.responseText); 
    });
    
    

    PS:demo.php的代码如下
    <?php echo Date('Y-M-D H:i:s')?> //一个时间

    //PS:通过点击事件,不断的向服务器发送请求,然后服务器会时时的返回最新的数据。就是AJAX的功能。IE浏览器第一次会向服务器端请求,获取最新数据,而第二次它就默认获取的缓存数据,导致数据不是最新的。怎么处理缓存,可以使用JS随机字符串

    addEvent(document,'click',function(){
        var xhr=createXHR();
        xhr.open('get','demo.php?rand='+Math.random,false); 
        xhr.send(null);
        alert(xhr.responseText); 
    });
    
    

    当请求发送到服务器端,收到响应后,响应的数据会自动填充XHR对象的属性。那么 一共有四个属性:

    responseText, responseXML,status,statusText

    接受响应后,第一步检查status属性,以确定响应以经成功返回,一般而已HTTP状态码为200作为成功的标志。除了成功的状态代码 ,还有一些别的:400,401,

    addEvent(document,'click',function(){
        var xhr=createXHR();
        xhr.open('get','demo.php?rand='+Math.random,false); 
        xhr.send(null);
        if(xhr.status == 200){
            alert(xhr.responseText);
        }else{
            alert{'获取数据错误! 错误代码:'+xhr.status + '错误信息'+xhr.statusText};
        }
     
    });
    

    我们判断HTTP状态值即可,不建议使用HTTP状态说明 ,因为跨浏览器的时候 ,可能会不太一致。

    相关文章

      网友评论

        本文标题:AJAX 上

        本文链接:https://www.haomeiwen.com/subject/aclcnxtx.html