jsonp原理

利用 script 標簽沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的 JSON 數據。JSONP
請求一定需要對方的服務器做支持才可以。

1. JSONP和AJAX對比
   JSONP和AJAX相同，都是客戶端向服務器端發送請求，從服務器端獲取數據的方式。但AJAX屬於
   同源策略，JSONP屬於非同源策略（跨域請求）
2. JSONP優缺點
   JSONP優點是簡單兼容性好，可用於解决主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方
   法具有局限性,不安全可能會遭受XSS攻擊。
3. JSONP的實現流程

• 聲明一個回調函數，其函數名(如show)當做參數值，要傳遞給跨域請求數據的服務器，函數形參
  為要獲取目標數據(服務器返回的data)。
• 創建一個``標簽，把那個跨域的API數據接口地址，賦值給script的src,還要在這個地址中向服務器
  傳遞該函數名（可以通過問號傳參:?callback=show）。
• 服務器接收到請求後，需要進行特殊的處理：把傳遞進來的函數名和它需要給你的數據拼接成一個
  字符串,例如：傳遞進去的函數名是show，它准備好的數據是 show(‘我不愛你’) 。
• 最後服務器把准備的數據通過HTTP協議返回給客戶端，客戶端再調用執行之前聲明的回調函數
  （show），對返回的數據進行操作。
  在開發中可能會遇到多個 JSONP 請求的回調函數名是相同的，這時候就需要自己封裝一個 JSONP
  函數。

// index.html 
function jsonp({
      url, params, callback }) {
    
 return new Promise((resolve, reject) => {
     
 	let script = document.createElement('script') 
 	window[callback] = function(data) {
     
 		resolve(data) 
 		document.body.removeChild(script) 
 	}
 	params = {
     ...params, callback } // wd=b&callback=show 
 	let arrs = [] 
 	for (let key in params) {
    
 		 arrs.push(`${
      key}=${
      params[key]}`) 
 	}
 	script.src = `${
      url}?${
      arrs.join('&')}` 
 	document.body.appendChild(script) 
 })
}
jsonp({
     
	url: 'http://localhost:3000/say', 
	params: {
     wd: 'Iloveyou' }, 
	callback: 'show' 
}).then(data => {
     
	console.log(data) 
})

上面這段代碼相當於向 http://localhost:3000/say?wd=Iloveyou&callback=show 這個地址請求數
據，然後後臺返回 show(‘我不愛你’) ，最後會運行show()這個函數，打印出’我不愛你’

// server.js 
let express = require('express') 
let app = express() 
app.get('/say', function(req, res) {
    
	 let {
     wd, callback } = req.query 
	 console.log(wd) // Iloveyou 
	 console.log(callback) // show 
	 res.end(`${
      callback}('我不愛你')`) 
})
app.listen(3000)

4. jQuery的jsonp形式
   JSONP都是GET和异步請求的，不存在其他的請求方式和同步請求，且jQuery默認就會給JSONP的請求清除緩存。

$.ajax({
     
	url:"http://crossdomain.com/jsonServerResponse",
	 dataType:"jsonp", 
	 type:"get",//可以省略 
	 jsonpCallback:"show",//->自定義傳遞給服務器的函數名，而不是使用jQuery自動生成的，可省略
	 jsonp:"callback",//->把傳遞函數名的那個形參callback，可省略 
	 success:function (data){
     
	 console.log(data);} 
});