AJax與Jsonp跨域訪問
阿新 • • 發佈：2018-12-02
目錄 一.JavaScript的AJax 二.JQuery的AJax 三.利用jsonp實現跨域訪問 一.JavaScript的AJax AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML） 設計AJax使用的一種重要技術是XMLHttpRequest物件。 建立XMLHttpRequest物件的方式： xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // IE瀏覽器支援的建立方式 xmlhttp = new XMLHTTPRequest(); // FireFox,Opera等瀏覽器支援的建立方式 XMLHttp是一套可以在Javascript、VbScript、Jscript等指令碼語言中通過http協議傳送或從接收XML及其他資料的一套API。可用於模擬http的GET和POST請求。 可以判斷window.XMLHttpRequest物件是否可用然後建立XMLHttpRequest物件。 以下是XMLHttpRequest物件的屬性和使用方法，貼上過來的，註釋的很詳細。 <html> <head> <title>XMLHTTPRequest物件的說明DEMO</title> <script language="javascript" type="text/javascript"> <!-- var xmlhttp; // 建立一個XMLHTTPRequest物件 function createXMLHTTPRequext(){ if(window.ActiveXObject) { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } else if(window.XMLHTTPRequest){ xmlhttp = new XMLHTTPRequest(); } } function PostOrder(xmldoc) { createXMLHTTPRequext(); // 方法：open // 建立一個新的http請求，並指定此請求的方法、URL以及驗證資訊 // 語法：oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword); // 引數 // bstrMethod // http方法，例如：POST、GET、PUT及PROPFIND。大小寫不敏感。 // bstrUrl // 請求的URL地址，可以為絕對地址也可以為相對地址。 // varAsync[可選] // 布林型，指定此請求是否為非同步方式，預設為true。如果為真，當狀態改變時會呼叫onreadystatechange屬性指定的回撥函式。 // bstrUser[可選] // 如果伺服器需要驗證，此處指定使用者名稱，如果未指定，當伺服器需要驗證時，會彈出驗證視窗。 // bstrPassword[可選] // 驗證資訊中的密碼部分，如果使用者名稱為空，則此值將被忽略。 // 備註：呼叫此方法後，可以呼叫send方法向伺服器傳送資料。 xmlhttp.Open("get", "http://localhost/example.htm", false); // var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']"); // alert(book.xml); // 屬性：onreadystatechange // onreadystatechange：指定當readyState屬性改變時的事件處理控制代碼 // 語法：oXMLHttpRequest.onreadystatechange = funcMyHandler; // 如下的例子演示當XMLHTTPRequest物件的readyState屬性改變時呼叫HandleStateChange函式， // 當資料接收完畢後（readystate == 4）此頁面上的一個按鈕將被啟用 // 備註：此屬性只寫，為W3C文件物件模型的擴充套件. xmlhttp.onreadystatechange= HandleStateChange; // 方法：send // 傳送請求到http伺服器並接收回應 // 語法：oXMLHttpRequest.send(varBody); // 引數：varBody （欲通過此請求傳送的資料。） // 備註：此方法的同步或非同步方式取決於open方法中的bAsync引數，如果bAsync == False，此方法將會等待請求完成或者超時時才會返回，如果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. // 如果傳送的資料為BSTR，則迴應被編碼為utf-8, 必須在適當位置設定一個包含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. // 如果傳送的資料為XML DOM object，則迴應將被編碼為在xml文件中宣告的編碼，如果在xml文件中沒有宣告編碼，則使用預設的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 // 獲取響應的所有http頭 // 語法：strValue = oXMLHttpRequest.getAllResponseHeaders(); // 備註：每個http頭名稱和值用冒號分割，並以\r\n結束。當send方法完成後才可呼叫該方法。 alert(xmlhttp.getAllResponseHeaders()); // 方法：getResponseHeader // 從響應資訊中獲取指定的http頭 // 語法：strValue = oXMLHttpRequest.getResponseHeader(bstrHeader); // 備註：當send方法成功後才可呼叫該方法。如果伺服器返回的文件型別為"text/xml", 則這句話 // xmlhttp.getResponseHeader("Content-Type");將返回字串"text/xml"。可以使用getAllResponseHeaders方法獲取完整的http頭資訊。 alert(xmlhttp.getResponseHeader("Content-Type")); // 輸出http頭中的Content-Type列：當前web伺服器的版本及名稱。 document.frmTest.myButton.disabled = true; // 方法：abort // 取消當前請求 // 語法：oXMLHttpRequest.abort(); // 備註：呼叫此方法後，當前請求返回UNINITIALIZED 狀態。 // xmlhttp.abort(); // 方法：setRequestHeader // 單獨指定請求的某個http頭 // 語法：oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue); // 引數：bstrHeader（字串，頭名稱。） // bstrValue（字串，值。） // 備註：如果已經存在已此名稱命名的http頭，則覆蓋之。此方法必須在open方法後呼叫。 // xmlhttp.setRequestHeader(bstrHeader, bstrValue); } function HandleStateChange() { // 屬性：readyState // 返回XMLHTTP請求的當前狀態 // 語法：lValue = oXMLHttpRequest.readyState; // 備註：變數，此屬性只讀，狀態用長度為4的整型表示.定義如下： // 0 (未初始化) 物件已建立，但是尚未初始化（尚未呼叫open方法） // 1 (初始化) 物件已建立，尚未呼叫send方法 // 2 (傳送資料) send方法已呼叫，但是當前的狀態及http頭未知 // 3 (資料傳送中) 已接收部分資料，因為響應及http頭不全，這時通過responseBody和responseText獲取部分資料會出現錯誤， // 4 (完成) 資料接收完畢,此時可以通過通過responseBody和responseText獲取完整的迴應資料 if (xmlhttp.readyState == 4){ document.frmTest.myButton.disabled = false; // 屬性：responseBody // 返回某一格式的伺服器響應資料 // 語法：strValue = oXMLHttpRequest.responseBody; // 備註：變數，此屬性只讀，以unsigned array格式表示直接從伺服器返回的未經解碼的二進位制資料。 alert(xmlhttp.responseBody); // 屬性：responseStream // 以Ado Stream物件的形式返回響應資訊 // 語法：strValue = oXMLHttpRequest.responseStream; // 備註：變數，此屬性只讀，以Ado Stream物件的形式返回響應資訊。 alert(xmlhttp.responseStream); // 屬性：responseText // 將響應資訊作為字串返回 // 語法：strValue = oXMLHttpRequest.responseText; // 備註：變數，此屬性只讀，將響應資訊作為字串返回。XMLHTTP嘗試將響應資訊解碼為Unicode字串， // XMLHTTP預設將響應資料的編碼定為UTF-8，如果伺服器返回的資料帶BOM(byte-order mark)，XMLHTTP可 // 以解碼任何UCS-2 (big or little endian)或者UCS-4 資料。注意，如果伺服器返回的是xml文件，此屬 // 性並不處理xml文件中的編碼宣告。你需要使用responseXML來處理。 alert(xmlhttp.responseText); // 屬性：responseXML // 將響應資訊格式化為Xml Document物件並返回 // 語法：var objDispatch = oXMLHttpRequest.responseXML; // 備註：變數，此屬性只讀，將響應資訊格式化為Xml Document物件並返回。如果響應資料不是有效的XML文件， // 此屬性本身不返回XMLDOMParseError，可以通過處理過的DOMDocument物件獲取錯誤資訊。 alert("Result = " + xmlhttp.responseXML.xml); // 屬性：status // 返回當前請求的http狀態碼 // 語法：lValue = oXMLHttpRequest.status; // 返回值：長整形標準http狀態碼，定義如下： // 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 // 備註：長整形，此屬性只讀，返回當前請求的http狀態碼,此屬性僅當資料傳送並接收完畢後才可獲取。 alert(xmlhttp.status); // 屬性：statusText // 返回當前請求的響應行狀態 // 語法：strValue = oXMLHttpRequest.statusText; // 備註：字串，此屬性只讀，以BSTR返回當前請求的響應行狀態,此屬性僅當資料傳送並接收完畢後才可獲取。 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> 簡單一點來說，就是利用XMLHttpRequest物件向伺服器發出了請求，然後獲取伺服器返回資訊這樣一個過程， 以上是JavaScript的Ajax技術原理。和後面要說的Jsonp實現跨域 訪問的原理完全不一樣。 二.JQuery的AJax JQuery對ajax這種技術進行了封裝，使用起來更為方便。 $.ajax的一般形式： $.ajax({ type: 'POST', url: url , data: data , dataType: dataType success: success , }); 在場景不一樣的時候，我們需要變換使用Ajax。 1.拼裝json資料。 2.序列化表格內容。var formParam = $("#form1").serialize(); 3.拼接URL 。。。 比如我們的資料中有特殊字串（比如&）的時候拼接字串不好用，可能會使提交內容不完整。這時候採用Json的形式會比較好用。 三.利用jsonp實現跨域訪問 問題 1.什麼是Jsonp？ 2.和json有什麼關係？ 3.jsonp是怎麼實現跨域訪問的？ 首先解釋一下，為什麼Ajax不能跨域訪問，瀏覽器為什麼限制跨域訪問。 假設瀏覽器支援跨域訪問，我們可以在A站通過XmlHttpRequest訪問B站，這時候已經通過了B站的驗證，得到了B站的Cookie，然後我們就可以隨意訪問B站了，這時候A站冒用B站的身份可以操作B站一切不需要進一步驗證的操作，這是相當危險的。 我們如何獲取跨域的資料呢？ 我們發現Web頁面上呼叫js檔案時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有”src”這個屬性的標籤都擁有跨域的能力，比如script、img、iframe等等。我們可以利用js的這一性質來獲取我們想要的資料。 為了便於客戶端使用資料，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許使用者傳遞一個callback引數給服務端，然後服務端返回資料時會將這個callback引數作為函式名來包裹住JSON資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。 下面我們來看一下jsonp到底做了什麼事情。 1、我們知道，哪怕跨域js檔案中的程式碼（當然指符合web指令碼安全策略的），web頁面也是可以無條件執行的。 遠端伺服器remoteserver.com根目錄下有個remote.js檔案程式碼如下： alert('我是遠端檔案'); 本地伺服器localserver.com下有個jsonp.html頁面程式碼如下： <!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> 毫無疑問，頁面將會彈出一個提示窗體，顯示跨域呼叫成功。 這就是最基本的jsonp的思想。 2、現在我們在jsonp.html頁面定義一個函式，然後在遠端remote.js中傳入資料進行呼叫。 jsonp.html頁面程式碼如下： <!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('我是本地函式，可以被跨域的remote.js檔案呼叫，遠端js帶來的資料是：' + data.result); }; </script> <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> </head> <body> </body> </html> remote.js檔案程式碼如下： localHandler({"result":"我是遠端js帶來的資料"}); 執行之後檢視結果，頁面成功彈出提示視窗，顯示本地函式被跨域的遠端js呼叫成功，並且還接收到了遠端js帶來的資料。 跨域訪問資料的目的已經實現了，可是我怎麼讓遠端js知道它應該呼叫的本地函式叫什麼名字呢？ 3.可以傳一個引數過去告訴服務端“我想要一段呼叫XXX函式的js程式碼，請你返回給我”，於是伺服器就可以按照客戶端的需求來生成js指令碼並響應了。 <!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 flightHandler = function(data){ alert('你查詢的航班結果是：票價 ' + data.price + ' 元，' + '餘票 ' + data.tickets + ' 張。'); }; // 提供jsonp服務的url地址（不管是什麼型別的地址，最終生成的返回值都是一段javascript程式碼） var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // 建立script標籤，設定其屬性 var script = document.createElement('script'); script.setAttribute('src', url); // 把script標籤加入head，此時呼叫開始 document.getElementsByTagName('head')[0].appendChild(script); </script> </head> <body> </body> </html> 在伺服器端，我們獲取callback，並且拼裝好需要的js。 String callback = request.getParemeter("callback"); response.getWriter.print(callback + "(" + json +")"); 這樣返回給頁面的內容是： flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 }); 4.Jquery也對jsonp實現了封裝。（形式比較像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",//傳遞給請求處理程式或頁面的，用以獲得jsonp回撥函式名的引數名(一般預設為:callback) jsonpCallback:"flightHandler",//自定義的jsonp回撥函式名稱，預設為jQuery自動生成的隨機函式名，也可以寫"?"，jQuery會自動為你處理資料 success: function(json){ alert('您查詢到航班資訊：票價： ' + json.price + ' 元，餘票： ' + json.tickets + ' 張。'); }, error: function(){ alert('fail'); } }); }); </script> </head> <body> </body> </html> 最後申明，Ajax和jsonp是兩個完全不一樣的東西。 ajax的核心是通過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態新增script標籤來呼叫伺服器提供的js指令碼。