AJax與Jsonp跨域訪問問題小結(jié)

更新時(shí)間：2015年12月09日 08:51:57 投稿：hebedich

本文給大家匯總介紹了JavaScript的AJax，JQuery的AJax以及利用jsonp實(shí)現(xiàn)跨域訪問的問題，非常的細(xì)致全面，有需要的小伙伴可以參考下。

####JavaScript的AJax

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML）
設(shè)計(jì)AJax使用的一種重要技術(shù)是XMLHttpRequest對(duì)象。

創(chuàng)建XMLHttpRequest對(duì)象的方式：

xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // IE瀏覽器支持的創(chuàng)建方式
xmlhttp = new XMLHTTPRequest(); // FireFox,Opera等瀏覽器支持的創(chuàng)建方式
XMLHttp是一套可以在Javascript、VbScript、Jscript等腳本語(yǔ)言中通過http協(xié)議傳送或從接收XML及其他數(shù)據(jù)的一套API?？捎糜谀Mhttp的GET和POST請(qǐng)求。
可以判斷window.XMLHttpRequest對(duì)象是否可用然后創(chuàng)建XMLHttpRequest對(duì)象。
以下是XMLHttpRequest對(duì)象的屬性和使用方法，粘貼過來的，注釋的很詳細(xì)。

