无业可守 创新图强
living innovation

大润发888官网

当前位置:首页 > 大润发888官网 >

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

日期:2019-05-24

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......

github:https://github.com/Daotin/Web微信公众号:Web前端之巅博客园:http://www.cnblogs.com/lvonve/CSDN:https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、同步请求与异步请求

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

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

如果将 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);