封装JSONP 函数，方便请求发送

封装JSONP 函数，方便请求发送

封装jsonp的代码和封装Ajax的代码非常的相似！可以参照食用偶！

<button id="btn">点击我发送请求！</button>
	<script>
		function fn2 (data, succ) {
			console.log('客户端的函数fn被调用了！')
			console.log(data, succ)
		}
		</script>

	<script type="text/javascript">
		const btn = document.getElementById('btn');
		btn.onclick = function () {
			jsonp({
			// 请求地址！
			url: 'http://localhost:3001/better?callback=fn2'
		})
		}
		function jsonp(options) {
			// 1 动态的创建一个script标签
			const script = document.createElement('script');
			// 为script标签添加src属性
			script.src = options.url;
			// 将script标签追加到页面当中！
			document.body.appendChild(script);
			// 给script标签添加onload事件， 当script标签被加载完成的时候删除标签！
			script.onload = function () {
				document.body.removeChild(script	);
			}
		} 

		</script>

封装代码优化！

1第一个优化的地方就是处理返回服务器端返回的函数fn2【现在我们希望fn2函数和jsonp函数进行关联！怎么做？！】把外部函数变成参数函数!再把参数函数变成一个全局函数!

<button id="btn">点击我发送请求！</button>
	<button id="btn2">点击我发送请求！</button>
	<script type="text/javascript">
		const btn = document.getElementById('btn');
		btn.onclick = function () {
			jsonp({
			// 请求地址！
			url: 'http://localhost:3001/better',
			success: function (data, succ) {
				console.log(123);
				console.log(data, succ)
			}
		})
		}
		const btn2 = document.getElementById('btn2');
		btn2.onclick = function () {
			jsonp({
			// 请求地址！
			url: 'http://localhost:3001/better',
			success: function (data, succ) {
				console.log(234234234);
				console.log(data, succ)
			}
		})
		}
		function jsonp(options) {
			// 1 动态的创建一个script标签
			const script = document.createElement('script');
			// myjsonp后面生成随机数字！
			let fnName = 'myJsonp' + Math.random().toString().replace('.', '');
			// 他已经不是一个全局函数了！
			// 我们要想办法让它变成一个全局函数！
			// 第二个地方就是现在的函数已经变成了一个匿名函数了，所以名字变成了一个亟待解决的问题!
			window[fnName] = options.success;
			// 为script标签添加src属性
			script.src = options.url + '?callback=' + fnName;
			// 将script标签追加到页面当中！
			document.body.appendChild(script);
			// 给script标签添加onload事件， 当script标签被加载完成的时候删除标签！
			script.onload = function () {
				document.body.removeChild(script	);
			}
		} 

		</script>

jsonp代码的最终优化【如果要求传入更多的callback函数应该怎么做呢？!】

<button id="btn">点击我发送请求！</button>
	<button id="btn2">点击我发送请求！</button>
	<script type="text/javascript">
		const btn = document.getElementById('btn');
		btn.onclick = function () {
			jsonp({
			// 请求地址！
			url: 'http://localhost:3001/better',
			data: {
				name: 'lvchengxin',
				age: 20
			},
			success: function (data, succ) {
				console.log(123);
				console.log(data, succ)
			}
		})
		}
		const btn2 = document.getElementById('btn2');
		btn2.onclick = function () {
			jsonp({
			// 请求地址！
			url: 'http://localhost:3001/better',
			success: function (data, succ) {
				console.log(234234234);
				console.log(data, succ)
			}
		})
		}
		function jsonp(options) {
			// 1 动态的创建一个script标签
			const script = document.createElement('script');
			// 拼接字符串的变量
			let params = '';
			for (let attr in options.data) {
				params += '&' + attr + '=' + options.data[attr];
			}
			// myjsonp后面生成随机数字！
			let fnName = 'myJsonp' + Math.random().toString().replace('.', '');
			// 他已经不是一个全局函数了！
			// 我们要想办法让它变成一个全局函数！
			// 第二个地方就是现在的函数已经变成了一个匿名函数了，所以名字变成了一个亟待解决的问题!
			window[fnName] = options.success;
			// 为script标签添加src属性
			script.src = options.url + '?callback=' + fnName + params;
			// 将script标签追加到页面当中！
			document.body.appendChild(script);
			// 给script标签添加onload事件， 当script标签被加载完成的时候删除标签！
			script.onload = function () {
				document.body.removeChild(script);
			}
		}
		</script>

服务器端代码的优化

app.get('/better', (req, res) => {
	// 接收客户端传递过来的函数名称
	// const fnName = req.query.callback;
	// 将函数名称对应的函数调用代码返回给客户端！
	// const data = JSON.stringify([{name: "lvhang"},{test: "如果你能看到这条消息，说明你已经解决了同源的问题!你用的或许是jsonph or CROS但是，这已经不重要了！"}]);
	// const result = fnName + '(' + data + ')';
	// setTimeout( () => {
	// }, 1000)
	// res.send(result)

// 在jsonp的内部就是干的上面的事情！
	res.jsonp({name: 'lvchengxin', age: 20})
})