一 、JSON

JSON是一种数据格式，是一种在互联网传输中运用最多的数据交换语言，由于它轻便、灵巧，且能从各种语言中完全独立出来，所以成为目前最理想的数据交换语言
  • JSON语言采用key/value型数据格式
  • value是关键字的值，它可以由以下几种数据构成
值说明
String字符串
number数字
object对象（key:value）
array数组
true√
false×
null空
  1. jsObj -> jsonStr: js对象[前端] -> json字符串[后端], js对象的序列化
  1. const user = {
  2.       id: 1,
  3.       name: "猪老湿",
  4.       email: "88888@qq.com",
  5.       isMarried: true,
  6.       gender: "male",
  7.       salary: 123456,
  8. };
  10. console.log(JSON.stringify(user, null, 2));

  1. jsonStr -> jsObj: json字符串[后端] -> js对象[前端]
  1. const siteInfo = `
  2.    {
  3.      "name":"",
  4.      "domain":"https://www.php.cn",
  5.      "isRecord":true,
  6.      "email":"498668472@qq.com",
  7.      "address":"合肥市政务新区蔚蓝商务港",
  8.      "category":["视频","文章","资源"],
  9.      "lesson": {
  10.         "name": "第18期Web全栈线上培训班",
  11.         "price": 4800,
  12.          "content": ["JavaScript", "PHP", "ThinkPHP"]
  13.      }
  14.   }
  15. ;
  17. console.log(JSON.parse(siteInfo));

二 、传统XHR

  • 创建对象: new XMLHttpRequest();
  • 响应类型: xhr.responseType = “json”;
  • 配置参数: xhr.open(“GET”, url, true);
  • 请求回调: xhr.onload = () => console.log(xhr.response);
  • 失败回调: xhr.onerror = () => console.log(“Error”);
  • 发起请求: xhr.send(null);
  1. function getUser1(btn) {
  2.     // 1. 创建对象:
  3.     const xhr = new XMLHttpRequest();
  4.     // 2. 响应类型:
  5.     xhr.responseType = "json";
  6.     // 3. 配置参数:
  7.     let url = "http://website.io/users.php";
  8.     xhr.open("GET", url, true);
  9.     // 4. 请求回调:
  10.     xhr.onload = () => {
  11.         console.log(xhr.response);
  12.         // 渲染到页面中
  13.         render(xhr.response, btn);
  14.     };
  15.     // 5. 失败回调:
  16.     xhr.onerror = () => console.log("Error");
  17.     // 6. 发起请求:
  18.     xhr.send(null);
  19. }

三 、 Fetch API

Fetch语法:

fetch(…)
.then(…)
.then(…)
.catch(…)

  1. function getUser2(btn) {
  2.   // 无GET参数,则返回全部用户,用表格展示
  3.   let url = "http://website.io/users.php";
  4.   fetch(url)
  5.     .then(response => response.json())
  6.     .then(json => {
  7.       console.log(json);
  8.       // 渲染到页面中
  9.       render(json, btn);
  10.     })
  11.     .catch(err => console.log("Fetch Error", err));
  12. }

四、async, await 的使用场景

ECMA2017, async, await, 来简化了fetch , 实现同步的方式来编写异步代码
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title></title>
  9. </head>
  11. <body>
  12.     <button onclick="getUser(this)">查询用户信息 - Fetch</button>
  14.     <script>
  15.         // 异步函数,内部有异步操作
  16.         async function getUser(btn) {
  17.             let url = "http://website.io/users.php";
  18.             url = "http://website.io/users.php?id=3";
  19.             //await: 表示后面是一个异步请求,需要等待结果
  20.             const response = await fetch(url);
  21.             // response响应对象,json():将返回的数据转为json
  22.             const result = await response.json();
  24.             console.log(result);
  26.             // 渲染到页面中
  27.             render(result, btn);
  28.         }
  29.     </script>
  30.     <script src="function.js"></script>
  31. </body>
  33. </html>

更多相关文章

  1. Android的线程使用来更新UI----Thread、Handler、Looper、TimerT
  2. Android(安卓)Databinding（一）
  3. Android(安卓)反汇编Smali语言中插入log打印
  4. Android(安卓)Bundle类
  5. Android(安卓)AIDL使用详解
  6. Android(安卓)Bundle类
  7. Android的线程使用来更新UI----Thread、Handler、Looper、TimerT
  8. Android(安卓)Bundle类
  9. Android的线程使用来更新UI----Thread、Handler、Looper、TimerT

随机推荐

  1. Android使用Intent实现页面跳转
  2. Java和Javascript互调的例子 ---------（An
  3. 如何让Android屏幕只能上下翻转
  4. Android：控件GridView的使用实例
  5. android获取gps坐标
  6. android studio3.5.2打包，解决建议使用 "k
  7. [Android Pro] Android fastboot刷机和获
  8. android Theme使用四
  9. 仿照利用android系统源码资源文件，修改See
  10. Android 邮件发送(一键发送, 163邮箱)