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>

使用NODEJS实现JSONP的实例的更多相关文章

  1. nodejs+express+ejs+mongoose实例

    nodejs+express+ejs+mongoose实例 nodejs学得异常痛苦,在这里将学的东西做一番整理,算是自我安慰吧.根据网上todo示例,用express和mongoose重写了部分代码 ...

  2. jsonp 演示实例 —— 基于node

    序 同源策略是浏览器处于安全考虑,为通信设置了"相同的域.相同的端口.相同的协议"这一限制.这让我们的ajax请求存在跨域无权限访问的问题. 同时我们发现script标签引入脚本的 ...

  3. Jsonp理论实例代码详解

    什么是Json?JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - ...

  4. jsonp调用实例

    首先我们来定义接口的规范,就像这样:http://www.mydomain.com/jsonp/ticker?symbol=IBM&callback=showPricesymbol是请求条件, ...

  5. JavaScript跨域请求和jsonp请求实例

    <script type="text/javascript" src="./whenReady.js"></script> <sc ...

  6. Nodejs后台管理员登录实例

    思路: 直接访问后台页面时如果无session则跳转到404 当在登录页的表单提交时对数据库进行匹配,匹配成功生成session,否则提示用户名或密码错误 准备页面 :后台首页.登录页.404页, 步 ...

  7. 百度搜索关键词联想API JSONP使用实例

    许多搜索引擎都提供了关键词联想api,且大多数都是jsonp. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...

  8. Struts2的jsonp接口实例

    和以往写struts2程序一样,action方法跳转到一个JSP中,为了配合jsonp的跨域,要在JSP中做一个输出 JSP: <%@ page language="java" ...

  9. php下的jsonp使用实例

    参考资料:http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html 测试依赖条件: 项目eetopinOfficial 在hosts ...

随机推荐

  1. jenkins使用--安装文档

    添加Jenkins的源(repository): #sudo wget -O /etc/yum.repos.d/jenkins.repo http://jenkins-ci.org/redhat/je ...

  2. Apache Kylin - 大数据下的OLAP解决方案

    OLAPCube是一种典型的多维数据分析技术,Cube本身可以认为是不同维度数据组成的dataset,一个OLAP Cube 可以拥有多个维度(Dimension),以及多个事实(Factor Mea ...

  3. 【转】聊聊并发（一）——深入分析Volatile的实现原理

    即两个或多个进程读写某些共享数据,而最后的结果取决于进程运行的精确时序,称为竞争条件(race condition). 引言 在多线程并发编程中synchronized和Volatile都扮演着重要的 ...

  4. Java编程思想之四控制执行流程

    程序必须再执行过程中控制它的世界,并做出选择.在Java中,你要使用执行控制语句来做出选择. 4.1true和false 所有条件语句都利用条件表达式的真或假来决定执行路径. Java不允许使用数字作 ...

  5. 使用Rome读取RSS报错，org.xml.sax.SAXParseException: 前言中不允许有内容。

    这是我遇到过的最奇葩的错误 new URL的时候,使用静态变量就会报错org.xml.sax.SAXParseException: 前言中不允许有内容. URL url = new URL(Strin ...

  6. HTML5中的Web Worker技术

    为了让后台程序更好的执行,在HTML5中设计了Web Worker技术.Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的,一旦前面的脚本花费 ...

  7. TX-LCN5.0.2分布式事务框架源码分析-关键线索罗列-txc部分

    1.注解TxcTransaction2.在其注解接口附近查找aop配置:TransactionAspect3.runTransaction是在执行事务业务代码时的包装逻辑4.transactionSe ...

  8. 使用 ArcGIS Desktop 切瓦片

    目录 1.生成切片缓存切片方案 2.切瓦片 1.生成切片缓存切片方案 ArcGIS有默认的切片方案,如果需要自定义切片规则,需要先生成一个切片方案. 打开ArcMap,打开 工具箱(Tools Box ...

  9. 如何防止Hangfire重复作业在连续执行30分钟后重新启动(How to prevent a Hangfire recurring job from restarting after 30 minutes of continuous execution)

    var options = new SqlServerStorageOptions { InvisibilityTimeout = TimeSpan .FromMinutes(30)//默认值}; G ...

  10. 案例：执行 JavaScript 语句

    隐藏百度图片 # coding=utf-8 from selenium import webdriver driver = webdriver.PhantomJS(executable_path=r' ...