溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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實現跨域訪問
什么是Jsonp？
和json有什么關系？
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腳本。
在jQuery中如何通過JSONP來跨域獲取數據
第一種方法是在ajax函數中設置dataType為'jsonp'：
$.ajax({
dataType: 'jsonp',
jsonp:'callback',
url: 'http://www.a.com/user?id=123',
success: function(data){
//處理data數據
}
});第二種方法是利用getJSON來實現，只要在地址中加上callback=?參數即可：
$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
//處理data數據
});也可以簡單地使用getScript方法：
//此時也可以在函數外定義foo方法
function foo(data){
//處理data數據
}
$.getJSON('http://www.a.com/user?id=123&callback=foo');JSONP的應用
JSONP在開放API中可以起到非常重要的作用，開放API是運用在開發者自己的應用上，而許多應用往往是在開發者的服務器上而不是在新浪微博的服務器上，因此跨域請求數據成為開發者們所需要解決的一大問題，廣大開放平臺應該實現對JSONP的支持，這一點新浪微博開放平臺便做的非常好（雖然某些API里沒有說明，但實際上是可以使用JSONP方式調用的）。
以上是“AJax與Jsonp跨域訪問的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
