424
教你如何使用JSONP數據格式，如何使用jQuery
介紹
在這篇文章中，我將解釋執行跨域服務電話從客戶端瀏覽器和工作需要做它使用jQuery的JSONP調用的障礙。我會還提供了一個一步一步實現的例子JSONP調用。NET 4.0中的WCF服務。
跨域調用限製
跨域服務的限製是由於安全策略被命名為同源策略。它定義了到客戶端的腳本語言的編程語言，如實施的政策。這一政策將限製任何以下情況下調用。
- 唿叫從客戶端的資源比實際的頁麵服務協議，通過該協議通過不同的協議。
- 唿叫從客戶機到不同的域/域/服務頁麵的Web服務器的Web服務器比躺在資源。
- 端口是不同的。
同源策略基本上被定義為網絡安全的目的。同源策略的唯一的例外是腳本標記。腳本標記可以通過交叉域腳本調用的。
JSONP消息格式
JSONP消息格式基本上是一個正常的JSON格式填充。我將解釋什麼填充是所有關於JSONP。正如我在上一節的同源策略<SCRIPT>的標簽豁免。所以跨域調用是可以做到的，如下圖所示。
<script type="text/javascript" src="https://www.ilixin.net/orderservice.svc/GetOrders"></script>
這跨域調用一定會成功的結果將返回一個JSON格式如下所示。
[
{"OrderId":1000, "OrderItem":"Cricket Bat", "Quantity": 10, "TotalPrice":20000}
{"OrderId":1001, "OrderItem":"Football", "Quantity": 100, "TotalPrice":50000}
]
但是，這是沒有用的，因為我們已經收到的數據和處理。現在讓我們看看JSONP做什麼。修改腳本URL一個額外的查詢字符串值，如下所示：
<script type="text/javascript" src="https://www.ilixin.net/orderservice.svc/GetOrders?jsonp=processResults"></script>
JSONP調用上麵的跨域服務將返回JSON填充給定的查詢字符串值作為一個腳本回調方法。
parseResults([
{"OrderId":1000, "OrderItem":"Cricket Bat", "Quantity": 10, "TotalPrice":20000}
{"OrderId":1001, "OrderItem":"Football", "Quantity": 100, "TotalPrice":50000}
])
您可以實現JSONP回調JavaScript函數，如下所示。
function parseResults(results) {
alert('Cross domain JS call achieved. Have your implementation going in here!');
}
JSONP服務調用使用jQuery樣品
在本節中，我們將著眼於使用JSONP和jQuery調用WCF服務。jQuery的開始支持JSONP從1.2版本和WCF JSONP格式還具有內置支持。
創建WCF服務使用如下所示的代碼：
public class OrderService : IOrderService
{
public List<Order> GetOrders()
{
return FetchOrdersFromDatabase();
}
private List<Order> FetchOrdersFromDatabase()
{
List<Order> orderList = new List<Order>();
//DB call and population
return orderList;
}
}
這裏是合同執行：
[的ServiceContract]
public interface IOrderService
{
[OperationContract]
[WebGet(ResponseFormat=WebMessageFormat.Json)]
List<Order> GetOrders();
}
在上麵的代碼注意，是getOrders方法裝飾WebGet屬性。這是必需的，因為JSONP調用將被獲取，而不是發布。移動配置文件WCF 4.0引入了一個新的綁定屬性命名crossDomainScriptAccessEnabled WCF的WebHttpBinding。下麵是配置的變化。
<bindings>
<webHttpBinding> <binding name="jsonpWebHttpBinding" crossDomainScriptAccessEnabled="true"/>
</webHttpBinding>
</bindings>
現在，在客戶端網頁編寫jQuery代碼如下。
<script type="text/javascript">
$(document).ready(function () {
$.getJSON('https://www.ilixin.net/orderservice.svc/GetOrders?callback=?', null, function (results) {
alert('Cross domain JS call achieved. Have your implementation going in here!');
});
});
</script>
這將成功進行跨域調用和執行我們的回調JavaScript函數，在這裏我們可以處理我們的研究結果從服務。
結論
為了使用jQuery和：JSONP目標資源（在我們的案例中，它是一個WCF服務）也應該是能夠給JSONP格式的響應。我希望這篇文章教你如何進行深度使用JSONP跨域調用。
最後更新：2017-04-03 14:53:38