前端跨域請求jsonp實現

跨域問題來歷于JavaScript的同源策略，即只有和談+本家兒機名+端標語 (如存在)不異，則許可彼此拜候，有一種分歧即不克不及拜候。也就是說JavaScript只能拜候和操作本身域下的資本，不克不及拜候和操作其他域下的資本。跨域問題是針對JS和ajax的，html自己沒有跨域問題，好比a標簽、script標簽、甚至form標簽（可以直接跨域發送數據并領受數據）等。

JSONP(JSON with Padding)是JSON的一種“利用模式”，可用于解決本家兒流瀏覽器的跨域數據拜候的問題。因為同源策略，一般來說位于 server1.example.com 的網頁無法與不是 server1.example.com的辦事器溝通，而 HTML 的<script> 元素是一個破例。操縱 <script> 元素的這個開放策略，網頁可以獲得從其他來歷動態發生的 JSON 資料，而這種利用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是肆意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。

東西/原料

電腦
java便捷東西 intellij IDEA或者eclipse
前端編纂東西HBuilder非必需可以利用java編纂東西取代

第一步調：建立一個javaweb項目

1
第一種：建立一個springboot的項目。
1、打開建立頁面選擇File-new-project..
2、選擇建立的項目為spring initializr 進入springboot項目建立步調（也可以選擇類型java，建立一個通俗java項目）
3、輸入項目名字，選擇依靠web（按照項目需求選擇，此次需要），選擇存放目次-完當作（Finish）
2
第二種：建立一個簡單的javaweb項目。
1、直接打開：https://jingyan.baidu.com/article/ff411625048acf12e482373a.html
2、或者百度搜刮：servlet類若何映射到url路徑百度經驗

第二步調：項目籌辦

1
第一步：編寫被挪用項目標controller。
1、需要集當作springmvc，springboot項目集當作web就包含springmvc，通俗的servlet需要：
PrintWriter w = response.getWriter();w.print(json);
2、端口默認8080
3、controller代碼如下所示
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;
@RestController
public class TestController {
@RequestMapping("/bean")
public String testJson(HttpServletRequest request,
HttpServletResponse response, Map paramMap) {
String callback = request.getParameter("callback");
String id = request.getParameter("id");
String name = request.getParameter("name");
String sex = request.getParameter("sex");
String json = "{'id':" + id + ",'name':'" + name + "','sex':'" + sex
+ "'}";
if (callback != null) {
json = callback + "(" + json + ")";
}
return json;
}
}
4、啟動辦事并測試：
http://localhost:8080/bean?id=2&name=張三&sex=男
2
第二步：挪用項目標籌辦。
1、新建一個javaweb項目
2、在端標語設置為8020
3、編寫跨域挪用代碼，本家兒如果頁面js的編寫

第二步調：jsonp事項跨域的體例

1
第一種：原生的js實現跨域。
1、借助于原生javascript實現，具體代碼如下所示：
window.onload = function () {
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = 'http://localhost:8080/bean?callback=ajaxCallback&id=2&name=張三&sex=男';
document.body.appendChild(script);
}

function ajaxCallback(data) {
alert('response data: ' + JSON.stringify(data));
};
2
第二種：借助于jquery的getJSON實現。
具體代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域測試</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
$.getJSON("http://localhost:8080/bean?callback=?", {id:2,name:'李四',sex:'男'},
function(data) {
alert(data.id+data.name+data.sex);
});
</script>
</body>
</html>
3
第三種：借助于jquery的ajax實現。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域測試</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
$.ajax({
//設置請求類型
type:"get",
//請求超不時間
timeout:5000,
//設置請求地址
url: 'http://localhost:8080/bean',
//設置需要發送的數據
data: {id:2,name:'李四',sex:'男'},
//界說此請求為跨域請求
dataType: 'jsonp',
//界說回調函數
jsonpCallback:"callbackUser",
success: function (data) {
console.log("當作功");
},
error: function (data) {
console.log(data)
}
})
function callbackUser(data){
alert("id:"+data.id+" name:"+data.name+" sex:"+data.sex);
}
</script>
</body>
</html>
4
第四種：本家兒如果對三種的優化。
1、本家兒如果去除jsonpCallback屬性，url中傳callback=?界說默認挪用ajax的回調函數。要與后臺代碼對應（String callback = request.getParameter("callback");）
2、挪用項目頁面如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域測試</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
$.ajax({
//設置請求類型
type:"get",
//請求超不時間
timeout:5000,
//設置請求地址
url: 'http://localhost:8080/bean?callback=?',
//設置需要發送的數據
data: {id:2,name:'李四',sex:'男'},
//界說此請求為跨域請求
dataType: 'jsonp',
success: function (data) {
console.log("當作功");
alert("id:"+data.id+" name:"+data.name+" sex:"+data.sex);
},
error: function (data) {
console.log(data)
}
})
</script>
</body>
</html>

第四步調：總結

1
1、jsonp實現的體例就是借助于script標簽的src屬性獲取數據，然后將數據作為參數傳給函數，解析數據。這一點我們需要連系后臺callback + "(" + json + ")"
可以看出一二。
2、跨域問題的解決方案除了jsonp體例外還有一種CORS，與jsonp分歧的是這是一種后臺解決方案。