search

博客列表 >JS关键知识点：JSON和Ajax

JS关键知识点：JSON和Ajax

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年05月25日 16:30:58996浏览

随堂知识总结：

一、JSON相关知识：

1、json是借用了JS对象字面量法来表示数据，是一种轻量级，用于数据交换与存储的格式化的字符串（本质上仍是一个字符串）；
2、json数据类型：

  • 简单值：100，”hello”,true,null,没有undefined
  • 对象：{……}
  • 数组：[……]
  • 简单值字符串：必须且只能用双引号作为定界符；

3、JS中有关json的两个方法：

  • 序列化：JS对象序列化为JSON格式的字符串JSON.stringify(JS_obj,array|fucntion(key,value){……},'字符缩进数和字符');当第二个参数为数组时：限制序列化成员（序列化白名单）;反之为回调函数对JS对象中的元素进一步处理返回JSON中（必须有return value；否则为空，如果不需要某值返回undefined）;第三个参数为JSON缩进字符；
    注意：JS对象序列化之后，会将以下三种成员删除：
    （1）方法（函数）
    （2）值为undefined的属性
    （3）继承的原型对象成员

  • 解析：将JSON格式的字符串解析/还原为JS对象JSON.parse(json,function(key,value){……;return value;});当只有一个参数时：直接解析JSON对象返回JS对象；当为两个参数时：第二个参数为回调函数，把JSON对象中的值处理后在返回；

4、JSON与JS对象的区别：

  • (1)没有变量声明：JSON中没有变量的概念
  • (2)没有分号：JSON不是语句；
  • (3)JSON属性名必须加上双引号：任何时候任何地方都必须加双引号，且必须加双引号

tips:为了规范/自定义序列化的返回结果，允许在JS对象中创建一个方法：toJSON;toJSON在调用JSON.stringify()时自动调用，像魔术方法一样；

二、AJax相关知识:

1、同步和异步的概念：
同步：发出请求得到响应放回数据，才可以发送另一个
异步：发出请求，不需要得到响应回复就可以发出另一个请求，（回调函数）;
2、XMLHttpRequest基本流程（两种形式GET和POST）：
（1）、请求的进本流程（GET）

  1. 创建请求对象：xhr=new XMLHttpRequest();
  2. 监听请求回调：xhr.onreadystatechange=function(){};
  3. 设置请求参数：xhr.open(请求类型，请求url,是否异步)（默认true,异步）
  4. 发送请求：xhr.send(null)

(2)、请求的基本流程（POST）

  1. 创建请求对象：xhr=new XMLHttpRequest();
  2. 监听请求回调：xhr.onreadystatechange=function(){};
  3. 设置请求头：xhr.open(请求类型，请求url,是否异步)：默认true,异步
  4. 设置请求头：xhr.setRequestHeader()
  5. 准备请求的数据：var data={……}
  6. 发送请求：xhr.send(data);可以添加键值对形式返回:send(‘user=’+data);

3、监听事件：onreadystatechange(在xhr监听对象中,xhr可以用this代替)

  1. reponseText:返回ajax请求文本
  2. reponseXML：返回的html/xml;
  3. readyState===4:标识Ajax请求状态（4代表成功）
  4. status:返回数据（200代表OK）

4、发送数据的两种格式在请求头中设置:

  1. xhr.setRequestHeader('content-type','applicaton/x-www-form-urlencoded')表单数据形式
  2. xhr.setRequestHeader('content-type','applicaton/json;charset=utf-8')json数据形式

在Ajax中POST形式中还有一种默认表单数据发送形式(不需要设置请求头):FormData();

  1. var data=new FormData();
  2. data.append(key,value);
  3. xhr.send(data);

