在我们了解JSONP 和 CORS 之前我们先明确一下：
实际上，cors和jsonp都是用于解决跨域问题，当两个页面的协议、域名、端口号中有一个不一致时就存在了跨域，一旦出现跨域，浏览器发送跨域请求后，请求回来的数据都会被浏览器所拦截，准备一张图给大家看看：
现下实现跨域数据请求，最主要的两种解决方案分别是 JSONP 和 CORS 。
JSONP(⭐⭐⭐)
JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
JSONP的实现原理(⭐⭐⭐)
概念：浏览器端通过 <script> 标签的 src 属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做 JSONP
特点：
JSONP 不属于真正的 Ajax 请求，因为它没有使用 XMLHttpRequest 这个对象
JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求
CORS (跨域资源共享) 由一系列 HTTP 响应头组成，这些 HTTP 响应头决定浏览器 是否阻止前端 JS 代码跨域获取资源
浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可以解除浏览器端的跨域访问限制
index.html文件代码演示：
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<title>Document</title>
-
<script src="jquery.min.js"></script>
-
</head>
-
-
<body>
-
<button class="get">get请求</button>
-
<button class="post">post请求</button>
-
<script>
-
$('.get').on('click', function() {
-
$.ajax({
-
method: 'get',
-
url: 'http://127.0.0.1/api/get?name=hua&age=18',
-
success: function(res) {
-
console.log(res);
-
}
-
})
-
})
-
$('.post').on('click', function() {
-
$.ajax({
-
method: 'post',
-
url: 'http://127.0.0.1/api/post',
-
data: {
-
name: 'lajitong',
-
age: '111'
-
},
-
success: function(res) {
-
console.log(res);
-
}
-
})
-
})
-
</script>
-
</body>
-
-
</html>
此时会出现跨域问题，我们需要使用 cors 中间件解决跨域问题
cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题
使用步骤
安装中间件： npm install cors
导入中间件： const cors = require('cors')
配置中间件： 在路由之前调用app.use(cors())
express接口案例代码
-
// 导入 express 模块
-
const express = require('express')
-
-
// 创建 express 的服务器实例
-
const app = express()
-
-
// 导入中间件
-
const cors = require('cors')
-
// 配置中间件
-
app.use(cors())
-
-
// 配置解析表单数据的中间件
-
app.use(express.urlencoded({ extended: false }))
-
-
// 导入路由模块（被单独分离后导入）
-
const router = require('./apiRouter')
-
// 把路由模块，注册到 app 上
-
app.use('/api', router)
-
-
// 调用 app.listen 方法，指定端口号并启动 web 服务器
-
app.listen(80, () => {
-
console.log('http://127.0.0.1')
-
})
apiRouter路由文件代码：
-
const express = require('express');
-
const router = express.Router();
-
-
router.get('/get', (req, res) => {
-
const query = req.query;
-
res.send({
-
status: 0,
-
msg: 'get请求成功',
-
data: query
-
})
-
})
-
router.post('/post', (req, res) => {
-
// const body = req.body; //获取客户端请求的数据
-
res.send({
-
status: 0,
-
msg: 'post请求成功',
-
data: req.body
-
})
-
})
-
module.exports = router;
在终端中运行express接口代码后打开index.html文件并点击get及post按钮得到请求结果：
创建 JSONP 接口的注意事项
如果项目中已经配置了 CORS 跨域资源共享，为了防止冲突，必须在配置 CORS 中间件之前声明 JSONP 的接口
否则 JSONP 接口会被处理成开启了 CORS 的接口
实现步骤：
（1）获取客户端发送过来的回调函数的名字
（2）得到要通过 JSONP 形式发送给客户端的数据
（3）根据前两步得到的数据，拼接出一个函数调用的字符串
（4）把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行
案例代码如下：
-
//导入express模块
-
const express = require('express');
-
//创建express服务器实例
-
const app = express();
-
//挂载路由
-
app.get('/jsonp', (req, res) => {
-
// 通过解构req.query客户端通过查询字符串的形式发送到客户端的参数fn
-
const { callback } = req.query
-
//在服务器端定义一个obj对象
-
const obj = {
-
uname: 'zjj',
-
age: '18'
-
}
-
//obj对象转为res.send可处理的字符串形式后从服务器端相应回调函数至客户端
-
res.send(`${callback}(${JSON.stringify(obj)})`)
-
})
-
app.listen(80, () => {
-
console.log('http://127.0.0.1');
-
})
创建jsonp.html客户端来接收服务器端响应过来的回调函数，代码如下：
url中callback=fn为客户端发送请求携带的参数 既服务器端中的req.query.callback
-
<script>
-
function fn(res) {
-
console.log(res);
-
}
-
</script>
-
<script src="http://127.0.0.1/jsonp?callback=fn"></script>
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
使用JSON表示一个对象的格式：
{
"属性名1":"属性值1",
"属性名2":"属性值2",
......
"属性名":"属性值n"
}
注意事项
示例
{
"name":"金苹果",
"info":"讲述了种植苹果的辛酸历程"
}
JSON中的数组使用 [ ] 表示，并且数组可以跟对象互相嵌套
格式：
[元素1，元素2...]
示例：
数组包含对象
["张三","李四",{
"name":"王五",
"info":"一个在技术上使劲钻研的人"
}]
对象包含数组：
{
"name":"李小超",
"friend":["张三","李四",
{
"name":"王五",
"info":"一个在技术上使劲钻研的人"
}
]
"info":"一个非常帅气的人"
}
对象与对象的嵌套：
{
"name":"李小超",
"project":{
"school":"HPU",
"name":"computer"
}
}
将Java对象转换为JSON字符串
String json = new Gson().toJSON(要转换的对象);
代码示例：
Book b = new Book("金苹果","讲述了种植苹果的辛酸路程"); String str = new Gson().toJson(b);
将JSON字符串转换为Java对象
对象 = new Gson().fromJson(JSON字符串,对象类型.class);
代码示例：
Book b2 = new Gson().fromJson(str, Book.class); System.out.println(b2.getName());
String js = "{\"name\":\"金苹果\",\"info\":\"讲述了种植苹果的辛酸历程\",\"page\":[\"锄禾日当午\",\"汗滴禾下土\"]}"; HashMap data = new Gson().fromJson(js,HashMap.class); System.out.println(data.get("page").getClass()); /*
输出结果：class java.util.ArrayList
*/
我们在写JSON字符串的时候，需要注意使用转义字符转换双引号，另外，如果键值对的值是JSON数组，那么对应数组在转换之后的类型是ArrayList
使用fastJSON解析与Gson十分相似，不过前者使用的是静态方法。
Java对象转换为JSON字符串
String json=JSON.toJSONString(要转换的对象);
JSON字符串转换为Java对象
类型 对象名=JSON.parseObject(JSON字符串, 类型.class);
或者
List<类型> list=JSON.parseArray(JSON字符串,类型.class);
示例：
转换为Java对象
Book b2 = JSON.parseObject(json1,Book.class);
转换为List集合
List list = JSON.parseArray(json1,String.class);
在这里进行说明一下，我们观察JSON.parseArray()的源码可以看到，这个方法的返回值就是一个List类型的数据，我们向方法中传递的第二个参数是List元素所属的类型。
文章来源：csdn
、
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1.Json的格式
其实json就是对象。源生的js代码并没有类的概念。对象救就是object。对象有自己的属性，也可以有自己的方法。json是一种轻量级的存储和交换信息的语言。他有自己的格式。
较为简单的json。里面只有简单的对象，key+value的形式：
每个元素之间用逗号隔开。调用每个key的值可用语句。例如：CellInfo.UEAmunt，就可取出其中的值。
较为复杂的json。里面包含了对象。
例如这个UEGroup1，里面的元素不仅有简单的key+value，还包含了三个对象。对象里的元素用{}括起来，彼此之间用逗号隔开。想具体访问某个元素的值也是通过逐层key，例如：UEGrooup1.DBR1.DLPackageSize
动态的往json只增加元素，增加对象。
前面说的几个都是静态的，提前写好的。那如果临时想加一个元素，例如在Cellinfo这个json中相加一个number的元素：
CellInfo.number=10;
对于往json中添加对象。例如我们想把Cellinfo和UEGroup1这两个object作为两个元素加入到另外一个大的json中：
2.json的发送
json写好后，发送给后台。至于后台怎么处理数据我们不关心。发送json的函数如下：
}
参数分别是后台的地址，变量，方法。变量就是我们自己写好的json，方法默认为post。例如我们想发刚刚的PETInfo
$.post('http://10.140.160.64:3012/users/ueinfo', PETInfo);
数据的发送、并获取结果的实例：
需求描述：用户填写一系列的输入框，前端获取数据，封装成json并发送给服务器，服务器会返回一个返回值，表示状态。前端需要展示这个内容提示客户。
3.json在本地的存储
存储数据有很多方法。这里我用的是localStorage。localStorage与cookie的区别如下：
① cookie在浏览器与服务器之间来回传递。
sessionStorage和localStorage不会把数据发给服务器，仅在本地保存
②数据有效期不同：
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
sessionStorage：仅在当前浏览器窗口关闭前有效。
localStorage 始终有效，长期保存。
③cookie数据还有路径的概念，可以限制cookie只属于某个路径下。
存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
④ 作用域不用
sessionStorage不在不同的浏览器窗口中共享；
localStorage在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的；
WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
用localstage存储json的实例：
将json取出来：
蓝蓝 http://www.lanlanwork.com