Ajax 异步加载

Posted 2021-04-15 三七驿馆

Ajax 常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。目的在于减少网络数据的传输量、增强用户体验，今天，我们闹(lao)一闹(lao)：

整理 | sk 

文章总结于知乎、博客园等，详见文末

一、Ajax 的简介

Ajax 即 “Asynchronous javascript And XML” （异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，从而使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

Ajax实际上是下面这几种技术的融合：

• Xhtml 和 CSS的基于标准的表示技术

• DOM 进行动态显示和交互

• XML 和 XSLT 进行数据交换和处理

• XMLHttpRequest 进行异步数据检索

• Javascript 将以上技术融合在一起

那么 ，我们为什么需要用到 Ajax 呢。这就要从传统的网页说起了：在未使用 Ajax 之前，如果网页需要更新内容或进行验证操作时，必须重新加载整个网页。举个简单的例子，如果我们在京东上浏览商品，并将喜欢的加入了购物车，那么，这就会重新加载你当前的页面，客户端将你加入购物车的商品传给服务器之后，再重新读取你当前购物车的所有数据进行展示，此外还会对整个的浏览页面进行重新加载。

这种方式的缺点在于：首先，性能上来讲做了很多不必要的重载，其次，会中断用户的操作页面。那么 Ajax 的优势就在于局部刷新，想象一下，这相当于客户端知道你加入了购物车之后，利用 Ajax 技术实现你购物车那一局部进行与服务器的交流，同时，客户端继续执行当前的操作，有没有很神奇？

二、Ajax 的原理

切入主题之前，我们先简单介绍一下 XML ，即可扩展标记语言（EXtensible Markup Language），其作用为数据存储和数据传输，能够实现不同应用程序之间的数据通信、不同平台间的数据通信、不同平台间的数据共享。也就是说，我们可以使用 XML 将不同的程序、不同的平台之间联系起来。

同样是传数据，那XML 与 JSON 的区别在哪呢？先说一个简单的例子，同时用 XML 和JSON 传递数据：“我爱三七驿馆”，XML 会以节点的方式传入：

<data>
    <people value="我" />
    <do value="爱" />
    <thing value="三七驿馆" />
</data>

或者

<person people="我" do="爱" thing="三七驿馆" />

如果用json格式来表示的话，就是下面这样

{
    "people":"我",
    "do":"爱",
    "thing":"三七驿馆"
}

可以看出来， XML  是通过添加 标签 的方式存储数据，其优点在于没有预定义的标签，使用的时候可以根据自己的需要进行添加，此外XML 的树形结构使其更结构化，有利于调试。而  JSON  的优点在于 简洁 ，使用 "键值对" 来表示 数据 ，使用 "{}" 标记 对象 ，使用 "[]" 标记 数组 ， "," 来表示 数据的分隔 ， ":" 表示 名称和值的分隔 。 传统模式下，客户端向服务器端发出获取数据的请求后，服务器 为了清晰的表达数据结构，都是返回 XML 格式的内容，而现在我们获取的数据一般都是 JSON 格式的内容，JSON 相对于 XML 来说，更能清晰地表达数据结构，而且访问里面数据的时候操作起来比XML更简便（但是现在某些项目中，服务器返回给客户端的不仅仅是数据，而是数据和需要展示的结构拼接好的结果(类似于我们自己做的字符串拼接)，换句话说，是服务器端把数据和结构拼接好返回给我们，此时返回的数据格式一般都是 XML 格式的字符串）。

再讲一下  XHR ，即  XMLHttpRequest  对象，其作用是使得浏览器可以 发出 HTTP 请求 与 接收 HTTP 响应 ，显然这个对象是浏览器提供的。

言归正传， Ajax 的原理是什么呢，又是怎么使用的呢，预知后事如何，且听下回分解。咳咳，开个玩笑，继续唠，再举个例子，我们在网站注册账号的时候，先填一些基本资料，比如昵称、密码、头像等，那么为了保证所用的昵称是唯一的，当输入昵称的那个文本框失去焦点时，需要做一个验证：在已经注册的用户资料库中，是否存在该昵称，如果存在，则可以继续注册，那么这时候 Ajax 就被派到前线了：

首选，浏览器告诉 XHR ：你去服务器那里把所有已注册的用户信息拿过来

然后，浏览器继续做自己的事，XHR 吭哧吭哧的去问服务器要数据、

接着，服务器把查询到的数据返回给 XHR

继续，XHR 告诉浏览器：你要的数据我拿回来了，你可以用了

最后，浏览器拿着 XHR 返回的数据渲染页面

我们分析一下这个过程，浏览器再也不会通过加载当前整个网页去渲染页面了，在 XHR 去取数据的时候，浏览器可以继续做自己的事，提高性能和用户体验（因为重新加载网页就意味着用户上传的头像等信息的丢失！）同时减少了网络数据的传输量。

三、Ajax 的使用

创建Ajax核心对象：XHR

↓

向服务器发出请求

↓

等待服务器响应并渲染页面

①创建 Ajax 核心对象  XMLHttpRequest （记得考虑兼容性）

1. var xhr=null;
2. if (window.XMLHttpRequest)
3. {// 兼容 IE7+, Firefox, Chrome, Opera, Safari
4. xhr=new XMLHttpRequest();
5.   } else{// 兼容 IE6, IE5
6.     xhr=new ActiveXObject("Microsoft.XMLHTTP");
7.   }

②向服务器发出请求

1. xhr.open(method,url,async);
2. send(string);//post请求时才使用字符串参数，否则不用带参数。

其中：

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

注意：post请求一定要设置请求头的格式内容

1. xhr.open("POST","test.html",true);
2. xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3. xhr.send("fname=Henry&lname=Ford");  //post请求参数放在send里面，即请求体

③等待服务器响应并渲染页面（区分同步跟异步两种情况）

①同步处理

1. xhr.open("GET","info.txt",false);
2. xhr.send();
3. document.getElementById("myDiv").innerHTML=xhr.responseText; //获取数据直接显示在页面上

②异步处理：相对来说比较复杂，要在请求状态改变事件中处理。

1. xhr.onreadystatechange=function()  {
2.    if (xhr.readyState==4 &&xhr.status==200)  {
3.       document.getElementById("myDiv").innerHTML=xhr.responseText;
4.      }
5.    }

其中：

a. responseText 获得字符串形式的响应数据，responseXML 获得XML 形式的响应数据。

b. readyState：表明客户端与客户的交互状态过程

0-（未初始化）还没有调用send()方法
1-（载入）已调用send()方法，正在发送请求

2-（载入完成）send()方法执行完成，已经接收到全部响应内容处理

3-（交互）正在解析响应内容
4-（完成）响应内容解析完成，可以在客户端调用了

c. status：体现的是服务器对请求的反馈数据是否正常

1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败

③GET和POST请求数据区别

请求数据时的区别，GET请求的参数直接拼接在url上面,而POST请求的参数就不是放在url了，而是放在send里面，即请求体。

-素材来源-

 知乎 |  慕课 | 

https://zhuanlan.zhihu.com/p/38067984

博客园 |  静水流深a | 

https://www.cnblogs.com/wangshouren/p/11647328.html

-作者-

sk，奋斗中的少年，志当存高远，天涯若比邻。爱好交友，一直在为成为最好的自己奋斗者。座右铭：生命不息，奋斗不止。

------精彩内容推荐------

我们相约在这里，做最好的自己

▼