专栏首页从零开始学 Web 前端从零开始学 Web 之 Ajax(五)同步异步请求,数据格式

从零开始学 Web 之 Ajax(五)同步异步请求,数据格式

一、同步请求与异步请求

同步请求:在用户进行请求发送之后,浏览器会一直等待服务器的数据返回,如果网络延迟比较高,浏览器就一直卡在当前界面,直到服务器返回数据才可进行其他操作。

异步请求:在用户进行请求发送之后,浏览器可以自由操作页面中其他的元素,当服务器放回数据的时候,才触发相应事件,对返回的数据进行操作。

如果将 Ajax 请求改为同步请求的话:

1、界面会卡顿,卡顿事件取决于网络速度;

2、xhr.onreadystatechange 的回调函数不会执行,因为在 xhr.send() 之后,xhr.readyState 就为 4 了,所以数据的处理,直接跟在xhr.send() 之后就可以了。

1、异步的底层原理

js 中的异步实现原理是单线程+事件队列。js 的代码执行是单线程的,单线程的意思是代码从上到下按照顺序执行,而事件队列存储了一些回调函数,当 js 从上往下执行的时候,遇到回调函数就将其放到事件队列,在所有 js 代码执行完成之后处于空闲状态时,才会去事件队列看有没有回调函数达到触发条件,有的话就执行,没有的话就继续闲着。

Ajax 的四步操作中,同步和异步的区别:

如果是异步请求,在 send 的时候,会调用浏览器进行网络数据的请求,send 就执行完了,接着将第四步的回调函数存储在事件队列里面,浏览器数据请求完了,readyState 状态发生变化,触发第四步回调函数的执行。

而在同步请求中, send 时是自己进行网络数据的请求,这个时候非得请求到数据,才会接着将第四步的回调函数存储在事件队列里面,所以如果网络延时页面就会卡死,在 send 过后接受到数据的时候 readyState 已经为4了,不会再变化,所以第四步的回调函数不会执行。

二、数据格式

什么是数据格式?

数据格式就是通过一定的规范组织起来,叫做数据格式。

1、XML 数据格式

XML 数据格式是将数据以标签的方式进行组装,必须以 <? xml version="1.0" encoding="utf-8" ?> 开头,标签必须成对出现,也就是有开始标签就一定要有结束标签。

<? xml version="1.0" encoding="utf-8" ?>
<students>
    <student>
      <name>张三</name>
      <age>18</age>
      <sex>男</sex>
  </student>
</students>

缺点:体积太大,元数据(描述数据的数据)太多,解析不方便,目前使用很少。

2、json 数据格式

json 数据格式通过 key-value 的方式组装。

{
  "student" : [
    {
      "name": "张三",
      "age": "18",
      "sex": "男"
    },
    {
      "name": "李四",
      "age": "23",
      "sex": "女"
    }
  ]
}

优点:体积小,传输快,解析方便。

3、案例:获取图书信息

接口文档:

地址

/server/getBooks/php

作用描述

获取图书信息

请求类型

get 请求

参数

返回数据格式

xml 格式

返回数据说明

如下

<?xml version="1.0" encoding="utf-8" ?>
<booklist>
    <book>
        <name>三国演义</name>
        <author>罗贯中</author>
        <desc>一个杀伐纷争的年代</desc>
    </book>
    
    <book>
        <name>水浒传</name>
        <author>施耐庵</author>
        <desc>108条好汉的故事</desc>
    </book>
    
    <book>
        <name>西游记</name>
        <author>吴承恩</author>
        <desc>佛教与道教斗争</desc>
    </book>
    
    <book>
        <name>红楼梦</name>
        <author>曹雪芹</author>
        <desc>一个封建王朝的缩影</desc>
    </book>
