ajax原理

一、ajax原理

    1.创建ajax对象
    2.打开链接
    3.发送请求
    4.接收响应


    ajax的核心:  XMLHttpRequest 

二、GET

创建ajax对象
        不兼容IE6
        var oAjax = new XMLHttpRequest();

        IE678
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');

        兼容写法
        if(window.XMLHttpRequest){
            var oAjax = new XMLHttpRequest();
        }else{
            var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
        }
    打开链接
        oAjax.open('打开方式','url?data',是否异步);

        同步
                一次只能做一件事
        异步
                同时做多件事
        oAjax.open('GET','xxx?xxx=xxx',true);
    发送请求
        oAjax.send();
    接收响应
        oAjax.onreadystatechange = function(){
            判断ajax状态码
            if(oAjax.readyState==4){
                判断http状态码
                if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                    成功
                    oAjax.responseText
                    响应文本
                }else{
                    失败
                }
            }
        }

三、POST

创建ajax对象
        不兼容IE6
        var oAjax = new XMLHttpRequest();

        IE678
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');

        兼容写法
        if(window.XMLHttpRequest){
            var oAjax = new XMLHttpRequest();
        }else{
            var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
        }
    打开链接
        oAjax.open('打开方式','url?data',是否异步);

        同步
                一次只能做一件事
        异步
                同时做多件事
        oAjax.open('POST','url',true);
    设置请求头部
        oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    发送请求
        oAjax.send(data);
    接收响应
        oAjax.onreadystatechange = function(){
            判断ajax状态码
            if(oAjax.readyState==4){
                判断http状态码
                if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                    成功
                    oAjax.responseText
                    响应文本
                }else{
                    失败
                }
            }
        }

四、ajax状态码

        0   准备成功,未发送
        1   发送成功
        2   接收原始数据成功1
        3   解析数据成功
        4   完成

五、HTTP状态码

http状态码是3位数

       2字头代表成功

        304         重定向(Not Modify)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容