JSONP跨域請求怎么實(shí)現(xiàn)

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

什么是跨域：

1、域名不同

2、域名相同端口不同

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

一、JSONP是什么

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

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

二、模擬JSONP

服務(wù)器域名：http://localhost:8081/rest/itemcat/list

客戶端服務(wù)器：http://localhost:8082/test.html

1、普通的JS跨域請求

服務(wù)器數(shù)據(jù)：

客戶端請求代碼：

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

結(jié)果

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")
  } 
 });

結(jié)果：

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

三、使用JSONP

環(huán)境：

服務(wù)器域名：http://localhost:8081/rest/itemcat/list

客戶端服務(wù)器：http://localhost:8082/test.html

服務(wù)端代碼（本人使用springmvc4）：

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

客戶端調(diào)用代碼：

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

結(jié)果：

看返回結(jié)果可以發(fā)現(xiàn)返回的數(shù)據(jù)不是一段單純的json數(shù)據(jù)，而是一段js函數(shù)。

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