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

从零开始学 Web 之 Ajax（五）同步异步请求，数据格式的更多相关文章

从零开始学 Web 之 Ajax（三）Ajax 概述，快速上手
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 Ajax（二）PHP基础语法
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 Ajax（四）接口文档，验证用户名唯一性案例
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 Ajax（六）jQuery中的Ajax
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 Ajax（七）跨域
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
从零开始学 Web 之 Ajax（一）服务器相关概念
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
jQuery基础（Ajax，load()，getJSON()，getScript()，post()，ajax()，同步/异步请求数据）
1.使用load()方法异步请求数据使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callba ...
从零开始学 Web 系列教程
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:http:/ ...
从零开始学 Web 之 ES6（五）ES6基础语法三
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...

随机推荐

python实现FTP服务器
https://www.cnblogs.com/huangxm/p/6274645.html
ES6 Rest参数
Rest参数接收函数的多余参数,组成一个数组,放在形参的最后,形式如下: function func(a, b, ...theArgs) { // ... } rest参数只包括那些没有给出名称的参数 ...
三次样条插值算法C++实现
三次样条插值算法 1 总体说明三次样条插值算法是一种计算量和效果都比较理想的插值算法.关于三次样条插值算法的原理这里不做过多的解释,下面的代码是我在网上收集了两种C++实现版本的基础上自己整合的一个 ...
etcd-v2第四集
coreos把etcd的image放到自家的quay.io,而不是hub.docker,或许是竞争关系,但国内下载quay.io容器极难,反正shadowsocks是下载不了. 幸好有热心爱好者搬运到 ...
VMWare 14.1 15 Pro 安装 macOS Mojave 10.14.1系统遇到的问题解决方案
安装环境 WIN10VMware Workstation Pro 15.0.0 Build 10134415工具准备1.VMware Workstation Pro 15.0.0 Build 1013 ...
获取Lambda表达式内表达式的值
随着Linq的盛行,对于Linq和Lmabda表达式的使用也越来越多,Lambda表达式在.net framework 3.5中提出来,Lambda表达式是一个匿名方法,通常在LINQ中被用来创建委托 ...
Eclipse进行远程调试（Tomcat远程调试）
1.配置tomcat Linxu系统: tomcat/bin/catalina.sh或者startup.sh开始处中增加如下内容: declare -x CATALINA_OPTS="-Xd ...
[算法专题] 二分搜索&排序数组
基础知识二分非递归写法: int binary_search(const int a[], const int size, const int val) { int lower = 0; int u ...
Windows核心编程：第1章错误处理
Github https://github.com/gongluck/Windows-Core-Program.git //第1章错误处理.cpp: 定义应用程序的入口点. // #include ...
dwr学习（一）：简单dwr实例
博客分类: dwr 最近写ajax写烦了,想着能不能有个更简单的“ajax”,一问就问到这个dwr了.赶紧去官网学习了下,这里写个博客记录一下实例. 测试环境:tomcat6.0 1.新建一个w ...

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