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

随机推荐

pythone函数基础（9）操作数据库连接
#操作数据库连接import pymysqlconn = pymysql.connect(host='118.24.3.40',user='jxz', password='123456',port=3 ...
Web常见安全漏洞-SQL注入
SQL注入攻击(SQL Injection),简称注入攻击,是Web开发中最常见的一种安全漏洞. 可以用它来从数据库获取敏感信息,或者利用数据库的特性执行添加用户,导出文件等一系列恶意操作, 甚至有可 ...
2018php最新面试题之PHP核心技术
一.PHP核心技术 1.写出一个能创建多级目录的PHP函数(新浪网技术部) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <?php ...
【Spark2.0源码学习】-7.Driver与DriverRunner
承接上一节内容,Client向Master发起RequestSubmitDriver请求,Master将DriverInfo添加待调度列表中(waitingDrivers),下面针对于Dri ...
Java多线程系列4 线程交互（wait和notify方法）
wait()/ notify()/ notifyAll() 任何Object对象都可以作为这三个方法的主调,但是不推荐线程对象调用这些方法. 1使用wait().notify()和notifyAll( ...
[uboot] （第五章）uboot流程——uboot启动流程
http://blog.csdn.net/ooonebook/article/details/53070065 以下例子都以project X项目tiny210(s5pv210平台,armv7架构)为 ...
@WebFilter怎么控制多个filter的执行顺序
转自:http://blog.csdn.net/liming_0820/article/details/53332070 之前我们控制多个filter的执行顺序是通过web.xml中控制filter的 ...
Android-Java-饿汉式单例模式(内存图)
描述Single对象: package android.java.oop14; public class Single { // 默认构造方法私有化不让外界调用 private Single() ...
Android开发 - Retrofit 2 使用自签名的HTTPS证书进行API请求
为了确保数据传输的安全,现在越来越多的应用使用Https的方式来进行数据传输,使用https有很多有点,比如: HTTPS协议是由SSL+HTTP协议构建的可进行加密传输.身份认证的网络协议,要比ht ...
在源文件（.c）和头文件（.h）中声明和定义的区别——C语言
最近在看多文件编程的时候遇到的一个问题,本来以为理解了声明和定义的区别(然而并没有····),也算是重新认识了一次声明和定义,下面上代码情形一:在源文件(.c)中相信大部分读者对声明和定义的理解是 ...

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