JSONP原理及应用实例详解

这篇文章主要介绍了JSONP的原理及应用实例详解。JSONP作为一种跨域数据交互协议，其本质是一种依靠开发人员的智慧创造出来的非官方协议。它在JSON的基础上，弥补了跨域无法获取数据的缺陷。接下来，让我们一起跟随长沙网络推广来详细了解JSONP的原理及应用。

我们先来了解一下JSONP与JSON之间的区别。JSON（JavaScript Object Notation）是一种基于文本的数据交换方式，或者说是一种数据描述格式。它具有许多优点，比如基于纯文本，跨平台传递极其简单；JavaScript原生支持，后台语言几乎全部支持；轻量级数据格式，占用字符数量极少，特别适合互联网传递等。它的缺点也很明显，那就是跨域无法获取数据。而JSONP的出现，正好解决了这一问题。

那么，什么是JSONP呢？JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。它的本质是一种js文件，利用Web页面上调用js文件时不受是否跨域的影响这一特性，实现了跨域数据交互。不仅如此，凡是拥有"src"这个属性的标签都拥有跨域的能力，比如

```

在JQuery中，JSONP的实现是动态的。它首先定义一个JavaScript函数（在这里是`myCustomCallback`），然后通过`

```

接下来是后端Node.js服务器的搭建。我们需要告诉Node.js引入http模块来创建HTTP服务器。我们还需要引入url模块来url字符串，以及引入querystring模块来处理查询字符串。

Node.js服务器代码如下：

```javascript

var http = require('http'); // 引入http模块

var url = require('url'); // 引入url模块

var querystring = require('querystring'); // 引入querystring模块

// 创建新的HTTP服务器

var server = http.createServer();

// 当收到前端发来的请求时，服务器做出响应

server.on('request', function(req, res) {

var urlPath = url.parse(req.url).pathname; // 请求的URL路径

var qs = querystring.parse(req.url.split('?')[1]); // 查询字符串

if (urlPath === '/jsonp' && qs.callback) { // 如果请求路径为/jsonp且含有callback参数

res.writeHead(200, { 'Content-Type': 'application/json;charset=utf-8' }); // 设置响应头

var data = { "name": "Monkey" }; // 准备返回的数据

var callback = qs.callback + '(' + JSON.stringify(data) + ');'; // 构建JSONP格式的响应内容

res.end(callback); // 发送响应到前端

} else { // 如果不是/jsonp路径或者没有callback参数，则返回默认信息

res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' }); // 设置响应头

res.end('Hello World'); // 返回简单的欢迎信息

}

});

// 服务器监听8080端口，开始接收请求

server.listen(8080);

console.log('服务器运行成功！'); // 服务器启动成功后的提示信息