使用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>
使用NODEJS实现JSONP的实例的更多相关文章
- nodejs+express+ejs+mongoose实例
nodejs+express+ejs+mongoose实例 nodejs学得异常痛苦,在这里将学的东西做一番整理,算是自我安慰吧.根据网上todo示例,用express和mongoose重写了部分代码 ...
- jsonp 演示实例 —— 基于node
序 同源策略是浏览器处于安全考虑,为通信设置了"相同的域.相同的端口.相同的协议"这一限制.这让我们的ajax请求存在跨域无权限访问的问题. 同时我们发现script标签引入脚本的 ...
- Jsonp理论实例代码详解
什么是Json?JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - ...
- jsonp调用实例
首先我们来定义接口的规范,就像这样:http://www.mydomain.com/jsonp/ticker?symbol=IBM&callback=showPricesymbol是请求条件, ...
- JavaScript跨域请求和jsonp请求实例
<script type="text/javascript" src="./whenReady.js"></script> <sc ...
- Nodejs后台管理员登录实例
思路: 直接访问后台页面时如果无session则跳转到404 当在登录页的表单提交时对数据库进行匹配,匹配成功生成session,否则提示用户名或密码错误 准备页面 :后台首页.登录页.404页, 步 ...
- 百度搜索关键词联想API JSONP使用实例
许多搜索引擎都提供了关键词联想api,且大多数都是jsonp. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...
- Struts2的jsonp接口实例
和以往写struts2程序一样,action方法跳转到一个JSP中,为了配合jsonp的跨域,要在JSP中做一个输出 JSP: <%@ page language="java" ...
- php下的jsonp使用实例
参考资料:http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html 测试依赖条件: 项目eetopinOfficial 在hosts ...
随机推荐
- oracle 如何快速删除两表非关联数据(脏数据)?
1.情景展示 现在有两者表,表1中的主键id字段和表2的index_id相对应.如何删除两表非关联数据? 2.解决方案 --第1步 delete from VIRTUAL_CARD t where ...
- 面试官问线程安全的List,看完再也不怕了!
最近在Java技术栈知识星球里面有球友问到了线程安全的 List: 扫码查看答案或加入知识星球 栈长在之前的文章<出场率比较高的一道多线程安全面试题>里面讲过 ArrayList 的不安全 ...
- 【Gamma】Scrum Meeting 1 & 与助教谈话
前言 Gamma阶段第1次会议在5月26日22:00由PM在大运村一公寓三层召开, 时长30min. 任务分配 姓名 今日任务 明日任务 困难 周博闻 用户控制器解耦和注释 用户控制器解耦和注释 周国 ...
- [BUAA软工]beta阶段贡献分
团队成员在Beta阶段的角色和具体贡献: 名字 角色 具体的可衡量的可验证的贡献 zpj 前段+ 前后端对接 博客X1 20+ commits ui 设计与实现 bug fixed: 2 推广:10 ...
- fastjson WriteClassName,Double类型不打3.3D
方式一: public class SerializeConfigX extends SerializeConfig { public SerializeConfigX() { put(Double. ...
- DNA replication timing数据库 - Replication Domain
DNA Replication Timing ReplicationDomain: a visualization tool and comparative database for genome-w ...
- Spring Boot使用Html
1.引入模板thymeleaf <dependency> <groupId>org.springframework.boot</groupId> <artif ...
- 【python基础学习】基础重点难点知识汇总
python中decorator装饰器 语法示例: @decorator 什么是装饰器: 问题: 定义一个函数后 在运行时动态增加功能 又不想改动函数本身的代码 示例: # 希望对下列函数调用增加lo ...
- linux中SIGHUP与nohup的关系
SIGHUP信号与控制终端 UNIX中进程组织结构为 session (会话)包含一个前台进程组及一个或多个后台进程组,一个进程组包含多个进程.一个session可能会有一个session首进程, ...
- Linux系统中日志级别详情
日志信息分类 1.等级由低到高:debug<info<warn<Error<Fatal; 2.区别: debug 级别最低,可以随意的使用于任何觉得有利于在调试时更详细的了解系 ...