| 一、前言： |
瀏覽器安全是基於同源策略的。所謂同源策略就是三相同：
1、協議相同；
2、域名相同；
3、端口相同。
但，凡事都是有利弊，同源策略也導致了我們想用AJAX跨域請求，但NO！！為了規避這種限制，其中有一方法就是JSONP。
JSONP的基本思想：就是通過<script>的src，向服務器請求數據，且這不受同源策略限制（img和iframe的src也是如此）；然后服務器將相應的數據放入指定的函數回調名中，返回給前端。
這，就實現了跨域請求信息。
如下圖所示：
了解了JSONP的大體思路，接下來，我們借助node來搭建一個簡單的服務器，與前端一步步實現JSONP帶來的跨域請求之旅吧。
| 二、搭建node server： |
因為前端要實現跨域請求，需要與后台配合。在這里，我們使用是node來模擬后台服務器。
So，你得對node有一定認識以及開發環境。（可參見“初探nodeJS”）。
接下來，我們就編寫一個簡單的node服務器吧。
首先，我們需要引入http模塊，因為是基於http請求的嘛。然后就是用其創建一個http服務器，如監聽的是8080端口。
如下：
'use strict'; //通過require將http庫包含到程序中 var http = require('http'); //創建新的HTTP服務器 var server = http.createServer(); //通過request事件來響應request請求 server.on('request',function(req, res){ res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'}); res.end('Hell World\n'); }); //監聽8080端口 server.listen('8080'); //用於提示我們服務器啟動成功 console.log('Server running!');
接着，因為我們要對使用JSONP的請求與正常請求區分，所以，后台得判斷處理—通過解析url字符串，假設這里我們是通過帶有’/jsonp’的路徑名來判斷。
如下：
1 'use strict'; 2 //通過require將http庫包含到程序中 3 var http = require('http'); 4 //引入url模塊解析url字符串 5 var url = require('url'); 6 //創建新的HTTP服務器 7 var server = http.createServer(); 8 //通過request事件來響應request請求 9 server.on('request',function(req, res){ 10 var urlPath = url.parse(req.url).pathname; 11 //如果urlPath為'jsonp'，就認定該請求為攜帶jsonp方法的http請求 12 if(urlPath === '/jsonp'){ 13 res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'}); 14 var data = { 15 "name": "Monkey" 16 }; 17 data = JSON.stringify(data); 18 //假設我們定義的回調函數名為test 19 var callback = 'test'+'('+data+');'; 20 res.end(callback); 21 } 22 else{ 23 res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'}); 24 res.end('Hell World\n'); 25 } 26 }); 27 //監聽8080端口 28 server.listen('8080'); 29 //用於提示我們服務器啟動成功 30 console.log('Server running!');
在上面的代碼中19行，有個缺點就是，我們將回調函數的名字規定死了，當我們判斷請求為JSONP時，只能往前端傳入test，這樣顯然不合理。
所以，我們得借助於querystring 這個模塊，來處理query字符串。
如下：
'use strict'; //通過require將http庫包含到程序中 var http = require('http'); //引入url模塊解析url字符串 var url = require('url'); //引入querystring模塊處理query字符串 var querystring = require('querystring'); //創建新的HTTP服務器 var server = http.createServer(); //通過request事件來響應request請求 server.on('request',function(req, res){ var urlPath = url.parse(req.url).pathname; var qs = querystring.parse(req.url.split('?')[1]); if(urlPath === '/jsonp' && qs.callback){ res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'}); var data = { "name": "Monkey" }; data = JSON.stringify(data); var callback = qs.callback+'('+data+');'; res.end(callback); } else{ res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'}); res.end('Hell World\n'); } }); //監聽8080端口 server.listen('8080'); //用於提示我們服務器啟動成功 console.log('Server running!');
這樣，我們就將一個我們需要的服務器搭建好了。
服務器有了，接下來，就是前端跨域請求了。
| 三、JSONP跨域請求之旅: |
因為我們是借助於<script>標簽中的src來實現請求的，在服務器中已經約定，在請求后加入’/jsonp?callback’，就將其認定為JSONP請求，且callback后帶入一個js中已有的全局方法。
所以，代碼可以如下：
<!DOCTYPE html> <head> <title>jsonp</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> function test(data){ alert(data.name); }; </script> <script src="http://127.0.0.1:8080/jsonp?callback=test"></script> </body> </html>
好了，前后端都編碼完畢，接下來，我們就看看效果吧。
首先啟動node服務器，如下：
注：我將我們搭建的服務器server.js放在D:/JSONP中
接下來，運行上面所寫的html代碼，可以發現請求成功，並執行test方法。
但，我們一進來，就得跨域請求，是否有點不妥，所以可以動態創建script元素，並指定相應請求，任由我們所為。
如下：
//動態創建script標簽，並請求 function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.src = src; document.body.appendChild(script); }; //如：在onload后，跨域請求 window.onload = function(){ addScriptTag('http://127.0.0.1:8080/jsonp?callback=monkey'); }; //回調的方法,且必須為全局方法，不然會報錯 function monkey(data){ alert(data); };
JSONP還需要注意的就是，回調函數的方法必須是全局的，不然會報錯的，因為是通過script的src請求的嘛，請求成功后立即執行。