資訊專欄INFORMATION COLUMN
摘要：同源策略在中有一個很重要的安全性限制，被稱為同源策略。然而，當進行一些比較深入的前端編程的時候，不可避免地需要進行跨域操作，這時候同源策略就顯得過于苛刻。
JSONP原理 JSON和JSONP
JSON(JavaScript Object Notation)是一種輕量級的數據交換格式。對于JSON大家應該是很了解了吧，不是很清楚的朋友可以去json.org上了解下，簡單易懂。
JSONP是JSON with Padding的略稱。它是一個非官方的協議，它允許在服務器端集成Scripttags返回至客戶端，通過javascriptcallback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。
JSONP就像是JSON+Padding一樣(Padding這里我們理解為填充)，我們先看下面的小例子然后再詳細介紹。
同源策略在JavaScript中,有一個很重要的安全性限制，被稱為“Same-OriginPolicy”（同源策略）。這一策略對于JavaScript代碼能夠訪問的頁面內容做了很重要的限制，即JavaScript只能訪問與包含它的文檔在同一域下的內容。
根據這個策略，在baidu.com下的頁面中包含的JavaScript代碼，不能訪問在google.com域名下的頁面內容；甚至不同的子域名之間的頁面也不能通過JavaScript代碼互相訪問。對于Ajax的影響在于，通過XMLHttpRequest實現的Ajax請求，不能向不同的域提交請求，例如，在abc.example.com下的頁面，不能向def.example.com提交Ajax請求，等等。然而，當進行一些比較深入的前端編程的時候，不可避免地需要進行跨域操作，這時候“同源策略”就顯得過于苛刻。
然而html中有一些元素是不存在跨域問題的如:script,iframe等元素,利用這些元素,就能很好的解決這個問題.
JSONP的實現方式利用在頁面中創建
//通過加載example2的JS文件來達到函數調用和數據傳遞
?example2.com的test.js內容如下 以上這種方法只是一個簡單實現原因的例子,現實中我們的數據和回調也不會都寫死在JS中的,所以我們要想辦法將這些靜態的東西動態生成就可以了.只要將example1.com srcipt 地址改為一個能動態生成JS調用方法的服務地址即可.如: test.do Controller直接返回如下 例子如下:當然對 假若要實現一個需求,某個網站a.com上顯示的客戶信息來自于其它網站b.com,顯然通過AJAX請求去取數據是不能做到的,因為存在同源策略. A網站的前臺實現: B網站的后臺實現: JSONP的優點是： 它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運行，不需要XMLHttpRequest或ActiveX的支持；并且在請求完畢后可以通過調用callback的方式回傳結果。 JSONP的缺點則是： 它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題。 沒有關于 JSONP調用的錯誤處理。如果動態腳本插入有效，就執行調用；如果無效，就靜默失敗。失敗是沒有任何提示的。例如，不能從服務器捕捉到404 錯誤，也不能取消或重新開始請求。不過，等待一段時間還沒有響應的話，就不用理它了。 從JQery 1.2以后，就開始支持JSONP的調用。JQuery對前臺做了很好的處理如自動生成全局回調函數等,但后臺還需要開發人員自己實現. 請求URL? 請求URL?http://xxx.com/rest.do?c=test&_=1393510789026 當dataType為JSONP時,JQUERY會為用戶生成一個全局函數名稱為jsonpCallback參數的值,這個函數內部調用了success方法JQUERY的實現原理及步驟 以GET方式請求目標地址,并在URL中拼接以jsonp參數值為key,以jsonpCallback值為value的參數 請求返回回調函數數據 觸發調用全局的回調函數,在全局函數回調中調用success方法并將數據傳遞給success方法//回調函數
callback({name:"張三"});
callback(數據庫客戶信息的JSON對象);
createScript("http://B.com/search.do?&callback=displayCustomer");
@Controller
public classJsonpRest {
????@RequestMapping(value = "/test.do",method = RequestMethod.GET)
??? public @ResponseBody Stringlist(HttpServletRequest request) {
??????? returnrequest.getParameter("callback")+"({name:"張三",age:18})";
??? }
}
$.getJSON("http://跨域的dns/xxx.do?callback=?",function(json){?? ? ? ? ?
? ??// 業務邏輯執行代碼
});
http://xxx.com/rest.do?callba..._1332575486681&_=1393510789026
$.ajax({
? ? ? ?url:"http://xxx.com/rest.do",
? ? ? ? dataType:"jsonp", ??//必須指定
? ? ? ? jsonp : "c", ? ? ? ?//若不指定則默認為callback
? ? ? ??jsonpCallback:"test",//若不指定則Jquery自己生成隨機的名稱
? ? ? ? success:function(data){
? ? ? ? ? ??//業務邏輯執行代碼
? ? ? ? }
});
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96388.html
摘要：上節我們講了同源策略，這節我們講講如何跨域。當這些從的腳本執行出錯，因為違背了同源策略為了保證用戶信息不被泄露，錯誤信息不會顯示出來，取而代之只會返回一個。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每...
摘要：同源策略限制了我們無法通過原生的對象獲取到數據。的原理其實不復雜瀏覽器的同源策略把跨域請求都禁止了的標簽是例外，可以突破同源策略從其他來源獲取數據由上可得，我們可以通過標簽引入文件，然后通過一系列操作獲取數據。上面三點便是實現跨域的原理。 今天做頁面時，后臺給了個接口：https://a.a.com/a/a.json,我頁面的上線地址是：http://b.b.com。顯而易見，因為瀏覽...
摘要：前提是的方法名與引入的文件方法名一致。簡單描述就是先定義一個方法，然后引入外部調用這個方法并攜帶數據。 JSONP 被用于跨域獲取數據。在講解它之前，先講講它與 JSON 之間的區別 什么是JSON？ JSON 是一種基于文本的數據交換方式，或者叫做數據描述格式。 其優點是： 1、基于純文本，跨平臺傳遞極其簡單； 2、Javascript 原生支持，后臺語言幾乎全部支持； 3、輕量級數...
摘要：，跨站腳本攻擊。實際發的請求就是，用于表示這是一個請求。，用于告知服務器根據這個參數獲取回調函數的名稱，通常約定就叫。，回調函數的名稱，也是前面參數的值，可省略，會自動生成。 本次課程主要圍繞 PHP 面試和筆試中經常會出現的一些知識點，但是面試官會在筆試題基礎上深入擴展，那么你知道如何更好的回答讓面試官滿意嗎？題目收集自騰訊，迅雷，美圖等公司的筆試面試題，以及本人面試經歷中印象中的知...
閱讀 3034·2023-04-26 03:01
閱讀 3538·2023-04-25 19:54
閱讀 1592·2021-11-24 09:39
閱讀 1374·2021-11-19 09:40
閱讀 4250·2021-10-14 09:43
閱讀 2062·2019-08-30 15:56
閱讀 1490·2019-08-30 13:52
閱讀 1660·2019-08-29 13:05
