JavaScript渣渣到大神手册

AJAX 上

2018-01-02  本文已影响0人  FF_C

学习要点
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状态说明 ,因为跨浏览器的时候 ,可能会不太一致。

上一篇 下一篇

猜你喜欢

热点阅读