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