Ajax的基本原理是：XMLHttpRequest物件(簡稱XHR物件)，XHR為向伺服器傳送請求和解析伺服器響應提供了流暢的介面。能夠以非同步方式從伺服器獲得更多資訊。意味著使用者不必重新整理頁面也能取得新資料，然後通過DOM將資料插入到頁面中。
XMLHttpRequest物件方法如下：
abort()：停止當前的請求；
open(“method”,”URL”,[asyncFlag]) ：
等常見的方法；
XHR的基本用法：
在使用XHR物件時，要呼叫的第一個方法是open()方法，它有三個引數，第一個引數是：需要傳送請求的型別(get或者post)，第二個引數是請求的url，第三個引數是請求的布林值(true是非同步,false是同步)；
xhr.open(‘get’,’http://127.0.0.1/ajax/ajax.php’,false);
如上程式碼會啟動一個get請求ajax.php,但是請注意：open方法並不會真正發請求，而只是啟動一個請求以備傳送；
要傳送真正請求必須使用send()方法；如下：
xhr.open(‘get’,’http://127.0.0.1/ajax/ajax.php’,false);
xhr.send(null);
send的方法接收一個引數，需要請求傳送的資料，如果請求不需要傳送資料，需要傳送一個null，因為對於有些瀏覽器這是必須的；上面第三個引數傳的是false，是同步請求，伺服器接收到響應後再繼續執行後面的程式碼，響應後的資料會自動填充XHR物件的屬性，XHR有以下屬性：
responseText: 作為響應主體被返回的文字。
responseXML: 如果響應的內容是”text/xml” 或 “application/xml”,這個屬性將儲存包含響應資料的XML DOM文件；
status: 響應http狀態；
statusText: http狀態說明；
在接收到響應後，第一步是檢查status狀態，如果狀態時200，說明已經成功返回，此時responseText屬性已經就緒；如果狀態是304，說明資源未被修改，可以直接使用瀏覽器快取的版本，當然，響應是有效的；如下ajax請求程式碼；
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 建立xhr物件方法如下： function createXHR(){ var xhr; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest(); }else{ // code for IE6, IE5 xhr=new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; } var xhr = createXHR(); xhr.open('get','http://127.0.0.1/ajax/ajax.php',false); xhr.send(null); if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { console.log(xhr.responseText); }else { console.log(xhr.status); } |
ajax.php程式碼如下：
|
1 2 3 4 |
<?php $data = json_decode(file_get_contents("php://input")); echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}'); ?> |
發ajax請求後，在控制檯中列印如下：
說明已經請求成功；
上面的demo程式碼是同步請求，但是有時候我們需要傳送非同步請求，才能讓javascript後續程式碼繼續執行而不會堵塞，此時，我們可以檢測XHR物件的readyState屬性，該屬性表示請求/響應當前活動階段；這個屬性取值如下：
0：未初始化。尚未呼叫open()方法；
1：啟動。已經呼叫open()方法，但未呼叫send()方法；
2：傳送。已經呼叫send()方法，但尚未接收到響應；
3：接收。已經接收到部分資料；
4：完成。已經接收到全部響應資料，而且可以在客戶端使用了；
readyState屬性值由一個值變為另一個值，就會觸發一次readystatechange事件。可以利用這個事件檢測每次狀態變化後的readyState值，但是必須在呼叫open()方法之前指定onreadystatechange事件；如下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// 建立xhr物件方法如下： function createXHR(){ var xhr; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest(); }else{ // code for IE6, IE5 xhr=new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; } var xhr = createXHR(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { console.log(xhr.responseText); }else { console.log(xhr.status); } } } xhr.open('get','http://127.0.0.1/ajax/ajax.php',false); xhr.send(null); |
如上程式碼，在處理onreadystatechange事件時使用了xhr物件，沒有使用this物件，原因是onreadystatechange事件處理程式的作用域的問題；如果使用this物件，在有的瀏覽器下會執行失敗，或者導致錯誤發生；
理解Http頭部資訊
每個http請求和響應都會帶有響應的頭部資訊，xhr物件也提供了操作這兩種頭部(請求頭部和響應頭部的)資訊的方法；
預設情況下，在傳送XHR請求的同時，還會傳送下列頭部資訊：
Accept: 瀏覽器能夠處理的內容型別；
Accept-Charset: 瀏覽器能夠顯示的字符集；
Accept-Encoding: 瀏覽器能夠處理的壓縮編碼；
Accept-Language: 瀏覽器當前設定的語言；
Connection: 瀏覽器與伺服器之間連線的型別；
Cookie：當前頁面設定的cookie；
Host：發出請求頁面所在的域；
Referer：發出請求的頁面url。
User-Agent: 瀏覽器的使用者代理字串。
如下ajax.php請求所示：
我們還可以使用setRequestHeader()方法可以設定自定義的請求頭部資訊，這個方法接收2個引數：頭部欄位的名稱和頭部欄位的值；要成功傳送請求頭部資訊，必須在呼叫open()方法之後且呼叫send()方法之前呼叫setRequestHeader()；如下demo所示：
|
1 2 3 4 5 |
xhr.open('get','http://127.0.0.1/ajax/ajax.php',false); xhr.setRequestHeader("myHeader","myValue"); xhr.send(null); |
截圖如下：
呼叫getAllResponseHeaders()方法則可以取得一個包含所有頭部資訊的長字串，如上程式碼中在onreadystatechange事件中新增getAllResponseHeaders()方法：
|
1 2 3 4 5 6 7 8 9 |
xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { var myHeader = xhr.getAllResponseHeaders();; console.log(myHeader); }else { console.log(xhr.status); } } |
列印如下：
理解GET請求
在ajax中，有常見的get請求或者post請求，使用get請求時，我們是把引數的名-值對經過encodeURIComponent()進行編碼，然後放到URL的末尾，所有名值對必須由和好(&)分割；如下程式碼：
|
1 |
xhr.open('get','http://127.0.0.1/ajax/ajax.php?name1=value1&name2=value2',true); |
下面我們可以封裝一個方法可以輔助向現有的URL的末尾新增查詢字串引數；
|
1 2 3 4 5 |
function addURLParam(url,name,value) { url += url.indexOf("?") == -1 ? "?" : "&"; url += encodeURIComponent(name) + "=" + encodeURIComponent(value); return url; } |
如下程式碼測試：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// 建立xhr物件方法如下： function createXHR(){ var xhr; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest(); }else{ // code for IE6, IE5 xhr=new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; } var xhr = createXHR(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { var myHeader = xhr.getAllResponseHeaders();; console.log(myHeader); console.log(xhr.responseText); }else { console.log(xhr.status); } } } var url = "http://127.0.0.1/ajax/ajax.php"; url = addURLParam(url,"name1","value1"); url = addURLParam(url,"name2","value2"); xhr.open('get',url,true); xhr.setRequestHeader("myHeader","myValue"); xhr.send(null); function addURLParam(url,name,value) { url += url.indexOf("?") == -1 ? "?" : "&"; url += encodeURIComponent(name) + "=" + encodeURIComponent(value); return url; } |
如下截圖所示：
理解POST請求：
Post請求時作為請求的主體提交，post請求的主體可以是非常多的資料，而且格式不限；在open方法的第一個引數傳入post，就可以初始化post請求，如下：xhr.open(‘post’,”http://127.0.0.1/ajax/ajax.php”,true);
接下來我們需要使用send()方法來傳送資料，傳入的引數可以是任何的字串或者form表單序列化之後的資料；比如我們現在可以使用xhr來模仿表單提交資料，首先我們需要將Content-Type頭部資訊設定為application/x-www-form-urlencoded, 也就是表單提交的內容型別，其次以適當的格式建立一個字串，比如form表單序列化資料，然後通過xhr傳送到伺服器端，
如下HTML程式碼：
|
1 2 3 4 |
<form id="form"> <input name="user-name" value="aaa"/> <input name="user-email" value="233"/> </form> |
JS程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
// 序列化的程式碼 function serialize(form) { var arrs = [], field = null, i, len, j, optLen, option, optValue; for(i = 0,len = form.elements.length; i < len; i++) { field = form.elements[i]; switch(field.type) { case "select-one": case "select-multiple": if(field.name.length) { for(j = 0,optLen = field.options.length; j < optLen; j++) { option = field.options[j]; if(option.selected) { optValue = ''; if(option.hasAttribute) { optValue = option.hasAttribute("value") ? option.value : option.text; }else { optValue = option.attributes["value"].specified ? option.value : option.text; } arrs.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(optValue)); } } } break; case undefined: //欄位集 case "file": // 檔案輸入 case "submit": // 提交按鈕 case "reset": // 重置按鈕 case "button": // 自定義按鈕 break; case "radio": // 單選框 case "checkbox": // 核取方塊 if(!field.checked) { break; } /* 執行預設動作 */ default: // 不包含沒有名字的表單欄位 if(field.name.length) { arrs.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(field.value)); } } } return arrs.join("&"); } var url = "http://127.0.0.1/ajax/ajax.php"; xhr.open('post',"http://127.0.0.1/ajax/ajax.php",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); var form = document.getElementById("form"); xhr.send(serialize(form)); |
之後我們可以看到form表單序列化之後傳過去的資料如下：
XMLHttpRequest 2級
XMLHttpRequest 1級只是把已有的xhr物件的實現細節描述出來了，而XMLHttpRequest 2級是在原來的基礎上增加了一些規範，但所有的瀏覽器只是實現了他規定的部分內容；如下幾個：
理解FormData
現在web應用中頻繁使用的一項功能是form表單序列化，XMLHttpRequest 2級定義了FormData型別，使用FormData獲取資料與表單序列化資料一樣，但是更簡潔方便；
支援FormData瀏覽器有：firefox4+, safari5+, chrome和Android3+版的webkit.
比如我現在提交form表單資料如下demo：
HTML程式碼：
|
1 2 3 4 |
<form id="form"> <input name="user-name" value="aaa"/> <input name="user-email" value="233"/> </form> |
JS程式碼如下：
|
1 2 3 4 |
var url = "http://127.0.0.1/ajax/ajax.php"; xhr.open('post',"http://127.0.0.1/ajax/ajax.php",true); var form = document.getElementById("form"); xhr.send(new FormData(form)); |
在chrome瀏覽器下如下：
在firefox瀏覽器如下：
使用formData的方便之處體現在不必明確地在XHR物件上設定請求頭部，XHR物件能識別傳入的資料型別是FormData例項，並配置適當的頭部資訊。
理解超時設定
IE8為XHR物件新增了一個timeout屬性，表示請求在等待響應多少毫秒之後停止，在給timeout設定一個數值後，如果在規定的時間之內瀏覽器沒有接受到響應，那麼就會觸發ontimeout事件，那麼就會終止ajax請求，如下程式碼：
|
1 2 3 4 5 6 7 |
var url = "http://127.0.0.1/ajax/ajax.php"; xhr.open('get',"http://127.0.0.1/ajax/ajax.php",true); xhr.timeout = 1; xhr.ontimeout = function(){ alert("111"); }; xhr.send(null); |
如上我把程式碼timeout設定1毫秒，如果請求1毫秒之後沒有返回資料的話，就執行ontimeout事件，並且請求停止掉，目前我測試的瀏覽器chrome和firefox都支援；如下chrome瀏覽器截圖如下：
進度事件
Progress Events規範是W3C的一個工作草案，定義了與客服端伺服器通訊有關的事件，這些事件最早是針對XHR操作的，有以下6個事件；
loadstart: 在接收到響應資料的第一個位元組時觸發；
progress: 在接收響應期間持續不斷的觸發；
error: 在請求發生錯誤時觸發；
abort: 在因為呼叫abort()方法而終止連線時觸發；
load：在接收到完整的響應資料時觸發；
loadend：在通訊完成或者觸發error，abort或load事件後觸發；（這個事件基本上不使用的。）
支援前5個事件的瀏覽器有：firefox3.5+，safari4+，chrome，IOS版的safari和android版的webkit，opera(從11開始)，IE8+只支援load事件；
load事件
Firefox在實現XHR物件的某個版本時，為了簡化非同步互動模型，實現了load事件，用以替代readystatechange事件，響應接收完畢後觸發load事件，因此就沒有必要檢查readyState屬性了；
目前支援的瀏覽器有：firefox，opera，chrome和safari
如下程式碼演示：
|
1 2 3 4 5 6 7 8 9 10 |
var xhr = createXHR(); xhr.onload = function(){ if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { console.log(xhr.responseText); }else { console.log(xhr.status); } } xhr.open('get',"http://127.0.0.1/ajax/ajax.php",true); xhr.send(null); |
progress事件
這個事件在瀏覽器接收資料期間週期性的觸發，而onprogress事件處理程式會接收一個event物件，包含三個屬性，lengthComputable是一個表示進度資訊是否可用的布林值；position表示已經接收的位元組數，totalSize表示根據Content-Length響應頭部確定的預期總位元組數。如下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var xhr = createXHR(); xhr.onload = function(){ if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { console.log(xhr.responseText); }else { console.log(xhr.status); } } xhr.onprogress = function(event) { var divStatus = document.getElementById("status"); if (event.lengthComputable){ divStatus.innerHTML = "Received " + event.position + " of " + event.totalSize +" bytes"; } }; xhr.open('get',"http://127.0.0.1/ajax/ajax.php",true); xhr.send(null); |
截圖執行如下：
跨源資源共享
通過XHR實現ajax通訊的一個主要限制，來源於跨域安全策略。預設情況下，XHR物件只能訪問與包含它的頁面位於同一個域中的資源，因為瀏覽器這樣做的限制就是防止一些惡意操作；那麼CORS（跨源資源共享）的基本原理是：需要由伺服器傳送一個響應標頭就可以讓瀏覽器與伺服器進行溝通；
比如我現在做一個demo來試著看，假如我現在在hosts檔案下繫結2個IP地址：如下：
127.0.0.1 abc.example1.com
127.0.0.1 def.example2.com
那麼現在我 abc.example1.com下有一個頁面ajax.html，如下程式碼：
|
1 2 3 4 5 6 7 8 9 10 |
var xhr = createXHR(); xhr.onload = function(){ if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { console.log(xhr.responseText); }else { console.log(xhr.status); } } xhr.open('POST',"http://def.example2.com/ajax/ajax.php",true); xhr.send(null); |
如上程式碼，在給域下def.example2.com 下的ajax.php發ajax請求，因為是同源策略問題，肯定不成功，如下所示：
現在我們在def.example2.com域下php設定頭部即可；如下程式碼：
header(“Access-Control-Allow-Origin: *”);
ajax.php程式碼如下：
|
1 2 3 4 5 |
<?php header("Access-Control-Allow-Origin: *"); $data = json_decode(file_get_contents("php://input")); echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}'); ?> |
這樣就可以認為大功告成，很高興，看到書上或者網上查詢資料後，也是這麼說的，但是呢 當我再次請求這個頁面的時候http://abc.example1.com/ajax/ajax.html 還是發現因為同源策略的問題，請求不成功，檢視控制檯這樣的錯誤，如下：
|
1 |
XMLHttpRequest cannot load http://def.example2.com/ajax/ajax.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://abc.example1.com' is therefore not allowed access. |
也是同源策略的問題，不允許訪問；繼續通過網上查詢資料，發現原來是我的php.ini裡面的配置出了問題，在php安裝目錄下找到php.ini檔案output_buffering預設為off的。我現在把它設為on就ＯＫ了。如下截圖所示：
我們繼續重啟下php伺服器，即可看到請求成功，這時候我們會喜出往外；這時候我們再看看php請求如下設定：
在php檔案頭部設定header，header(“Access-Control-Allow-Origin: *”);星號意思是所有的請求都可以，但是設定並不安全，所以我們可以針對當前的這個頁面域下設定，如下：
|
1 2 3 4 5 |
<?php header("Access-Control-Allow-Origin: http://abc.example1.com"); $data = json_decode(file_get_contents("php://input")); echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}'); ?> |
我們繼續截圖如下看看：
同樣也可以訪問；但是上面的在IE7-8下還是會報錯，因為同源策略的問題，會報錯，如下截圖所示：
標準瀏覽器下比如chrome或者firefox不會報錯，那麼我們可以看下在IE下，IE如何實現對CORS的支援；
IE對CORS的實現方式如下：
微軟在IE中引入XDR（XDomainRequest）型別，這個物件與XHR類似，但是能實現安全可靠的跨域通訊，XDR物件部分實現了W3C的CORS規範；XDR與XHR不同之處如下：
- Cookie不會隨請求傳送，也不會隨響應返回。
- 只能設定請求頭部資訊中的Content-Type欄位。
- 不能訪問響應頭部資訊。
- 只支援get和post請求。
這些變化使CSRF（Cross-Site Request Forgery，跨站點請求偽造）和XSS(Cross-Site Scripting，跨站點指令碼)的問題得到了緩解，被請求的資源可以根據它認為合適的任意資料(使用者代理，來源頁面等)來決定是否設定Accept-Control-Allow-Origin頭部。作為請求的一部分，Origin頭部的值表示請求的來源域，以便遠端資源明確地識別XDR請求。
XDR物件的使用方法與XHR物件非常相似，先建立一個XDomainRequest物件，如下：
var xdr = new XDomainRequest();
再呼叫open()方法，再呼叫send()方法；但是XDR物件的open（）方法只接受2個引數，請求的型別和URL；
所有XDR的請求都是非同步的，不能用來建立同步請求，請求成功後，會觸發load事件，響應的資料儲存在responseText屬性中；如下demo，我們繼續看下在IE7-8下如何可以跨域請求成功；如下程式碼：
|
1 2 3 4 5 6 |
var xdr = new XDomainRequest(); xdr.onload = function() { alert(xdr.responseText); }; xdr.open('POST',"http://def.example2.com/ajax/ajax.php",true); xdr.send(null); |
現在我們重新整理下頁面可以看到請求成功了，如下所示：
如果響應失敗的話，會呼叫error方法，通知開發人員，如下程式碼：
|
1 2 3 4 5 6 7 8 9 |
var xdr = new XDomainRequest(); xdr.onload = function() { alert(xdr.responseText); }; xdr.onerror = function(){ alert("響應失敗"); }; xdr.open('POST',"http://def.example2.com/ajax/ajax.php",true); xdr.send(null); |
與XHR一樣，XDR物件也支援timeout屬性以及ontimeout事件處理程式，如下程式碼：
|
1 2 3 4 |
xdr.timeout = 1; xdr.ontimeout = function(){ alert("Request took too long."); }; |
請求超過1毫秒後沒有響應，就呼叫ontimeout事件；
標準瀏覽器下實現對CORS的實現
其實實現方式在第一次講解跨域的時候我們已經講過了，可以翻到上面，但是我們現在重新來理一遍；
Firefox3.5+，Safari4+，chrome，ios版的safari和android平臺中的webkit都通過XMLHttpRequest物件實現了CORS的原生支援；如下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { alert(xhr.responseText); }else { console.log(xhr.status); } } } xhr.open('POST',"http://def.example2.com/ajax/ajax.php",true); xhr.send(null); |
如上程式碼即可就可以實現在標準瀏覽器下ajax的跨域通訊問題；
與IE中的XDR物件不同，通過跨域XHR物件可以訪問status和statusText屬性，而且還支援同步請求，跨域XHR物件也有一些限制，如下限制：
- 不能使用setRequestHeader()設定自定義頭部；
- 不能傳送和接收cookie。
- 呼叫getAllResponseHeaders()方法總會返回空字串。
跨瀏覽器的CORS的實現
如上介紹的是對IE下和標準瀏覽器下2種方案實現跨域的實現方案，下面我們可以來封裝下對常用的所有瀏覽器支援下，首先我們先檢查是否存在withCredentials屬性(標準瀏覽器下有這個屬性)，再結合檢測XDomainRequest物件是否存在(就可以檢測到IE)，如下是所有封裝的程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function createCORSRequest(method,url) { var xhr = new XMLHttpRequest(); if("withCredentials" in xhr) { xhr.open(method,url,true); }else if(typeof XDomainRequest != 'undefined') { xhr = new XDomainRequest(); xhr.open(method,url); }else { xhr = null; } return xhr; } var request = createCORSRequest('POST',"http://def.example2.com/ajax/ajax.php"); if(request) { request.onload = function(){ alert(request.responseText); } request.send(); } |
瀏覽器支援程度：IE7+，firefox3.5+，safari4+，chrome3+等；
JSONP跨域技術的基本原理
Jsonp跨域get請求是如何實現的；我們先來了解下為什麼會出現跨域？
Javascript是一種在web開發中經常使用的前端動態指令碼技術，在javascript中，有一個很重要的安全限制，被稱為”same-Origin-Policy”同源策略，這一策略對於javascript程式碼能夠訪問的頁面內容作了很重要的限制，即javascript只能訪問與包含它的文件在同一域下的內容；
JSONP的基本原理是：利用在頁面中建立<script>節點的方法向不同域提交http請求的方法稱為JSONP。
比如我現在的ajax.html頁面http://abc.example1.com/ajax/ajax.html 下提交ajax請求http://def.example2.com/ajax/ajax.php get請求，我們可以在ajax.html頁面動態的建立script標籤，如下：
|
1 2 3 4 |
var eleScript= document.createElement("script"); eleScript.type = "text/javascript"; eleScript.src = "http://def.example2.com/ajax/ajax.php"; document.getElementsByTagName("HEAD")[0].appendChild(eleScript); |
當get請求從http://def.example2.com/ajax/ajax.php 返回時，可以返回一斷javascript程式碼，這段程式碼會自動執行，可以用來負責呼叫頁面http://abc.example1.com/ajax/ajax.html 中的一個callback函式；
理解JSONP執行過程如下：
首先在客戶端註冊一個callback(比如jsonpcallback)，然後把callback名字(比如叫jsonp123456)傳給伺服器端，伺服器端得到callback名字後，需要用jsonp123456（）把將要輸出的json內容包括起來，此時，伺服器生成的json資料才能被客戶端正確接收；然後以javascript語法的方式，生成一個function，function的名字就是傳遞回來的引數jsonp123456.然後就可以在客戶端直接執行呼叫jsonp123456這個函式了；
JSONP的優點：它不像XMLHttpRequest物件實現ajax請求受到同源策略的限制，它在所有的瀏覽器都支援，比如古老的IE6也支援，並且在請求完成後可以通過callback的方式傳回結果；
JSONP的缺點：只支援get請求，不支援post請求，它只支援http跨域的請求情況，不能解決不同域的兩個頁面之間如何進行javascript呼叫的問題；