首先我们来看一看Ajax的定义:
Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
个人理解:
触发某个事件->向服务端发起请求->返回响应(数据)->局部更新
在一般的通讯方式当中,我们是通过在浏览器地址栏输入相关链接,完成客户端与服务器的通讯。
输入网址->请求一个网页->返回相关资源文件->浏览器解析资源文件,完成页面渲染。
假设,目前我们在浏览器上看到的页面,某些按钮(事件),是绑定了Ajax请求的。
Ajax的核心:
XMLHttpRequest 对象
初始化XMLHttpRequest对象-->创建对象实例(通过该对象发送请求)
open()方法指定载入资源
send()方法发送请求
服务器返回响应(使用onreadystatechange事件监听服务器)
用容器元素载入响应内容(使用dom元素载入服务器放回的内容)
那为什么XMLHttpRequest对象可以建立与服务端的通讯呢?这里需要理解两个东西
1.浏览器到底是什么?
2.网络是如何通讯的?
- 浏览器的基础结构:
- 渲染引擎(能够将对应的资源(html/js)转换成图像结果。如Triend(IE)、Gecko(FF)、WebKit(Safari,Chrome,Andriod浏览器)等):
- 渲染流程及各阶段的模块依赖:
注:上述图片摘自《webkit技术内幕》
接下来我们看看网络OSI模型:
- 浏览器是一个应用程序,在OSI模型当中,属于的是应用层上的东西。
- 浏览器之所以可以和服务端产生通信,是因为网络各层之间具有可以相互通讯的接口;在应用层,可以利用Socket库与协议栈建立通讯,从而将数据按照协议逐层向下传递,最后转换成电信号输送到服务端。
注:图片摘自《网络是怎样连接的》
3.浏览器本质上是一个渲染引擎(处理html+css+样式计算+布局+绘制...)+js解析器+...
基于上述三个概念,我们回到XMLHttpRequest 上来。
当浏览器拿到服务端的资源过后(html、css、js...)过后,浏览器对资源进行解析(DOM构造+布局+绘制页面)。当某个绑定了Ajax的事件被触发时,初始化XMLHttpRequest ,这个时候对应的对象,拥有开启与Socket库建立连接的方式(“send”方法),从而与协议栈产生通讯,以达到网络数据传输的目的。
综上,我们回到Ajax定义上来:
Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
无需重新加载整个网页原因:
某个指定事件被触发时,产生一个Ajax请求。利用XMLHttpRequest中的send方法与协议栈建立连接,将数据按照指定协议进行数据格式封装,发起向服务端的网络通讯。通过onreadystatechange 方法监听服务端响应状态,利用responseText 方法获取响应数据。此时仅仅针对Ajax指定的服务端路由进行数据请求,不会对网页上的其他数据路由进行访问。
更新部分网页原因:
JS利用HTML当前的DOM构造,利用服务端返回的数据,对指定的DOM节点进行数据更新。