一, 同步请求与异步请求
同步请求: 在用户进行请求发送之后, 浏览器会一直等待服务器的数据返回, 如果网络延迟比较高, 浏览器就一直卡在当前界面, 直到服务器返回数据才可进行其他操作.
异步请求: 在用户进行请求发送之后, 浏览器可以自由操作页面中其他的元素, 当服务器放回数据的时候, 才触发相应事件, 对返回的数据进行操作.
如果将 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