zoukankan      html  css  js  c++  java
  • 使用NODEJS实现JSONP的实例

    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>

  • 相关阅读:
    数据持久化编程学习总结
    Boost Replaceable by C++11 language features or libraries
    【敬业福bug】支付宝五福卡敬业福太难求 被炒至200元
    由文字生成path后制作写字的动画
    CSS经典布局之弹性布局
    HDU2082 找单词 【母函数】
    HDOJ 题目2475 Box(link cut tree去点找祖先)
    DELPHI中MDI子窗口的关闭 和打开
    sql语句中日期相减的操作
    Delphi编码规范
  • 原文地址:https://www.cnblogs.com/ckym/p/11143586.html
Copyright © 2011-2022 走看看