使用node.js实现JSONP的实例

更新日期: 2019-07-06阅读: 2.1k标签: jsonp分享

复制链接

新浪微博

QQ 好友

扫一扫分享

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>

链接: https://fly63.com/article/detial/4052

使用node.js实现JSONP的实例

Jsonp原理

jsonp跨域访问的原理及参数作用

说说JSON和JSONP区别

原生的js实现jsonp的跨域封装

JSONP原理及其简单封装

JSON.stringify() 的深入理解

让 axios 支持 jsonp

封装 jsonp请求数据的方法

跨域解决方案之JSONP

JavaScript之JSONP跨域