JSONP與JSON只有一字之差，咱們在使用Jquery的Ajax調用的時候也是使用相同的方法來調用,二者的區別幾乎只在於使用的dataType這個屬性的不一樣。可是實際上JSON和JSONP是徹底不一樣的兩個東西，JSON是一個數據格式，就好像XML同樣，JSONP適用於解決遠程調用本地回調函數跨域的問題。html
當指定dataType爲JSON的時候，回調函數的參數(success:function(data)裏面的data)是一個JSON格式的數據字符串,相似於「{‘NAME’:'ckym','Age':27}」,在success中定義處理這個數據的邏輯。jquery
當指定dataType爲JSONP的時候，回調函數的定義是同樣的,可是服務器返回的就不是一個JSON的數據了,而是一個調用的方法字符串,例如「showMessage(JSON.stringify(data))」,此時，ajax就會調用success後面定義的方法來代替這個這個showMessage方法。ajax
因此無論是JSON仍是JSONP，處理代碼的邏輯都定義在success這個回調函數中。express
下面是一個實例程序（基於NodeJS，須要安裝Express，固然其餘的開發語言也是同樣的道理）。json
Server端:跨域
var express=require('express');
var app=express();
app.get('/',function(req,res,err){
var data=[{"Name":'ckym',"password":'12345678'}];//數據格式必須使用雙引號,不然會報錯
var result="showMessage("+JSON.stringify(data)+")";
res.end(result);
})
app.listen('8001',function(err){
if(err){
console.log(err);
}else{
console.log("客戶端在8001端口監聽成功!");
}
})服務器
Client端:app
var express=require('express');
var path=require('path');
var app=express();
app.get('/',(req,res,err)=>{
res.sendFile(path.join(__dirname,'Main.html'));//注意sendFile必須使用絕對路徑,不然程序會報錯
})
app.use(express.static('Scripts'));//路徑不區分大小寫
app.listen(8000,(err)=>{
if(err){
console.log(err);
}else{
console.log('端口8000監聽成功!');
}
})函數
Html頁面（Main.html）:測試
<!DOCTYPE html><html> <head> <meta charset='utf-8'/> <title>JSONP測試</title> <script src='/JS/jquery-3.2.1.min.js'></script> </head> <body> <h2>這是一個NodeJs的JSONP測試項目</h2> <script> $(document).ready(function(){ $.ajax({ url:'http://localhost:8001/', dataType:'jsonp',//此處若是使用json的話就會出現error的報錯,是由於XMLHttpRequest不支持跨域訪問 //因此會報錯,爲解決這個問題,須要使用JSONP的數據類型,script等元素節點的src屬性是自帶跨域訪問的 //功能,因此也能用來解決跨域問題 type:'get',//JSONP只支持get方法請求 jsonp:'callback', jsonpCallback:"showMessage",//定義jsonp執行的回調函數的名稱--與服務端返回的數據中的方法的名稱相同 success:function(data){ alert("這是一個跨域調用方法的數據:"+JSON.stringify(data)); }, error:function(err){ alert("ajax出現錯誤,請聯繫管理員!:"+JSON.stringify(err)); } }) }) </script> </body></html>