`

用nodejs实现json和jsonp服务

阅读更多

      一、JSON和JSONP

      JSONP的全称是JSON with Padding,由于同源策略的限制,XmlHttpRequest只允许请求当前源(协议,域名,端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在相应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式成为JSONP。

      由此我们可以看出两者的区别:

      json: 一种轻量级的数据格式。

      jsonp:为实现跨域,而采用的一种脚本注入方法。

      备注:要了解更多json,可以参见我原先写的一篇介绍json的文章:《JSON那些事》

 

      二、实现

      为了简单起见,我们要读取数据都是

var data = {'name': 'jifeng', 'company': 'taobao'};

      1. 服务器端代码:

复制代码
var http = require('http');
var urllib = require('url');

var port = 10011;
var data = {'name': 'jifeng', 'company': 'taobao'};

http.createServer(function(req, res){
var params = urllib.parse(req.url, true);
console.log(params);
if (params.query && params.query.callback) {
//console.log(params.query.callback);
var str = params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp
res.end(str);
} else {
res.end(JSON.stringify(data));//普通的json
}
}).listen(port, function(){
console.log('server is listening on port ' + port);
})
复制代码

        2. 游览器端代码,为方便起见,我直接用了jquery的方法

复制代码
<html>  
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
function get_jsonp() {
$.getJSON("http://10.232.36.110:10011?callback=?",
function(data) {
$('#result').val('My name is: ' + data.name);
});
}
</script>
<a href="javascript:get_jsonp();">Click me</a><br />
<textarea id="result" cols="50" rows="3"></textarea>
</body>
</html>
复制代码

   

分享到:
评论

相关推荐

    用nodejs实现json和jsonp服务的方法

    Node.js实现JSON和JSONP服务是一种常见的需求,尤其在需要进行跨域数据访问时。JSON是一种轻量级的数据交换格式,基于JavaScript的一个子集。而JSONP(JSON with Padding)是为了解决同源策略限制而发明的一种跨域...

    node跨域请求方法小结

    参看用nodejs实现json和jsonp服务 第二种:res.wirteHead node部分 var http = require('http') var url = require('url') var querystring = require('querystring') var port = 9000 var jsonData = { 'name': ...

    VUE and nodejs Demo

    6. **项目结构与工程化**:了解良好的项目结构设计,如分离视图、逻辑和数据层,使用Webpack进行模块打包,配置.babelrc进行ES6语法转换,设置.gitignore和package.json管理依赖。 7. **部署与测试**:学习如何将...

    Node.js-node-crawler-NodeJS中的爬虫拥有简洁的API

    const jsonData = JSON.parse(jsonpCallback[1]); console.log(jsonData); } done(); }); ``` 在标签“Node.js开发-HTTP工具”中,我们可以理解到 `node-crawler` 是 Node.js 开发者在处理 HTTP 请求,尤其是...

    nodeJS-with-jquery-example:使用 nodeJS 作为后端和前端与 pureJS 的简单示例

    在本项目"nodeJS-with-jquery-example"中,我们将探讨如何使用Node.js作为后端服务器,并结合jQuery在前端实现交互。这是一个很好的实例,展示了如何在实际应用中将这两种JavaScript技术结合使用,创建一个完整的Web...

    明星图(含NODEJS后端).rar

    同时,如果项目涉及用户认证,那么JWT(JSON Web Tokens)或OAuth等身份验证协议也可能被使用到。 总的来说,这个项目涵盖了Node.js后端开发、小程序前端开发、数据库设计、API接口设计、以及跨域通信等多个IT领域...

    json-server-demo:教程如何与json-server一起使用

    JSON-SERVER是一个非常有用的工具,尤其对于前端开发者来说,它能帮助快速搭建模拟后端API的服务,以便在没有实际后端的情况下进行前端开发和测试。本教程将详细讲解如何使用JSON-SERVER创建一个简单的API,并进行...

    基于Nodejs利用socket.io实现多人聊天室

    在本文中,我们将深入探讨如何使用Node.js和socket.io库创建一个多人聊天室。WebSocket是一种在Web应用程序中实现低延迟、双向通信的技术,它允许服务器和客户端之间建立持久的连接,以便实时交换数据。然而,由于...

    centrifugo-cmd:NodeJS Centrifugo发送器

    Centrifugo是一款实时消息传输服务器,它使用WebSocket、Server-Sent Events (SSE) 和JSONP等技术,为Web和移动应用提供高效、可靠的实时通信。`centrifugo-cmd` 是一个用Node.js编写的命令行工具,专门用于与...

    跨域解决方案

    使用 jquery 的 ajax 方法可以实现 jsonp 跨域: ``` $.ajax({ url: 'http://www.abc.com:8080/login', type: 'get', dataType: 'jsonp', jsonpCallback: 'BackF', data: {} }) ``` 使用原生 js 也可以实现 ...

    StockWatch:用于观看 ASX 股票的 NodeJS 代码

    《使用NodeJS构建StockWatch:ASX股票监控系统》 在现代金融领域,实时跟踪股票市场动态至关重要。本文将深入探讨如何使用NodeJS这一强大的JavaScript运行环境,构建一个名为"StockWatch"的系统,用于监视澳大利亚...

    前端常见跨域解决方案(全)

    1. JSONP(JSON with Padding)跨域:JSONP是一种利用`&lt;script&gt;`标签不受同源策略限制的特性来实现跨域请求的方法。它通过动态创建`&lt;script&gt;`标签,并设置其`src`属性为一个动态生成的URL,该URL包含一个回调函数名...

    此应用程序是作为node.js和socket.io教程的一部分创建的。它包括一个内置在node.js中的服务器.zip

    【描述】: 这个应用程序展示了如何使用Node.js作为后端服务器,并结合Socket.IO实现高效的实时通信功能。Node.js是一个流行的JavaScript运行环境,它允许开发者在服务器端运行JavaScript代码,提供了强大的网络I/O...

    ajax服务端代码node.js

    它让开发者能够在服务器端使用 JavaScript 编程,从而实现了前端和后端的统一。Node.js 提供了一个丰富的生态系统,其中 Express 是最流行的 Web 应用框架之一。 **二、Express 框架** Express 是一个简洁而灵活的 ...

    sys-api:NodeJS 的模块化 System-API 框架 - 在 RestifyJS 之上

    NodeJS 的模块化 System-API 框架 - 在 RestifyJS 之上。 它是用 Coffeescript 编写并编译为 Javascript。 特征: 授权(可选 bcrypt,匿名) CORS(跨源资源共享) HTTP/S (TLS) 验证引擎 正文解析器(JSON,...

    apiGeoSearch:带有API Google Maps Integration示例的NodeJS

    7. **JSONP和CORS**: 如果项目需要跨域访问Google Maps API,可能涉及到JSONP(JSON with Padding)或者CORS(Cross-Origin Resource Sharing)策略。JSONP是一种处理跨域问题的早期方案,而CORS是现代浏览器支持的...

    socket.io客户端及服务端

    Socket.IO的服务端通常用Node.js编写,通过npm(Node.js包管理器)安装Socket.IO库,然后创建一个Server实例,监听特定端口,实现监听和响应客户端连接的逻辑。 在Unity中,需要找到一个支持的Socket.IO客户端库来...

    第十八课 ajax1

    之后,你可以通过 `open()` 方法设置请求类型(GET、POST等)、URL和异步标志,再用 `send()` 方法发送请求。响应可用 `onreadystatechange` 事件监听,当 `readyState` 属性为4时,表示请求已完成,可以使用 `...

    jsonp:代理来帮助处理跨域请求

    安装NodeJS&gt; = 7.6.0和 。 安装依赖项。 npm install 设置CloudFlare。 ,并确保您有指向DNS的域。 进入目录。 cd terraform 创建一个terraform/terraform.tfvars文件。 cloudflare_email = " ... " cloud...

Global site tag (gtag.js) - Google Analytics