Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS关键知识点：JSON和Ajax
Blogger Information
Blog 145
fans 7
comment 7
visits 164674
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS关键知识点：JSON和Ajax
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
997 people have browsed it

随堂知识总结：

一、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>

运行结果图：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：js是比较有意思的, 不要着急
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post