大家好，这里是「从零开始学 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);

转载于:https://www.cnblogs.com/lvonve/p/9337820.html

从零开始学 Web 之 Ajax（五）同步异步请求，数据格式相关推荐

从零开始学 Web 之 Ajax（七）跨域
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 系列教程
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新-- github:https://github.com/Daotin/Web 微信公众号:前端队长博客园:http://ww ...
从零开始学 Web 之 BOM（四）client系列
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 ES6（三）ES6基础语法一
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... +-------------------------------------------------------- ...
从零开始学 Web 之 JS 高级（二）原型链，原型的继承
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之移动Web（九）微金所案例
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 JavaScript（三）函数
大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
Ajax→异步的JavaScript和XML、HTTP请求响应、Ajax简介同步异步、XMLHttpRequest类的方法及属性、原生Ajax、Koa实现Ajax、接口文档、浏览器同源策略、反向代理
浏览器服务器 HTTP请求响应数据库后端语言 Ajax简介同步异步 Koa前端框架 XMLHttpRequest类的方法及属性原生Ajax Koa实现Ajax JSON DOM 接口文档浏览器同 ...

从零开始学 Web 之 Ajax（五）同步异步请求，数据格式