<html> 
<head> 
<title>XMLHTTPRequest對(duì)象的說明DEMO</title> 
<script language="javascript" type="text/javascript"> 
<!-- 
var xmlhttp; 
// 創(chuàng)建一個(gè)XMLHTTPRequest對(duì)象 
function createXMLHTTPRequext(){ 
  if(window.ActiveXObject) { 
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
  } 
  else if(window.XMLHTTPRequest){ 
    xmlhttp = new XMLHTTPRequest(); 
  } 
} 
function PostOrder(xmldoc) 
{ 
  createXMLHTTPRequext(); 

  // 方法：open 
  // 創(chuàng)建一個(gè)新的http請(qǐng)求，并指定此請(qǐng)求的方法、URL以及驗(yàn)證信息 
  // 語(yǔ)法：oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword); 
  // 參數(shù) 
  // bstrMethod 
  // http方法，例如：POST、GET、PUT及PROPFIND。大小寫不敏感。 
  // bstrUrl 
  // 請(qǐng)求的URL地址，可以為絕對(duì)地址也可以為相對(duì)地址。 
  // varAsync[可選] 
  // 布爾型，指定此請(qǐng)求是否為異步方式，默認(rèn)為true。如果為真，當(dāng)狀態(tài)改變時(shí)會(huì)調(diào)用onreadystatechange屬性指定的回調(diào)函數(shù)。 
  // bstrUser[可選] 
  // 如果服務(wù)器需要驗(yàn)證，此處指定用戶名，如果未指定，當(dāng)服務(wù)器需要驗(yàn)證時(shí)，會(huì)彈出驗(yàn)證窗口。 
  // bstrPassword[可選] 
  // 驗(yàn)證信息中的密碼部分，如果用戶名為空，則此值將被忽略。 
  // 備注：調(diào)用此方法后，可以調(diào)用send方法向服務(wù)器發(fā)送數(shù)據(jù)。 
  xmlhttp.Open("get", "http://localhost/example.htm", false); 
  // var book = xmlhttp.responseXML.selectSingleNode("http://book[@id='bk101']"); 
  // alert(book.xml); 

  // 屬性：onreadystatechange 
  // onreadystatechange：指定當(dāng)readyState屬性改變時(shí)的事件處理句柄 
  // 語(yǔ)法：oXMLHttpRequest.onreadystatechange = funcMyHandler; 
  // 如下的例子演示當(dāng)XMLHTTPRequest對(duì)象的readyState屬性改變時(shí)調(diào)用HandleStateChange函數(shù)， 
  // 當(dāng)數(shù)據(jù)接收完畢后（readystate == 4）此頁(yè)面上的一個(gè)按鈕將被激活 
  // 備注：此屬性只寫，為W3C文檔對(duì)象模型的擴(kuò)展. 
  xmlhttp.onreadystatechange= HandleStateChange; 

  // 方法：send 
  // 發(fā)送請(qǐng)求到http服務(wù)器并接收回應(yīng) 
  // 語(yǔ)法：oXMLHttpRequest.send(varBody); 
  // 參數(shù)：varBody （欲通過此請(qǐng)求發(fā)送的數(shù)據(jù)。） 
  // 備注：此方法的同步或異步方式取決于open方法中的bAsync參數(shù)，如果bAsync == False，此方法將會(huì)等待請(qǐng)求完成或者超時(shí)時(shí)才會(huì)返回，如果bAsync == True，此方法將立即返回。 
  // This method takes one optional parameter, which is the requestBody to use. The acceptable VARIANT input types are BSTR, SAFEARRAY of UI1 (unsigned bytes), IDispatch to an XML Document Object Model (DOM) object, and IStream *. You can use only chunked encoding (for sending) when sending IStream * input types. The component automatically sets the Content-Length header for all but IStream * input types. 
  // 如果發(fā)送的數(shù)據(jù)為BSTR，則回應(yīng)被編碼為utf-8, 必須在適當(dāng)位置設(shè)置一個(gè)包含charset的文檔類型頭。 
  // If the input type is a SAFEARRAY of UI1, the response is sent as is without additional encoding. The caller must set a Content-Type header with the appropriate content type. 
  // 如果發(fā)送的數(shù)據(jù)為XML DOM object，則回應(yīng)將被編碼為在xml文檔中聲明的編碼，如果在xml文檔中沒有聲明編碼，則使用默認(rèn)的UTF-8。 
  // If the input type is an IStream *, the response is sent as is without additional encoding. The caller must set a Content-Type header with the appropriate content type. 

  xmlhttp.Send(xmldoc); 

  // 方法：getAllResponseHeaders 
  // 獲取響應(yīng)的所有http頭 
  // 語(yǔ)法：strValue = oXMLHttpRequest.getAllResponseHeaders(); 
  // 備注：每個(gè)http頭名稱和值用冒號(hào)分割，并以\r\n結(jié)束。當(dāng)send方法完成后才可調(diào)用該方法。 
  alert(xmlhttp.getAllResponseHeaders()); 
  // 方法：getResponseHeader 
  // 從響應(yīng)信息中獲取指定的http頭 
  // 語(yǔ)法：strValue = oXMLHttpRequest.getResponseHeader(bstrHeader); 
  // 備注：當(dāng)send方法成功后才可調(diào)用該方法。如果服務(wù)器返回的文檔類型為"text/xml", 則這句話 
  // xmlhttp.getResponseHeader("Content-Type");將返回字符串"text/xml"?？梢允褂胓etAllResponseHeaders方法獲取完整的http頭信息。 
  alert(xmlhttp.getResponseHeader("Content-Type")); // 輸出http頭中的Content-Type列：當(dāng)前web服務(wù)器的版本及名稱。 

  document.frmTest.myButton.disabled = true; 

  // 方法：abort 
  // 取消當(dāng)前請(qǐng)求 
  // 語(yǔ)法：oXMLHttpRequest.abort(); 
  // 備注：調(diào)用此方法后，當(dāng)前請(qǐng)求返回UNINITIALIZED 狀態(tài)。 
  // xmlhttp.abort(); 

  // 方法：setRequestHeader 
  // 單獨(dú)指定請(qǐng)求的某個(gè)http頭 
  // 語(yǔ)法：oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue); 
  // 參數(shù)：bstrHeader（字符串，頭名稱。） 
  // bstrValue（字符串，值。） 
  // 備注：如果已經(jīng)存在已此名稱命名的http頭，則覆蓋之。此方法必須在open方法后調(diào)用。 
  // xmlhttp.setRequestHeader(bstrHeader, bstrValue); 
  } 
  function HandleStateChange() 
  { 
  // 屬性：readyState 
  // 返回XMLHTTP請(qǐng)求的當(dāng)前狀態(tài) 
  // 語(yǔ)法：lValue = oXMLHttpRequest.readyState; 
  // 備注：變量，此屬性只讀，狀態(tài)用長(zhǎng)度為4的整型表示.定義如下： 
  // 0 (未初始化) 對(duì)象已建立，但是尚未初始化（尚未調(diào)用open方法） 
  // 1 (初始化) 對(duì)象已建立，尚未調(diào)用send方法 
  // 2 (發(fā)送數(shù)據(jù)) send方法已調(diào)用，但是當(dāng)前的狀態(tài)及http頭未知 
  // 3 (數(shù)據(jù)傳送中) 已接收部分?jǐn)?shù)據(jù)，因?yàn)轫憫?yīng)及http頭不全，這時(shí)通過responseBody和responseText獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤， 
  // 4 (完成) 數(shù)據(jù)接收完畢,此時(shí)可以通過通過responseBody和responseText獲取完整的回應(yīng)數(shù)據(jù) 
  if (xmlhttp.readyState == 4){ 
    document.frmTest.myButton.disabled = false; 

    // 屬性：responseBody 
    // 返回某一格式的服務(wù)器響應(yīng)數(shù)據(jù) 
    // 語(yǔ)法：strValue = oXMLHttpRequest.responseBody; 
    // 備注：變量，此屬性只讀，以u(píng)nsigned array格式表示直接從服務(wù)器返回的未經(jīng)解碼的二進(jìn)制數(shù)據(jù)。 
    alert(xmlhttp.responseBody); 

    // 屬性：responseStream 
    // 以Ado Stream對(duì)象的形式返回響應(yīng)信息 
    // 語(yǔ)法：strValue = oXMLHttpRequest.responseStream; 
    // 備注：變量，此屬性只讀，以Ado Stream對(duì)象的形式返回響應(yīng)信息。 
    alert(xmlhttp.responseStream); 

    // 屬性：responseText 
    // 將響應(yīng)信息作為字符串返回 
    // 語(yǔ)法：strValue = oXMLHttpRequest.responseText; 
    // 備注：變量，此屬性只讀，將響應(yīng)信息作為字符串返回。XMLHTTP嘗試將響應(yīng)信息解碼為Unicode字符串， 
    // XMLHTTP默認(rèn)將響應(yīng)數(shù)據(jù)的編碼定為UTF-8，如果服務(wù)器返回的數(shù)據(jù)帶BOM(byte-order mark)，XMLHTTP可 
    // 以解碼任何UCS-2 (big or little endian)或者UCS-4 數(shù)據(jù)。注意，如果服務(wù)器返回的是xml文檔，此屬 
    // 性并不處理xml文檔中的編碼聲明。你需要使用responseXML來處理。 
    alert(xmlhttp.responseText); 

    // 屬性：responseXML 
    // 將響應(yīng)信息格式化為Xml Document對(duì)象并返回 
    // 語(yǔ)法：var objDispatch = oXMLHttpRequest.responseXML; 
    // 備注：變量，此屬性只讀，將響應(yīng)信息格式化為Xml Document對(duì)象并返回。如果響應(yīng)數(shù)據(jù)不是有效的XML文檔， 
    // 此屬性本身不返回XMLDOMParseError，可以通過處理過的DOMDocument對(duì)象獲取錯(cuò)誤信息。 
    alert("Result = " + xmlhttp.responseXML.xml); 

    // 屬性：status 
    // 返回當(dāng)前請(qǐng)求的http狀態(tài)碼 
    // 語(yǔ)法：lValue = oXMLHttpRequest.status; 
    // 返回值：長(zhǎng)整形標(biāo)準(zhǔn)http狀態(tài)碼，定義如下： 
    // Number:Description 
    // 100:Continue
    // 101:Switching protocols 
    // 200:OK 
    // 201:Created 
    // 202:Accepted 
    // 203:Non-Authoritative Information 
    // 204:No Content 
    // 205:Reset Content 
    // 206:Partial Content 
    // 300:Multiple Choices 
    // 301:Moved Permanently 
    // 302:Found 
    // 303:See Other 
    // 304:Not Modified 
    // 305:Use Proxy 
    // 307:Temporary Redirect 
    // 400:Bad Request 
    // 401:Unauthorized 
    // 402:Payment Required 
    // 403:Forbidden 
    // 404:Not Found 
    // 405:Method Not Allowed 
    // 406:Not Acceptable 
    // 407:Proxy Authentication Required 
    // 408:Request Timeout 
    // 409:Conflict 
    // 410:Gone 
    // 411:Length Required 
    // 412:Precondition Failed 
    // 413:Request Entity Too Large 
    // 414:Request-URI Too Long 
    // 415:Unsupported Media Type 
    // 416:Requested Range Not Suitable 
    // 417:Expectation Failed 
    // 500:Internal Server Error 
    // 501:Not Implemented 
    // 502:Bad Gateway 
    // 503:Service Unavailable 
    // 504:Gateway Timeout 
    // 505:HTTP Version Not Supported 
    // 備注：長(zhǎng)整形，此屬性只讀，返回當(dāng)前請(qǐng)求的http狀態(tài)碼,此屬性僅當(dāng)數(shù)據(jù)發(fā)送并接收完畢后才可獲取。 
    alert(xmlhttp.status);

    // 屬性：statusText 
    // 返回當(dāng)前請(qǐng)求的響應(yīng)行狀態(tài) 
    // 語(yǔ)法：strValue = oXMLHttpRequest.statusText; 
    // 備注：字符串，此屬性只讀，以BSTR返回當(dāng)前請(qǐng)求的響應(yīng)行狀態(tài),此屬性僅當(dāng)數(shù)據(jù)發(fā)送并接收完畢后才可獲取。 
    alert(xmlhttp.statusText); 
  } 
} 

