ajax是什么：

ajax簡單的說就是做數據交互使用的。

Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然后用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。

Ajax的核心是JavaScript對象XmlHttpRequest。

ajax是異步的。

同步：一次一個，前一個沒完后一個不能開始

異步：一次一堆，前一個沒完后一個也能開始

ajax的優點

Ajax的給我們帶來的好處大家基本上都深有體會，在這里我只簡單的講幾點：

1、 最大的一點是頁面無刷新，在頁面內與服務器通信，給用戶的體驗非常好。提高用戶體驗，節約資源，節約帶寬。

2、 使用異步方式與服務器通信，不需要打斷用戶的操作，具有更加迅速的響應能力。

3、 可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。并且減輕服務器的負擔，ajax的原則是“按需取數據”，可以最大程度的減少冗余請求，和響應對服務器造成的負擔。

4、 基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序。

ajax的js原生封裝吧。

ajax封裝：

1、 創建

2、 拼字符串

3、 連接服務器——

4、 發送——

5、 接收

封裝：

當我們要用ajax時候 假設我有一個名字叫ajax的封裝函數

ajax({url:'',data:{},type:'',timeout:**,success:fn,error:fn);

解釋一下：參數比較多，所有就傳一個json。

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

}

當然出了這個方法還有簡單的，就是性能不好，但是我覺得沒什么區別。

try{

var oAjax=new XMLHttpRequest();

}catch(e){

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

}

第二步 ：拼接傳過來的數據，我們要的是：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)

}

到這一步ajax的封裝已經完成了。

ajax有一個最大的缺點，就是正常情況下不能跨域。

有的說可以，那是因為很多庫里面把jsonp和ajax封裝到一塊了，所有感覺是ajax跨域，實際上不是。

下面開始說一下jsonp吧

jsonp：數據交互方式、可跨域

原理：本地定義一個函數，根據script可以跨域的特性，通過script 在遠程服務器上帶著數據執行這個函數

也直接用ajax的傳參方式來封裝

jsonp({

? url:'http://suggestion.baidu.com/su',? ? //要訪問數據的地址接口

? data:{

? 'wd':str,? ? //需要穿的數據

? 'cb':'show'? ? //函數名

}，

?success:function(json){}

})

開始寫封裝.

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) ;

};

}

jq以及vue，anguar中ajax使用

框架中封裝的不用看，使用庫、框架等，不用管是怎么實現的，盡管用就行。這面ajax就是傳參的格式等不同。去看看api文檔就行。

1、 jq中 ：

$.ajax({

url:**url,

data:{

a:15,

b:13

},

type:'get',

timeout:5000,

success:function(res){

},

error:function(){}

})

2、 angular中 ：

$http.get(url,{

params:{

a:15,

b:12

}})

.then(

function(res){},

function(){}

)

3、 vue中 ：

this.$http.get(

url,

{a:15,b:23}

)

.then(

function(res){},

function(){}

)

總結：這里面基本是沒有區別，但是需要注意的是angular，和vue中 成功和失敗的兩個回調函數是寫在后面.then里面。

以及angular中傳輸數據是里面的params參數這個里面寫。仔細注意傳參方式就行，看看就懂了.

1、 jq中 ：

$.ajax({

url:'post.php',

type:'post',

timeout:5000,

data:{

a:16,

b:14

},

success:function(res){

},

error:function(){

}

})

2、 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(){}

)

3、 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

下面說一下jsonp：

1、 jq中：

//需要多傳一個jsonp:'cb', dataType:'jsonp' 這個跟get，post有區別。

$.ajax(

{url:url,

jsonp:'cb',

dataType:'jsonp',

data:{

wd:**

},

success:function(res){},

error:function(){}

}

)

2、 angular中：

//注意這個里面 傳參還是一樣 但是需要多傳一個cb:'JSON_CALLBACK'

$http.jsonp(url,{

params:{

wd:***,

cb:'JSON_CALLBACK'

}

})

.then(

function(res){},

function(){}

)

3、 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根據不同的數據接口變化