5、附加知识点:
setTimeout(函数、time) 方法用于在指定的毫秒数后调用函数或计算表达式。
onsubmit="return false"禁用表单提交事件；
6、获取Ajax发送的数据:以GET形式发送的数据:$_GET
以POST形式发送的数:$_POST
数据格式如果是JSON格式,则以file_get_contents(‘php://input’)获取,其他都已$_POST获取;
Ajax请求返回的响应一般是responseText文本格式,所以服务端接受Ajax默认返回数据转化成JSON格式返回;

代码练习

1.Ajax请求GET形式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <span>服务器成功调用</span>
  10.   </body>
  11.   <script>
  12.     // 创建请求对象
  13.     var xhr = new XMLHttpRequest();
  14.     //创建回调监听
  15.     xhr.onreadystatechange = function () {
  16.       if (xhr.readyState === 4 && xhr.status === 200) {
  17.         console.log(xhr.responseText);
  18.         var h2 = document.createElement("h2");
  19.         h2.innerHTML = xhr.responseText;
  20.         document.body.appendChild(h2);
  21.       }
  22.     };
  23.     xhr.open("GET", "test.php", true);
  25.     xhr.send(null);
  26.   </script>
  27. </html>

运行结果

2.Ajax请求POST形式(json格式):

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax,演练POST</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // new一个XMLHttpRequest对象
  11.       var xhr = new XMLHttpRequest();
  12.       //监听事件操作
  13.       xhr.onreadystatechange = function () {
  14.         if (xhr.readyState === 4 && xhr.status === 200) {
  15.           var data = JSON.parse(xhr.responseText);
  16.           // console.log(data);
  17.           var name = document.createElement("span");
  18.           name.innerText = "用户名：" + data.username;
  19.           document.body.append(name);
  20.           var pass = document.createElement("span");
  21.           pass.innerText = "密 码：" + data.password;
  22.           document.body.append(pass);
  23.         }
  24.       };
  25.       //初始化请求参数
  26.       xhr.open("POST", "test3.php", true);
  27.       //设置请求头
  28.       xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
  29.       //准备请求数据
  30.       var user = {
  31.         username: "ldy",
  32.         password: "123456",
  33.       };
  34.       //发送数据
  35.       xhr.send(JSON.stringify(user));
  36.     </script>
  37.   </body>
  38. </html>

代码演示结果:

3.Ajax请求POST形式(FormData对象):

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax,演练POST</title>
  7.     <style></style>
  8.   </head>
  9.   <body>
  10.     <h1>用户信息</h1>
  11.     <table aglin="center" cellpadding="3" cellspacing="0" border="2" }>
  12.       <tr>
  13.         <th>账户</th>
  14.         <th>密码</th>
  15.       </tr>
  16.     </table>
  17.     <script>
  18.       // new一个XMLHttpRequest对象
  19.       var xhr = new XMLHttpRequest();
  20.       //监听事件操作
  21.       xhr.onreadystatechange = function () {
  22.         if (xhr.readyState === 4 && xhr.status === 200) {
  23.           var user = xhr.responseText;
  24.           var userdata = JSON.parse(user);
  25.           console.log(userdata.name);
  26.           var name = document.createElement("tr");
  27.           name.innerHTML =
  28.             "<td>" + userdata.name + "</td><td>" + userdata.ps + "</td>";
  30.           document.body.getElementsByTagName("table").item(0).append(name);
  31.         }
  32.       };
  33.       //初始化请求参数
  34.       xhr.open("POST", "test2.php", true);
  35.       //省略设置请求头
  36.       // xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
  37.       //准备请求数据
  39.       var data = new FormData();
  40.       data.append("name", "ldy@qq.com");
  41.       data.append("ps", "123456");
  42.       //发送数据
  43.       xhr.send(data);
  44.     </script>
  45.   </body>
  46. </html>

演示结果

4.案例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>用户注册</title>
  8.     <style>
  9.     * {
  10.         margin: 0;
  11.         padding: 0;
  12.     }
  14.     h2 {
  15.         /* display: block; */
  16.         width: 350px;
  17.         margin: 0 auto;
  18.         text-align: center;
  19.         padding-top: 10px;
  20.         box-sizing: border-box;
  22.     }
  25.     form {
  26.         margin: 10px auto;
  27.         width: 350px;
  28.         height: 250px;
  29.         background-color: #5384e8;
  30.         display: flex;
  31.         flex-flow: column nowrap;
  32.         justify-content: space-evenly;
  33.         align-content: center;
  34.         align-items: center;
  35.         font-size: 1.2rem;
  37.     }
  39.     form:hover {
  40.         box-shadow: 0 0 5px #626262;
  41.     }
  43.     form>.button {
  44.         width: 280px;
  45.         display: flex;
  46.         justify-content: space-evenly;
  47.     }
  49.     form>.button>input {
  50.         width: 100px;
  51.         height: 30px;
  52.         background-color: #00bb00;
  53.         border: none;
  54.         border-radius: 15px;
  55.     }
  57.     form>.button>input:hover {
  58.         background-color: red;
  59.         color: white;
  60.     }
  62.     a {
  63.         color: white;
  64.         text-decoration: none;
  65.     }
  66.     </style>
  67. </head>
  69. <body>
  70.     <h2>用户注册</h2>
  71.     <form method="POST" onsubmit="return false">
  73.         <div class='account'>
  74.             <label for="username">账户：</label>
  75.             <input type="email" required name="username" id="username" placeholder="example@163.com">
  76.         </div>
  77.         <div class='pwd'>
  78.             <label for="p2">密码：</label>
  79.             <input type="password" required name="p2" id="p2" placeholder="不少于六位">
  80.         </div>
  82.         <div class="button">
  83.             <input type="submit" value="登陆">
  84.             <input type="reset" value="重置">
  86.         </div>
  87.         <div>
  88.             <a href="regist.php">没有账号,点击此处注册!</a>
  89.         </div>
  90.     </form>
  91. </body>
  92. <script>
  93. var form = document.querySelector('form');
  94. var btn = document.querySelector('.button>:first-child');
  95. btn.onclick = function() {
  96.     var xhr = new XMLHttpRequest();
  98.     xhr.onreadystatechange = function() {
  99.         if (xhr.readyState === 4 && xhr.status === 200) {
  100.             var res;
  101.             res = JSON.parse(xhr.responseText);
  102.             var span = document.createElement('span');
  103.             span.innerText = res.messages;
  105.             form.append(span);
  106.         }
  107.     }
  109.     xhr.open("POST", "log.php", true);
  111.     var user = new FormData(form);
  112.     xhr.send(user);
  113. }
  114. </script>
  116. </html>

运行结果图：

上一条：JS - Ajax基础下一条：Javascript 中的数组和json对象
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多