//--> 
</script> 
</head> 
<body> 
  <form name="frmTest"> 
    <input name="myButton" type="button" value="Click Me" onclick="PostOrder('http://localhost/example.htm');"> 
  </form> 
</body> 
</html>

簡(jiǎn)單一點(diǎn)來說，就是利用XMLHttpRequest對(duì)象向服務(wù)器發(fā)出了請(qǐng)求，然后獲取服務(wù)器返回信息這樣一個(gè)過程，
以上是JavaScript的Ajax技術(shù)原理。和后面要說的Jsonp實(shí)現(xiàn)跨域訪問的原理完全不一樣。

###JQuery的AJax

JQuery對(duì)ajax這種技術(shù)進(jìn)行了封裝，使用起來更為方便。

$.ajax的一般形式

$.ajax({
  type: 'POST',
  url: url ,
  data: data ,
  dataType: dataType
  success: success ,  
});

在場(chǎng)景不一樣的時(shí)候，我們需要變換使用Ajax。 1.拼裝json數(shù)據(jù)。 2.序列化表格內(nèi)容。var formParam = $("#form1").serialize(); 3.拼接URL 。。。比如我們的數(shù)據(jù)中有特殊字符串（比如&）的時(shí)候拼接字符串不好用，可能會(huì)使提交內(nèi)容不完整。這時(shí)候采用Json的形式會(huì)比較好用。