</booklist>

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍列表</title>
    <style>
        div{
            width: 800px;
            margin: 20px auto;
        }
        table{
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
        }
        th{
            background-color: #0094ff;
            color:white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
        td{
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
    </style>
    <script>
        window.onload = function () {  
            var xhr = new XMLHttpRequest();
            xhr.open("get", "./server/getBooks.php", true);
            xhr.send(null);
            xhr.onreadystatechange = function () {  
                if(this.readyState == 4) {
                    if(this.status = 200) {
                        var booklists = this.responseXML.getElementsByTagName("booklist")[0].getElementsByTagName("book");
                        
                        for(var i=0; i<booklists.length; i++) {
                            var name = booklists[i].getElementsByTagName("name")[0].textContent;
                            var author = booklists[i].getElementsByTagName("author")[0].textContent;
                            var desc = booklists[i].getElementsByTagName("desc")[0].textContent;

                            var trObj = document.createElement("tr");
                            trObj.innerHTML = "<td>"+name+"</td><td>"+author+"</td><td>"+desc+"</td>";
                            document.getElementsByTagName("table")[0].appendChild(trObj);
                        }
                    }
                }
            };


        };
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <th>书名</th>
                <th>作者</th>
                <th>描述</th>
            </tr>
            <!-- <tr>
                <td>三国演义</td>
                <td>罗贯中</td>
                <td>一个杀伐纷争的年代</td>
            </tr> -->
        </table>
    </div>
</body>
</html>

XML 数据的格式主要是通过:getElementsByTagName 来获取的。

4、案例:获取学生信息

接口文档:

地址

/server/getStudents/php

作用描述

获取学生信息

请求类型

get 请求

参数

返回数据格式

json 格式

返回数据说明

如下

[
  {
    "name":"张三",
    "age":"18",
    "sex":"男"
  }
]

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <style>
        div{
            width: 800px;
            margin: 20px auto;
        }
        table{
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
        }
        th{
            background-color: #0094ff;
            color:white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
        td{
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
    </style>
    <script>
        window.onload = function () {  
            var xhr = new XMLHttpRequest();
            xhr.open("get", "./server/getStudents.php", true);
            xhr.send(null);
            xhr.onreadystatechange = function () {  
                if(this.readyState == 4) {
                    if(this.status = 200) {
                        var jsonObj = JSON.parse(this.responseText);
                        for(var i=0; i<jsonObj.length; i++) {
                            var name = jsonObj[i].name;
                            var age = jsonObj[i].age;
                            var sex = jsonObj[i].sex;

                            var trObj = document.createElement("tr");
                            trObj.innerHTML = "<td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td>";
                            document.getElementsByTagName("table")[0].appendChild(trObj);
                        }
                    }
                }
            };
        };
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <!-- <tr>
                <td>张三</td>
                <td>20</td>
                <td>男</td>
            </tr> -->
        </table>
    </div>
</body>
</html>

只需要将获取的 responseText 转化为 json 格式的对象,使用JSON.parse(this.responseText);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从零开始学 Web 之 BOM(二)定时器

    多次点击“摇起来”按钮的时候,timeId 的值会有多个,而停止的时候,只会清理最后一个值,其他的值对应的定时器没有清理。

    Daotin
  • 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

    红橙黄绿青蓝紫红:颜色从 0~360 顺序,各占30度。比如红色为0,黄色为120,绿色为240。

    Daotin
  • CSS学习笔记(基础篇)

    CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)

    Daotin
  • Ajax-数据异步交互1.Ajax简介2.AJAX 实例

    AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网...

    意气相许的许
  • 《从案例中学习JavaScript》之实现对话效果(2)-- 附超简单函数封装技巧

    剽悍一小兔
  • 尝试Java加锁新思路:原子变量和非阻塞同步算法

    前文中曾经对比同步方法的内置锁相比和显式锁,来说明它们各自的优势,但是无论是内置说还是显式锁,其本质都是通过加锁来维护多线程安全。

    lyb-geek
  • Swift3.0 - 自动引用计数(strong,weak,unowned)

    定义两个类Student 和School,Student 有一个属性school ,school 也有一个属性student,我们让其相互引用

    酷走天涯
  • 产品经理要懂得直播软件开发两种模式

    直播软件开发制作?直播软件开发需要哪些流程?现在很多人想开发一款自己的直播软件,但是对直播软件开发又不了解,因此会有很多疑问。

    山东布谷科技
  • 轮播

    河湾欢儿
  • SQL 约束: 5种键值

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    云雀叫了一整天

扫码关注云+社区

领取腾讯云代金券