AJAX-前后端交互的艺术

AJAX-前后端交互的艺术

为什么要用AJAX？

当我们通过提交表单向服务器提交内容，或者进行一些其他操作，均涉及到了与浏览器之间的交互，传统的方式与AJAX方式的处理方法是不同的

• 传统方式：用户触发一个HTTP请求到 Web服务器，服务器接收并处理传来的数据，然后回送一个新的页面

  分析1：这种方式浪费了很多资源和带宽，很多情况下，返回的页面大部分HTML代码是一致的
  分析2：客户在服务器处理请求期间，只能等待，不能进行操作
  

• AJAX方式：AJAX可以只向服务器发送请求，并且取回必要的数据，客户端采用 JavaScript 的方式处理来自服务器的回应

   分析1：大大的减少了数据量，服务器回应速度更快，部分处理转移到了客户端，减轻了服务器的负荷
   分析2：可以实现客户端和服务器的异步通讯方式（后面说）
  

举个例子:

• 如果我们通过 “传统方式” 对这个页面中的内容分页，这样的话，每次分页都会刷新整个页面，导致已经成功显示的头部信息，以及左侧固定信息，重新从服务器中获取，造成了带宽和服务器资源的孙欢，同时用户也增加了等待时间，

• 如果我们通过 “AJAX方式” 实现内容分页，AJAX只需要从服务器中获取到 需要的这些信息也就是图中的红色区域内的数据，这样就不需要刷新整个页面，只需要局部刷新就可以了，既能节省资源，又提升了用户的体验感

什么是 AJAX

AJAX(Asynchronous JavaScript and XML) 异步的 JavaScript 和 XML，是指一种创建交互式网页应用的网页开发技术

(一) 什么是异步呢？

1.异步的基本概念
异步和同步往往是同时被提到的两个概念，这两者都是基于客户端和服务器端相互通信的基础上

同步：客户端必须的等待服务器端给予的响应，在此期间不能进行其他操作
异步：与同步不同，客户端不需要等待服务器响应，在此期间可以进行任何操作

简单概述流程：

同步：发送请求 → 等待服务器处理 → 返回

异步：事件触发 → 服务器处理 （不等待）→ 处理结束

(2) 异步的好处
AJAX 就是一种可以在无需重新加载整个网页的情况下 就可以实现与客户端与服务器的异步通讯
往简单了说就是：不用刷新整个网页，就能修改网页局部内容
正如我们开头所说到的，在开发中，如果每一次局部的小修改都进行页面刷新，这显然对性能会有所降低，而且用户正在执行的操作也会中断

(二) 数据传输格式

Aajx 的英文全称为 Asynchronous JavaScript and XML ，虽然包含了XML，但是数据格式还可以有 JSON等

关于其数据传输格式有这样一种说明：

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
XML一般作为从服务端接受数据的格式，当然也可以用包括 plain text 等 其他格式

AJAX中常使用的两种数据传输格式为：XML/JSON ,不过现在更多的是使用 JSON 格式，它作为一种轻量级的数据交换格式，更小，更快，也更加容易解析
如果对于XML/JSON 还不够熟悉的话，可以先去了解一些基本的概念以及用法(不过对于本篇基本无影响)

AJAX的优缺点及应用场景

(一) 优缺点
优点：

局部刷新，优化了用户体验
异步通信，不需要打断用户操作，具有良好的响应能力
将一些工作从服务器转移到客户端中，节省了服务器和带宽资源
按需取数据 ，减轻了服务器负担，也大大减少了冗余请求

缺点：

AJAX 主要依赖于JavaScript ，浏览器对 JavaScript 的兼容性将直接影响 AJAX的使用
浏览器的后退机制被破坏，这也正是局部刷新所带来的问题，不过现在有一些方式可以尽可能弥补这些问题
移动端对 AJAX 的支持没有那么好

(二) 应用场景
① 搜索框联想列表

② 局部刷新分页效果

③ 同页面加载更多数据

④ 表单数据校验

XMLHttpRequest - 核心对象

(一) XMLHttpRequest 基本原理

Ajax中最大的特点 就是请求会被异步对象XMLHttpRequest进行封装，然后再发送到服务器，接着服务器以流的形式将数据返回给浏览器
也正是因为服务器返回的数据是通过流的形式发送的**，XMLHttpRequest对象会不停的监听服务器**，且得到服务器数据，所以浏览器不需要刷新就可以获取服务器端的数据

(二) XMLHttpRequest 方法和属性

注：下面会讲解具体的用法，在此处仅作为方法和属性的基本归纳和梳理，不做过于具体的说明，可先简单浏览，待到看完文章再回来阅读

方法：

open( )
准备初始化一个AJAX请求

open( method, URL )

open( method, URL, async )

open( method, URL, async, userName )

open( method, URL, async, userName, password )

send( content )
发送请求

setRequestHeader( label, value )
设置请求头信息

getAllResponseHeaders()
以字符串的形式返回完整的HTTP头信息集

getResponseHeader( headerName )
返回指定的响应头部信息

abort()
取消当前的请求

属性：

onreadystatechange
监听事件，当 readyState 属性发生变化时触发

readyState
定义了 XMLHttpRequest 对象的当前状态 （0 1 2 3 4）

responseText
以字符串的形式返回响应

responseXML
返回XML格式的响应，此属性返回一个XML文档对象

status
返回 HTTP 状态 (e.g., 404 for “Not Found” and 200 for “OK”).

statusText
返回 HTTP 状态的说明 (e.g., “Not Found” or “OK”).