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('&');
}
}
