ajax是什么?
ajax简单的说就是做数据交互使用的。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。
Ajax的核心是JavaScript对象XmlHttpRequest。
ajax是异步的。
同步：一次一个，前一个没完后一个不能开始
异步：一次一堆，前一个没完后一个也能开始
ajax的优点
Ajax的给我们带来的好处大家基本上都深有体会，在这里我只简单的讲几点：
1、 最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。提高用户体验，节约资源，节约带宽。
2、 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3、 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
一、ajax封装
1、 创建
2、 拼字符串
3、 连接服务器
4、 发送
5、 接收
1、ajax封装
当我们要用ajax时候 假设我有一个名字叫ajax的封装函数
ajax({url:'',data:{},type:'',timeout:**,success:fn,error:fn);
url是你要路径/文件等，下面我就假设有一个post.php文件，
data是我们要传的数据，服务器要什么，我们就传什么，下面我就用a,b举例。
type这个是有要交互的类型 类型常用有两种：get，post,（至于jsonp在下面说，和这个不同)。
timeout时间，超过这个时间我就来中断ajax，不能一直等着可不。
注 ：以下我会一直用这些参数来代替。
ajax({
url:'post.php',
data:{
a:12,
b:3
},
type:'post',
timeout:5000,
success:function(res){
alert(res);
},
error:function(){
alert('失败了');
}
})
那么现在我们就要开始写这个封装函数（假设接收行参名为json）：
不解释，先初始化我们传的参数json；
json.data=json.data||{}; //很多时候可能不需要穿数据
json.type=json.type||'get'; //有时候我们并不会穿类型，就让默认是通过get方式操作
json.timeout=json.timeout||0; //这个是终止ajax的时间可能不会传，默认就让是0。
var timer=null; //这个往了方便下面使用
第一步 ：创建ajax对象，因为ie不兼容的问题，所以要进行一次判断再创建
//window.XMLHttpRequest条件是判断有没有这个东西；如果有就用这个创建，没有就走else
if(window.XMLHttpRequest) {
var oAjax=new XMLHttpRequest(); //非iE
}else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP'); //IE
}
第二步 ：拼接我们传过来的数据，我们要的是：post.php?a=12&b=3
这里面有必要说一下，有时候可能传过来的数据是中文的,所以编码一下
encodeURIComponent编码
decodeURIComponent解码
var arr=[]; //先建一个空数组，用来装我们的数据；
for(var name in json.data){ //data数据传来的是一个json
arr.push(encodeURIComponent(name)+'='+encodeURIComponent(json.data[name])); //把数据用=号拼接
}
var sData=arr.join('&'); //最后把数据变成字符串用&拼接；
第三步 ：链接服务器发送数据
因为post和get方式传输不同
POST和GET相比：
1. 方法不同
2. 数据发送地方不同——url+data、send(data)
3. POST多一个头
所以要判断一下
if(json.type=='get'){
oAjax.open('GET',json.url+'?'+sData,true); //连接：方法，地址数据，异步
oAjax.send(); //发送
}else{
oAjax.open('POST',json.url,true); //连接：方式，地址，异步
oAjax.setRequestHeader('content-type','application/x-www-form-urlencoded'); //发送头
oAjax.send(sData); //发送
}
第四步 ：接收服务器返回的东西
这里面需要说的是
on ready state change=>当通信状态变化
ajax的readystate的状态
readyState
0：初始化 ajax对象刚刚创建
1：已连接 ajax已经连接到服务器
2：已发送
3：已接收-头
4：已接收-内容
只有到第四步的时候才操作
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){ //当加载状态到第四步的时候才算真正的成功
clearTimeout(timer); //继续往下看（清掉下面的一个定时器）
//这个地方oAjax.status是状态码 http=>超文本传输协议
//其中200-300之间是成功，304已经请求过了 浏览器有缓存 这两个算是成功
if((oAjax.status>=200&&oAjax.status<300) || oAjax.status==304){
//这一步是通过传过来的success回调函数把成功的数据返回出去
json.success&&json.success(oAjax.responseText);
}else{
//这一步代表失败，我们把失败的原因返回出去，以便方便分析和操作
json.error&&json.error(oAjax.status);
}
}
};
//这一步是比较特殊，就是如果请求超过我们传输进入的时间，就把ajax给中断。不过首先判断有没有传时间。
if(json.timeout){
timer=setTimeout(function(){
oAjax.abort();
},json.timeout)
}
ok到这一步ajax的封装已经完成了。
ajax有一个最大的缺点，就是正常情况下不能跨域。
很多人说可以，那是因为很多库里面把jsonp和ajax封装到一块了，所有感觉是ajax跨域，实际上不是。
2、jsonp封装
下面开始说一下jsonp吧
jsonp：数据交互方式、可跨域
原理：本地定义一个函数，根据script可以跨域的特性，通过script 在远程服务器上带着数据执行这个函数
不多墨迹直接上代码
也直接用ajax的传参方式来封装
jsonp({
url:'http://suggestion.baidu.com/su', //要访问数据的地址接口
data:{
'wd':str, //需要穿的数据
'cb':'show' //函数名
},
success:function(json){}
})
下面开始写封装,不过多解释跟上面ajax差不多看吧。
function jsonp(json){
var data=json.data;
var arr=[];
for(var name in data){
arr.push(name+'='+data[name]);
}
var sData=arr.join('&');
var oS=document.createElement('script');
oS.src=json.url+'?'+sData;
document.head.appendChild(oS);
window.show=function(str){
json.success(str) ;
};
}
二、不同框架中Ajax的使用
下面，简单的说一下jq以及vue，anguar中ajax使用
框架中封装的不用看，使用库、框架等，不用管是怎么实现的，尽管用就行。这面ajax就是传参的格式等不同。去看看api文档就行。
1. get方式
首先说一下get方式
a、 jq中 ：
$.ajax({
url:**url,
data:{
a:15,
b:13
},
type:'get',
timeout:5000,
success:function(res){
},
error:function(){}
})
b、 angular中 ：
$http.get(url,{
params:{
a:15,
b:12
}})
.then(
function(res){},
function(){}
)
c、 vue中 ：
this.$http.get(
url,
{a:15,b:23}
)
.then(
function(res){},
function(){}
)
总结：这里面基本是没有区别，但是需要注意的是angular，和vue中 成功和失败的两个回调函数是写在后面.then里面。
以及angular中传输数据是里面的params参数这个里面写。仔细注意传参方式就行，看看就懂了。
2. post方式
下面说一下post吧。
a、 jq中 ：
$.ajax({
url:'post.php',
type:'post',
timeout:5000,
data:{
a:16,
b:14
},
success:function(res){
},
error:function(){
}
})
b、 angular中：
//注意angular中post传输有问题，需要把传输的头以及拼接方法改一下
angular.config(['$httpProvider',function($httpProvider){
$httpProvider.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';
$httpProvider.defaults.transformRequest=function(data){
var json=data.params;
var arr=[];
for(var name in json){
arr.push(name+'='+json[name]);
}
var sData=arr.join('&');
return sData;
};
}]);
//开始交互
$http.post(url,{
params:{
a:13,
b:12
}
})
.then(
function(res){},
function(){}
)
c、 vue中 ：
//注意 vue中post需要多传输一个 'emulateJSON':true
this.$http.post(url,
{a:12,b:13},
{'emulateJSON':true})
.then(
function(res){},
function(){}
)
总结：jq中和之前传输没是区别。
就是angular和vue中：angular需要把传输方式传输的头部改一下，以及拼接数据的方法修改才行。（angular太狂妄，想让服务器配合它，但服务器不鸟它），vue中也需要改一下 不过就简单多了就多传一个参数：'emulateJSON':true
3. jsonp
下面说一下jsonp：
a、 jq中：
//需要多传一个jsonp:'cb', dataType:'jsonp' 这个跟get，post有区别。
$.ajax(
{url:url,
jsonp:'cb',
dataType:'jsonp',
data:{
wd:**
},
success:function(res){},
error:function(){}
}
)
b、 angular中：
//注意这个里面 传参还是一样 但是需要多传一个cb:'JSON_CALLBACK'
$http.jsonp(url,{
params:{
wd:***,
cb:'JSON_CALLBACK'
}
})
.then(
function(res){},
function(){}
)
c、 vue中 ：
//这个要多传一个jsonp:'cb' 不过这个cb根据不同的数据接口变化
this.$http.jsonp(url,
{wd:***},
{jsonp:'cb'})
.then(
function (res) {},
function () {}
)
总结一下：jq中注意：jsonp需要多传一个jsonp:'cb', dataType:'jsonp' 这个跟get，post有区别。
angular中注意：这个里面 传参还是一样 但是需要多传一个cb:'JSON_CALLBACK'。
vue中注意：这个要多传一个jsonp:'cb' 不过cb根据不同的数据接口变化
本文源于以下文章的学习与整理
作者：虚幻的锈色
链接：https://www.jianshu.com/p/163f32d52084
网友评论