概念
ajax 的全称是 Asynchronous https://www.2cto.com/kf/ware/Java/ Script and XML, 其中, Asynchronous 是异步的意思, 它有别于传统 web 开发中采用的同步的方式.
理解同步异步
异步传输是面向字符的传输, 它的单位是字符; 而同步传输是面向比特的传输, 它的单位是桢, 它传输的时候要求接受方和发送方的时钟是保持一致的.
举个例子来说同步和异步, 同步就好像我们买楼一次性支付, 而异步就是买楼分期付款. 所以当我们把这种生活中的概念化解释转移到理解 Ajax 异步上来就发现, 它是通过这样一种异步的方式来让用户更加收益, 也就是说可以让用户的有更好的体验性. 其实这也是 Ajax 的意义所在.
通过分析 XmlHttpRequest 来理解 Ajax 的原理
Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求, 从服务器获得数据, 然后用 javascript 来操作 DOM 而更新页面. 这其中最关键的一步就是从服务器获得请求数据. 要清楚这个过程和原理, 我们必须对 XMLHttpRequest 有所了解.
XMLHttpRequest 是 ajax 的核心机制, 是一种支持异步请求的技术. 简单的说, 也就是 javascript 可以及时向服务器提出请求和处理响应, 而不阻塞用户. 达到无刷新的效果.
所以要想理解 Ajax 原理就要先理解 XMLHttpRequest 的工作原理.
首先, 我们先来看看 XMLHttpRequest 这个对象的属性.
![]( http://upload-images.jianshu.io/upload_images/2692140-56d16cdb2eb491ca.gif?imageMogr2/auto-orient/strip)
通过上面对 XMLHttpRequest 对象的理解, 我们通过一个示例来看它的工作原理:
这是一个验证 input 标签是不是为空的一个 Ajax 的示例:
- function validate(field) {
- if (trim(field.value).length != 0) {
- var xmlHttp = null;
- // 表示当前浏览器 https://www.2cto.com/os/liulanqi/ 不是 ie, 如 ns,firefox
- if(window.XMLHttpRequest) {
- xmlHttp = new XMLHttpRequest();
- } else if (window.ActiveXObject) {
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- var url = "user_validate. https://www.2cto.com/kf/web/jsp/ ?userId=" + trim(field.value) + "&time=" + new Date().getTime();
- // 设置请求方式为 GET, 设置请求的 URL, 设置为异步提交
- xmlHttp.open("GET", url, true);
- // 将方法地址复制给 onreadystatechange 属性
- // 类似于电话号码
- xmlHttp.onreadystatechange=function() {
- //Ajax 引擎状态为成功
- if (xmlHttp.readyState == 4) {
- //HTTP 协议状态为成功
- if (xmlHttp.status == 200) {
- if (trim(xmlHttp.responseText) != "") {
- //alert(xmlHttp.responseText);
- document.getElementById("spanUserId").innerhtml = "<font color='red'>" + xmlHttp.responseText + "</font>"
- }else {
- document.getElementById("spanUserId").innerHTML = "";
- }
- }else {
- alert("请求失败, 错误码 =" + xmlHttp.status);
- }
- };
- // 将设置信息发送到 Ajax 引擎
- xmlHttp.send(null);
- } else {
- document.getElementById("spanUserId").innerHTML = "";
- }
- }
- function validate(field) {
- if (trim(field.value).length != 0) {
- var xmlHttp = null;
- // 表示当前浏览器不是 ie, 如 ns,firefox
- if(window.XMLHttpRequest) {
- xmlHttp = new XMLHttpRequest();
- } else if (window.ActiveXObject) {
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
- // 设置请求方式为 GET, 设置请求的 URL, 设置为异步提交
- xmlHttp.open("GET", url, true);
- // 将方法地址复制给 onreadystatechange 属性
- // 类似于电话号码
- xmlHttp.onreadystatechange=function() {
- //Ajax 引擎状态为成功
- if (xmlHttp.readyState == 4) {
- //HTTP 协议状态为成功
- if (xmlHttp.status == 200) {
- if (trim(xmlHttp.responseText) != "") {
- //alert(xmlHttp.responseText);
- document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
- }else {
- document.getElementById("spanUserId").innerHTML = "";
- }
- }else {
- alert("请求失败, 错误码 =" + xmlHttp.status);
- }
- };
- // 将设置信息发送到 Ajax 引擎
- xmlHttp.send(null);
- } else {
- document.getElementById("spanUserId").innerHTML = "";
- }
- }
首先创建一个 XMLHttpRequest 对象, 之后 jav https://www.2cto.com/kf/web/asp/ cript 方法检查 XMLHttpRequest 的整体状态并且保证它已经完成 (readyStatus=4), 即数据已经发送完毕. 然后根据服务器的设定询问请求状态, 如果一切已经就绪 (status=200), 那么就执行下面需要的操作.
对于 XmlHttpRequest 的两个方法, open 和 send, 其中 open 方法指定了:
a, 向服务器提交数据的类型, 即 post 还是 get.
b, 请求的 url 地址和传递的参数.
c, 传输方式, false 为同步, true 为异步. 默认为 true. 如果是异步通信方式 (true), 客户机就不等待服务器的响应; 如果是同步方式 (false), 客户机就要等到服务器返回消息后才去执行其他操作.
之后调用 Send 方法用来发送请求.
通过这个示例我们看到 Ajax 基本上就是把 JavaScript https://www.2cto.com/kf/qianduan/JS/ 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间. 当用户向服务器请求时, 数据发送给一些 JavaScript 代码而不是直接发送给服务器. JavaScript 代码在幕后发送异步请求, 然后服务器将数据返回 JavaScript 代码, 后者决定如何处理这些数据, 它可以迅速更新表单数据. 这就是 Ajax 的原理所在.
用图来理解 Ajax 原理
![]( http://upload-images.jianshu.io/upload_images/2692140-389e23c611850ca0.gif?imageMogr2/auto-orient/strip|imageView2/2/w/1240 )
来源: http://www.jianshu.com/p/55487b82dc52