JavaScript编程基础(八)json 跨域 异步编程 原创 阁主 2023-08-14 11:10:02 阅读 1897 次 评论 0 条 摘要:继续上次的JavaScript编程基础(七)继续学习,简单记录学习PHP中文网23期JavaScript基础知识,内容包括:json简介和使用、跨域方案(jsonp与服务器端跨域)、fetch 与 async, await 异步的同步风格 ## 介绍 常规的前后端交互都是直接传输html文档直接前端解析,但是做了前后端分离后,绝大部分都是通过JSON来进行数据交互的。简易的示例图如下: ![](https://www.mainblog.cn/zb_users/upload/2023/08/202308131030038671272.png) ## 特点 使用json有以下特点: - 通用,轻量, 利于交互和传输 - 独立于语言,主流语言都提供了与 json 的编程接口 - json 本质上就是一个格式化字符串 - 类型: `number`,`string`,`boolean`,`null`,`array`,`object` - 注: 没有 `undefined` ## 转换 - js->json: `JSON.stringify(obj)` - json->js: `JSON.parse(jsonStr)` ```html JSON ``` ## 跨域 cors: jsonp ![](https://www.mainblog.cn/zb_users/upload/2023/08/202308131807349047396.png) - 同源 1. 同源策略,禁止跨域: 浏览器最基本的安全机制 2. 同源:协议,域名,端口全部相同,才可互相访问 ```bash 下面域名全部跨域 https://php.cn http://php.cn http://php.net https://php.cn:443 https://php.cn:888 ``` - CORS 1. CORS: 跨域资源共享(Cross-origin Resource Sharing) 2. 突破了浏览器同源访问的安全策略 - JSONP: `JSON with Padding` (用 JSON 填充参数) ![](https://www.mainblog.cn/zb_users/upload/2023/08/202308132314129239735.png) demo1.html: ```html cors: jsonp 跨域请求 ``` test.php: ```php '灭绝老师', 'email' => 'mj@qq.com'], 301); // 获取函数名称 $fn = $_GET['fn']; // 输出函数调用语句 echo "$fn($user)"; ``` ## cors: 服务器端跨域 ![](https://www.mainblog.cn/zb_users/upload/2023/08/202308132313421931511.png) - 服务器允许: `Access-Control-Allow-Origin` demo2.html: ```html cors: 服务器端跨域 跨域请求-1 ``` test1.php: ```php '马老师', 'email' => '5678@qq.com']); ``` ## Ajax(XHR): 了解(已淘汰) 1. 创建对象: `new XMLHttpRequest()` 2. 响应类型: `xhr.responseType = 'json'` 3. 配置参数: `xhr.open("GET / POST", url, true)` 4. 请求回调: `xhr.onload = () => console.log(xhr.response)` 5. POST:`xhr.setRequestHeater('content-type','application/json')` 6. 失败回调: `xhr.onerror = () => console.log('Error')` 7. 发起请求: `xhr.send(null / jsonString)` ![Ajax(XHR)示例](https://www.mainblog.cn/zb_users/upload/2023/08/202308140934564894260.png) ```html ajax-xhr: 了解(已淘汰) Ajax(XHR) ``` ## Fetch 1. 异步请求: `fetch().then().then().catch()` 2. 异步函数: `async`,`await` 3. 注意:await 必须用在 async 声明的函数内部 ![](https://www.mainblog.cn/zb_users/upload/2023/08/202308141044186012110.png) ```html fetch fetch api ``` ## async函数 这个方法是将上面fetch部分的链式的异步的书写方式,改成传统的可读性更好的同步风格。 ![](https://www.mainblog.cn/zb_users/upload/2023/08/202308141109431157451.png) ```html async函数 async ``` ## fetch api 不多介绍了,可以自行百度查阅,讲得比我还清楚,这边只作学习笔记的记录。 ![](https://www.mainblog.cn/zb_users/upload/2023/08/202308141632487820395.png) html.php: ```php 首页 教学视频 社区问答 ``` json.php: ```php 1, 'name' => '外套', 'price' => 300], ['id' => 2, 'name' => '鞋子', 'price' => 200], ['id' => 3, 'name' => '袜子', 'price' => 50], ]; // 序列化为json格式字符串返回前端 echo json_encode($data); ``` insert.php: ```php php 加true,转为数组 $item = json_decode($jsonStr, true); $data = [ ['id' => 1, 'name' => '外套', 'price' => 300], ['id' => 2, 'name' => '鞋子', 'price' => 200], ['id' => 3, 'name' => '袜子', 'price' => 50], ]; // 将前端上传的数据,添加到数组中 array_push($data, $item); // 将数组转为json字符串 echo json_encode($data); ``` style.css: ```css .container { width: 300px; min-height: 180px; border: 1px solid #aaa; } .container .nav { display: flex; height: 30px; border-bottom: 1px solid #aaa; } .container .nav > button { flex: 1; border: none; background-color: #fff; border-right: 1px solid #aaa; } .container .nav > button:last-child { border-right: none; } .container .nav > button:hover { cursor: pointer; background-color: #eee; transition: 0.5s; } ``` fetch.html: ```html fetch api get-html get-json post-json ``` 本文地址:https://www.mainblog.cn/333.html 版权声明:本文为原创文章,版权归 阁主 所有,欢迎分享本文,转载请保留出处! 免责申明:有些内容源于网络,没能联系到作者。如侵犯到你的权益请告知,我们会尽快删除相关内容。 PREVIOUS:JavaScript编程基础(七)经典实战之轮播图构造与功能模块的编写 NEXT:JavaScript编程基础(九)完结散花:闭包原理、实战之投票系统与购物车功能 文章导航