封裝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})
})