美文网首页
ajax原理

ajax原理

作者: 晓箬 | 来源:发表于2017-11-01 09:48 被阅读0次

    一、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)
    

    相关文章

      网友评论

          本文标题:ajax原理

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