###利用jsonp實(shí)現(xiàn)跨域訪問

什么是Jsonp？
和json有什么關(guān)系？
jsonp是怎么實(shí)現(xiàn)跨域訪問的？

首先解釋一下，為什么Ajax不能跨域訪問，瀏覽器為什么限制跨域訪問。

假設(shè)瀏覽器支持跨域訪問，我們可以在A站通過XmlHttpRequest訪問B站，這時(shí)候已經(jīng)通過了B站的驗(yàn)證，得到了B站的Cookie，然后我們就可以隨意訪問B站了，這時(shí)候A站冒用B站的身份可以操作B站一切不需要進(jìn)一步驗(yàn)證的操作，這是相當(dāng)危險(xiǎn)的。

我們?nèi)绾潍@取跨域的數(shù)據(jù)呢？

我們發(fā)現(xiàn)Web頁(yè)面上調(diào)用js文件時(shí)則不受是否跨域的影響（不僅如此，我們還發(fā)現(xiàn)凡是擁有”src”這個(gè)屬性的標(biāo)簽都擁有跨域的能力，比如script、img、iframe等等。我們可以利用js的這一性質(zhì)來獲取我們想要的數(shù)據(jù)。

為了便于客戶端使用數(shù)據(jù)，逐漸形成了一種非正式傳輸協(xié)議，人們把它稱作JSONP，該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來自動(dòng)處理返回?cái)?shù)據(jù)了。

下面我們來看一下jsonp到底做了什么事情。

1、我們知道，哪怕跨域js文件中的代碼（當(dāng)然指符合web腳本安全策略的），web頁(yè)面也是可以無條件執(zhí)行的。遠(yuǎn)程服務(wù)器remoteserver.com根目錄下有個(gè)remote.js文件代碼如下：

alert('我是遠(yuǎn)程文件');
本地服務(wù)器localserver.com下有個(gè)jsonp.html頁(yè)面代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
</body>
</html>

毫無疑問，頁(yè)面將會(huì)彈出一個(gè)提示窗體，顯示跨域調(diào)用成功。這就是最基本的jsonp的思想。

2、現(xiàn)在我們?cè)趈sonp.html頁(yè)面定義一個(gè)函數(shù)，然后在遠(yuǎn)程remote.js中傳入數(shù)據(jù)進(jìn)行調(diào)用。　　jsonp.html頁(yè)面代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
  var localHandler = function(data){
    alert('我是本地函數(shù)，可以被跨域的remote.js文件調(diào)用，遠(yuǎn)程js帶來的數(shù)據(jù)是：' + data.result);
  };
  </script>
  <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
</body>
</html>

