JSONP跨域請求

更新時(shí)間：2017年03月02日 14:13:18 作者：小禾點(diǎn)點(diǎn)

本文主要介紹了jsonp跨域請求的相關(guān)知識。具有很好的參考價(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)頁可以得到從其他來源動態(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é)果：