Ajax定义浅要剖析

首先我们来看一看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模型：

1. 浏览器是一个应用程序，在OSI模型当中，属于的是应用层上的东西。
2. 浏览器之所以可以和服务端产生通信，是因为网络各层之间具有可以相互通讯的接口；在应用层，可以利用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节点进行数据更新。