JSONP與JSON只有一字之差，我們在使用Jquery的Ajax調用的時候也是使用相同的方法來調用,兩者的區別幾乎只在於使用的dataType這個屬性的不同。但是實際上JSON和JSONP是完全不同的兩個東西，JSON是一個數據格式，就好像XML一樣，JSONP適用於解決遠程調用本地回調函數跨域的問題。
當指定dataType為JSON的時候，回調函數的參數(success:function(data)里面的data)是一個JSON格式的數據字符串,類似於“{‘NAME’:'ckym','Age':27}”,在success中定義處理這個數據的邏輯。
當指定dataType為JSONP的時候，回調函數的定義是一樣的,但是服務器返回的就不是一個JSON的數據了,而是一個調用的方法字符串,例如“showMessage(JSON.stringify(data))”,此時，ajax就會調用success后面定義的方法來代替這個這個showMessage方法。
所以不管是JSON還是JSONP，處理代碼的邏輯都定義在success這個回調函數中。
下面是一個實例程序（基於NodeJS，需要安裝Express，當然其他的開發語言也是一樣的道理）。
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端:
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>