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>