文章详细介绍了JSON作为轻量级数据交换格式的使用，包括对象和数组的表示，以及在JavaScript中的转换方法。同时，探讨了同源策略和跨域问题，阐述了JSONP如何通过动态添加script标签来解决跨域请求，强调了前后端talk函数在数据传递过程中的作用。
json知识点
json是轻量级数据交换，使用两种方式开表示数据
1 对象形式，用{}括起来的“键值对（名称/值）”形式， 键与值用:（冒号）分割，每一个键值对用,（逗号）分割。
2 数组形式，用[]括起来的值的有序集合，值与值用,（逗号）分割，每个值都需要""(引号)。
举例： { “name”: “清风”,talk:“hello” } [ “hello,word”, “hello,json” ]
3 json在数据传输过程中以字符串形式传输，但是js需要的是json对象，所以需要进行数据格式转换。
json字符串转变为js对象：JSON.parse(str) js对象变成json字符串 ： JSON.stringfy(str)
json.js文件内容
const str = '{"name":"清风","age":"300"}'
const str2 = {'drunk':"water","brand":"农夫三拳"}
const data1=console.log(JSON.parse(str))
const data2=console.log(JSON.stringify(str2))
talk({
"say":"hello,word" //js文件需要的是json对象,需要对其进行JSON.stringfy()
})
//
// talk(
// '"say":"hello,word"' //数据传输需要的是json字符串
// )
html文件
<body>
<script>
function talk(data){
console.log(data)
}
</script>
<script src="./json.js?callback=talk"></script>
</body>
结果显示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o4KZQX6Y-1674041718322)(C:\Users\清风\AppData\Roaming\Typora\typora-user-images\image-20230118164349703.png)]
jsonp知识点
1 同源策略：同源：指端口，协议，域名都一致，同源策略是一个安全策略.
2 若是端口或协议或域名不一致，这时候就会涉及到跨域问题。而jsonp，cors是用来解决跨域问题的。
3 jsonp是通过
4 实现jsonp
html文件
<script>
var oscript = document.createElement('script')
oscript.src = 'http://127.0.0.1:8080/api/a?callback=talk'
document.body.appendChild(oscript)
function talk(obj){
console.log(obj)
}
</script>
js文件
const http = require("http")
const url = require('url')
const server=http.createServer((req,res) =>{
const urlStr = url.parse(req.url,true) // 第二个参数如果为true，则query属性将始终设置为querystring模块的 parse()方法返回的对象
const queryStr=urlStr.query.callback
switch(urlStr.pathname){ // url.pathname()获取和设置网址的路径部分,即/api/a
case "/api/a":
res.end(`${queryStr}(${JSON.stringify({ // 调用html（客户端）的talk函数并传参
name: 'krew',
age:100 })
})`) // js中用到的是json对象，但是数据传输需要的是json字符串，所以用json.stringfy
break;
default:
res.end('404')
}
})
server.listen(8080,()=>{
console.log("http://127.0.0.1")
})
s.end(‘404’)
}
})
server.listen(8080,()=>{
console.log(“http://127.0.0.1”)
})
主要是理解talk函数在前后端分别起的作用。1 在后端代码中: ${queryStr}告诉后端,有个前端叫talk的函数需要接收后端的值，后端只需要写对应的json字符串。 2 在前端代码中：前端拿到后端传过来的内容，发现存在一个talk函数，并且带有参数，就会执行该函数。
扫一扫
240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
