浅谈AJAX

2017-01-21 本文已影响0人 JsonWithPadding

ajax大家应该都会很熟悉，我们在工作中或多或少的都会接触到ajax，今天我来谈一谈我对ajax的理解。

什么是ajax

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。我觉得ajax更像是一把钥匙，一把打开前端后端之间那道门的钥匙。

ajax相比form表单的优势

很早之前我们都会采用form表单进行数据的传输，但是这里却又很多问题比如：1.刷新页面（用户体验不好）2.不能从服务器取数据
然而ajax可以在不重新加载整个网页的情况下，对网页的某部分进行更新，并且能获取到后台返回给我们的数据，小伙伴们觉得那个更适合我们使用呢。

ajax的传输方式及区别

大家应该都知道ajax的传输方式可以分为get和post两种，然而它们之间却有一些差别:

| 类型 | 大小 | 安全程度 | 传输方式 | 是否利于分享 |
|:-------------:|:-------------:|:-------------:|:-------------:|:-------------:|:-------------:|
| GET | 32kB | 不安全 | url传输 | 是 |
| POST | 1GB | 相对安全 | 非url传输数据 | 不是 |

ajax的注意事项

在服务器环境下运行
有缓存（get）应该在传输的数据后面采用：
Math.random();
new Date().getTime();
不用关心文件后缀名
编码格式要一致
返回的都是字符串

ajax的创建步骤

在提到ajax的创建步骤之前我们先聊一聊打电话把，当你要给别人打电话的时候我们需要准备什么呢？首先我们需要弄到一个手机(怎么弄到的我就不问了哈),之后我们要拨打对方的号码，然后我们当然要跟他说一些事情啦，最后我们应该听他对我们的反馈(难不成你要说完就把电话挂断吗？)其实仔细想想这与ajax创建过程不是一样吗？

创建ajax对象

if (window.XMLHttpRequest) {
    //高版本浏览器
    var oAjax=new XMLHttpRequest();
} else{
    //兼容ie低版本
    var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}

建立连接

    //GET方式,这里的data应该为json形式name=value&name1=value...
    oAjax.open('GET',url+'?'+data,true);

    //POST方式
    oAjax.open('POST',url,true);

发送请求

//GET方式
 oAjax.send();

//POST方式，这里需要设置请求头
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//这里的data应该为json形式name=value&name1=value...
oAjax.send(data);

接收数据

//这里的fnSucc和fnErr分别为成功的回调函数，以及失败的回调函数
oAjax.onreadystatechange=function(){
    if(oAjax.readyState==4){
        if(oAjax.status>=200&&oAjax.status<300 ||oAjax.status==304){
          fnSucc && fnSucc(oAjax.responseText);
        }else{
            fnErr && fnErr(oAjax.status);
      }
    }
};

ajax中readyState的状态以及代表的含义

状态	含义
0	UNSEND ajax对象已经准备完毕，但是还没有打开连接
1	OPENDED 已经打开连接(建立好连接)
2	HEADERS-RECEVICED 发送请求完毕，头部信息也接收完毕了
3	LOADING 下载内容(接收内容)
4	DONE 操作完毕

类似于jQuery的方式封装ajax

function ajax(json){
    if(!json.url){
        alert('请求出错');
        return false;
    }
    json.time=json.time||3000;
    json.type=json.type||'get';
    json.data=json.data||{};
    var timer=null;
    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();
    }else{
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    switch (json.type.toLowerCase()){
        case 'get':
            oAjax.open('GET',json.url+'?'+jsonToStr(json.data),true);
            oAjax.send();
        break;
        case 'post':
            oAjax.open('POST',json.url,true);
            oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            oAjax.send(jsonToStr(json.data));
        break;
    }
    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                json.success&&json.success(oAjax.responseText);
            }else{
                json.error&&json.error(oAjax.status);
            }
            clearTimeout(timer);
        }
    }
    timer=setTimeout(function(){
        alert('服务器超时');
        oAjax.onreadystatechange=null;
    },json.time);
    function jsonToStr(json){
        var arr=[];
        json.t=Math.random();
        for(var name in json){
            arr.push(name+'='+json[name]);
        }
        return arr.join('&');
    }
}