remote.js文件代碼如下：

localHandler({"result":"我是遠(yuǎn)程js帶來的數(shù)據(jù)"});
運(yùn)行之后查看結(jié)果，頁(yè)面成功彈出提示窗口，顯示本地函數(shù)被跨域的遠(yuǎn)程js調(diào)用成功，并且還接收到了遠(yuǎn)程js帶來的數(shù)據(jù)。跨域訪問數(shù)據(jù)的目的已經(jīng)實(shí)現(xiàn)了，可是我怎么讓遠(yuǎn)程js知道它應(yīng)該調(diào)用的本地函數(shù)叫什么名字呢？

3.可以傳一個(gè)參數(shù)過去告訴服務(wù)端“我想要一段調(diào)用XXX函數(shù)的js代碼，請(qǐng)你返回給我”，于是服務(wù)器就可以按照客戶端的需求來生成js腳本并響應(yīng)了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
  // 得到航班信息查詢結(jié)果后的回調(diào)函數(shù)
  var flightHandler = function(data){
    alert('你查詢的航班結(jié)果是：票價(jià) ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 張。');
  };
  // 提供jsonp服務(wù)的url地址（不管是什么類型的地址，最終生成的返回值都是一段javascript代碼）
  var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
  // 創(chuàng)建script標(biāo)簽，設(shè)置其屬性
  var script = document.createElement('script');
  script.setAttribute('src', url);
  // 把script標(biāo)簽加入head，此時(shí)調(diào)用開始
  document.getElementsByTagName('head')[0].appendChild(script);
  </script>
</head>
<body>
</body>
</html>

在服務(wù)器端，我們獲取callback，并且拼裝好需要的js。

String callback = request.getParemeter("callback");
response.getWriter.print(callback + "(" + json +")");
這樣返回給頁(yè)面的內(nèi)容是：

flightHandler({
  "code": "CA1998",
  "price": 1780,
  "tickets": 5
});

4.Jquery也對(duì)jsonp實(shí)現(xiàn)了封裝。（形式比較像ajax）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
   <title>Untitled Page</title>
   <script type="text/javascript" src=jquery.min.js"></script>
   <script type="text/javascript">
   jQuery(document).ready(function(){
    $.ajax({
       type: "get",
       async: false,
       url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
       dataType: "jsonp",
       jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)
       jsonpCallback:"flightHandler",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)
       success: function(json){
         alert('您查詢到航班信息：票價(jià)： ' + json.price + ' 元，余票： ' + json.tickets + ' 張。');
       },
       error: function(){
         alert('fail');
       }
     });
   });
   </script>
   </head>
 <body>
 </body>
 </html>

最后申明，Ajax和jsonp是兩個(gè)完全不一樣的東西。 ajax的核心是通過XmlHttpRequest獲取非本頁(yè)內(nèi)容，而jsonp的核心則是動(dòng)態(tài)添加script標(biāo)簽來調(diào)用服務(wù)器提供的js腳本。

在jQuery中如何通過JSONP來跨域獲取數(shù)據(jù)

第一種方法是在ajax函數(shù)中設(shè)置dataType為'jsonp'：

$.ajax({
    dataType: 'jsonp',
    jsonp:'callback',
    url: 'http://www.a.com/user?id=123',   
    success: function(data){   
        //處理data數(shù)據(jù)   
    }   
});

第二種方法是利用getJSON來實(shí)現(xiàn)，只要在地址中加上callback=?參數(shù)即可：

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){   
    //處理data數(shù)據(jù)   
});

也可以簡(jiǎn)單地使用getScript方法：

//此時(shí)也可以在函數(shù)外定義foo方法   
function foo(data){   
    //處理data數(shù)據(jù)   
}   
$.getJSON('http://www.a.com/user?id=123&callback=foo');

JSONP的應(yīng)用

JSONP在開放API中可以起到非常重要的作用，開放API是運(yùn)用在開發(fā)者自己的應(yīng)用上，而許多應(yīng)用往往是在開發(fā)者的服務(wù)器上而不是在新浪微博的服務(wù)器上，因此跨域請(qǐng)求數(shù)據(jù)成為開發(fā)者們所需要解決的一大問題，廣大開放平臺(tái)應(yīng)該實(shí)現(xiàn)對(duì)JSONP的支持，這一點(diǎn)新浪微博開放平臺(tái)便做的非常好（雖然某些API里沒有說明，但實(shí)際上是可以使用JSONP方式調(diào)用的）。

您可能感興趣的文章: