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”).