JSONP跨域請求怎么實現

這篇文章主要介紹JSONP跨域請求怎么實現，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

什么是跨域：

1、域名不同

2、域名相同端口不同

js出于對安全考慮不支持跨域請求。我們可以使用JSONP解決跨域問題。

一、JSONP是什么

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數據訪問的問題。由于同源策略，一般來說位于 server1.example.com 的網頁js是無法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。

原理：瀏覽器在js請求中，是允許通過script標簽的src跨域請求，可以在請求的結果中添加回調方法名，在請求頁面中定義方法，既可獲取到跨域請求的數據。（js請求的不是一個單純的json數據而是一段包含json數據的js腳本）

二、模擬JSONP

服務器域名：http://localhost:8081/rest/itemcat/list

客戶端服務器：http://localhost:8082/test.html

1、普通的JS跨域請求

服務器數據：

客戶端請求代碼：

$(function(){
  $.ajax(    {url: "http://localhost:8081/rest/itemcat/list?callback=myFunction", 
     success: function(data){
      console.info(data)
   }}); 
 });

結果

XMLHttpRequest cannot load http://localhost:8081/rest/itemcat/list?callback=myFunction. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access.

2、模擬JSONP請求

客戶端請求代碼：

$(function(){
  greateScript("http://localhost:8081/rest/itemcat/list");
  function greateScript(src) {
   $("<script><//script>").attr("src", src).appendTo("body")
  } 
 });

結果：

list?_=1488425374097:1 Uncaught SyntaxError: Unexpected token :

三、使用JSONP

環境：

服務器域名：http://localhost:8081/rest/itemcat/list

客戶端服務器：http://localhost:8082/test.html

服務端代碼（本人使用springmvc4）：

@RequestMapping("/itemcat/list")
 @ResponseBody
 public Object getItemCatList(String callback) {
  CatResult catResult = itemCatService.getItemCatList();
  MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
  //設置JSONP回調函數
  mappingJacksonValue.setJsonpFunction(callback);
  return mappingJacksonValue;
 }

客戶端調用代碼：

$(function(){
  $.ajax(
   { url: "http://localhost:8081/rest/itemcat/list", 
    dataType: "jsonp",
    jsonp: "callback",
    success: function(data){
    console.info(data)
   }}); 
 });

結果：

看返回結果可以發現返回的數據不是一段單純的json數據，而是一段js函數。

以上是“JSONP跨域請求怎么實現”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！