jsonp跨域請求的相關介紹-js教程-PHP中文網

這篇文章主要為大家詳細介紹了 jsonp跨域請求 的相關資料，啟動了所有介面支援瀏覽器跨域請求的封裝，具有一定的參考價值。

分開說明：

一、JSONP：

直覺的理解：

就是在客戶端動態註冊一個函數

function a(data)，然後將函數名稱傳到伺服器，伺服器傳回一個a({/*json*/})到客戶端運行,這樣就呼叫客戶端的

function a(data),從而實現了跨域.

誕生背景：

1、Ajax直接請求普通文件存在跨域無權訪問的問題，甭管是靜態頁面、動態網頁、web服務、wcf、只要是跨域請求，一律不行。

2、不過，web頁面上呼叫js檔案時則不受此影響

3、進一步推廣，我們發現，凡是擁有Src屬性的標籤都有跨域能力，如：

4、於是，當前如果想透過純web端（ActiveX控制項、服務端代理程式、屬於未來的HTML5之Websocket等方式不算）跨域存取數據，就只能使用以下方式：就是在遠端伺服器上設法把資料裝進js格式的文字裡，供客戶端呼叫和進一步處理。

5、JSON就是一種純字元資料格式，且能唄js原生支援。

6、這樣解決方案出爐：web客戶端透過與呼叫腳本一模一樣的方式，來呼叫跨網域伺服器上動態產生的js格式檔案（一般以json為後綴）。

7、客戶端在對json檔案呼叫成功後，也就得到了所需數據，剩下的就是按照自己的需求進行處理了。

8為了便於 客戶端使用 數據，逐漸形成了一種非正式的傳輸協議，稱為jsonp。該協定的一個要點就是允許使用者傳遞一個callback參數給伺服器，然後伺服器返回資料時會將這個callback參數作為函數名稱來包裹住json數據，這樣客戶端就可以隨意自訂自己的函數來處理傳回資料了。

具體實現：

不管jQuery也好，extjs也罷，又或者是其他支持jsonp的框架，他們幕後所做的工作都是一樣的，下面我來循序漸進的說明一下jsonp在客戶端的實作：

1、我們知道，即使跨域js檔案中的程式碼（當然指符合web腳本安全策略的），web頁面也是可以無條件執行的。

遠端伺服器remoteserver.com根目錄下有個remote.js檔案程式碼如下：

alert('我是 遠端檔案 ');

#話不多講，見核心代碼

1.定義一個類，繼承MappingJackson2HttpMessageConverter，重寫writeInternal方法，方法裡簡單判斷一下是否帶有callback參數，沒有直接返回數據，有的話將數據用callback參數的值括號包起來回傳。

import java.io.IOException; import javax.servlet.http.HttpServletRequest; import org.apache.commons.io.IOUtils; import org.apache.commons.lang3.StringUtils; import org.springframework.http.HttpOutputMessage; import org.springframework.http.converter.HttpMessageNotWritableException; import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter; import org.springframework.web.context.request.RequestContextHolder; import org.springframework.web.context.request.ServletRequestAttributes; import com.fasterxml.jackson.core.JsonEncoding; import com.fasterxml.jackson.core.JsonProcessingException; public class CallbackMappingJackson2HttpMessageConverter extends MappingJackson2HttpMessageConverter { // 做jsonp的支持的标识，在请求参数中加该参数 private String callbackName; @Override protected void writeInternal(Object object, HttpOutputMessage outputMessage) throws IOException, HttpMessageNotWritableException { // 从threadLocal中获取当前的Request对象 HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder .currentRequestAttributes()).getRequest(); String callbackParam = request.getParameter(callbackName); if (StringUtils.isEmpty(callbackParam)) { // 没有找到callback参数，直接返回json数据 super.writeInternal(object, outputMessage); } else { JsonEncoding encoding = getJsonEncoding(outputMessage.getHeaders().getContentType()); try { String result = callbackParam + "(" + super.getObjectMapper().writeValueAsString(object) + ");"; IOUtils.write(result, outputMessage.getBody(), encoding.getJavaName()); } catch (JsonProcessingException ex) { throw new HttpMessageNotWritableException("Could not write JSON: " + ex.getMessage(), ex); } } } public String getCallbackName() { return callbackName; } public void setCallbackName(String callbackName) { this.callbackName = callbackName; } } 登入後複製 2.定義Java bean，注意修改class掃描路徑，這樣每次請求過來都會調起MappingJackson2HttpMessageConverter類別裡的riteInternal這個方法，如果請求帶上了callback參數，則將以callbackValue('data ')格式的資料回傳給前端。

登入後複製 3.前端透過 jquery封裝的ajax 方式調用，這裡做了一些程式碼節省，關鍵程式碼已紅色標出

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

jsonp跨域請求的相關介紹