温立辉

摘 要：针对AJAX在Web编码开发中的应用问题，讨论了AJAX异步交互技术的组件构成以及实现原理，阐述异步技术的适用场景；同时结合实际应用讨论了AJAX的语法规则，最后分析了AJAX技术在B/S开发中重要作用。

关键词：AJAX；异步交互；局部刷新；回调

DOI：10.16640/j.cnki.37-1222/t.2017.04.188

1 前言

AJAX是一种前端的动态交互技术，广泛应用于基于B/S结构的Web应用开发中，其局部刷新的技术既提升用户的体验，同时也进一步减轻客户端与服务器的数据交互量，为应用系统性能的提升创建了良好条件。

2 认识同步异步

在Web应用中，前后端的交互有两种方式实现：同步及异步。同步是指完成一件任务过程中分若干步骤，每个步骤的先后顺序严格区分，不能同时并发执行；异步则是指完成一件任务过程虽然分若干步骤，但每个步骤间没有严格的先后顺序，多个步骤可以在同一时间并发执行。如图1所示的喝茶流程，使用同步方式实现从洗茶壶到泡茶，每个环节先后顺序明确，整个流程需要30分钟；如果使用异步的方式实现，在烧开水期间同时进行洗茶具、准备茶叶工作，则整个流程只需20分钟即。从以上的流程中可以看到使用异步的实现方式明显优于同步的方式，因而在一般的交互应用中使用异步方式居多，AJAX就是使用异步的交互技术进行前后端通信。

3 AJAX原理分析

AJAX又叫异步的JavaScript与XML，是一种融合了前端脚本、动态HTML、可扩展标记语言与DOM模型的衍生技术。其关键核心组件是AJAX引擎，引擎中包含XMLHttpRequest对象与Callback回调函数。在整个交互过程中XMLHttpRequest对象又是核心要点，一般在客户端浏览器本身可以创建该对象，如果客户端浏览器不支持此对象，则须通过DOM方式去创建。

AJAX的交互流程共有5步，如圖2所示。

（1）GUI用户接口通过JavaScript脚本向AJAX引擎发送数据交互请求，引擎接收到请求后会创建XMLHttpRequest对象。（2）XMLHttpRequest对象通过超文本传输协议向Web或XML类型服务器发送业务请求，要求交互数据。（3）服务器端接收到请求后，进行相关业务逻辑处理，一般情况下还会与数据存储源做相应的数据检索交互。（4）Web或XML服务器处理完业务逻辑后，即刻向AJAX引擎返回数据，并触发引擎中的Callback回调函数；返回的数据有两种格式类型，可以是普通文本类型，也可以是XML类型。（5）Callback回调函数最终向GUI用户接口返回HTML格式的数据包信息，包括CSS样式，向用户进行展示，实现局部刷新的效果。

与传统的Web交互模式相比，AJAX交互模式中间多了交互引擎。传统的交互方式是GUI直接向Web服务器发送数据交互请求，之后GUI一直处于等待状态，一直到服务器端有数据响应后才能进行其它的操作，对用户来说体验相对较差；而AJAX交互则是从GUI向引擎发送请求，再由AJAX引擎向Web服务端发数据交互请求，如果Web服务的数据处理时间较长，步骤1完成后可不必等待步骤5响应即可进行其它的操作，因而能够更好的改善用户体验。

4 AJAX实现过程

根据上面的原理分析可知，AJAX技术不是一门新技术，而是几种前端技术的机组合，要实现一个完整的AJAX应用，大概有如下几个要点。首先，创建XMLHttpRequest对象，这是关键核心所在，一般在浏览器中可创建该对象，特殊情况下需使用DOM方式实现。其次，定义回调函数，当Web服务器端有数据响应时会自动触发该函数，在该函数需判断数据的响应状态以及HTTP协议状态。最后，设置好相关参数、请求URL，使用Open的方法与服务器建立连接，并向服务发送数据，并指定回调函数。

实现以上三个要点，一个AJAX应用即可展现在你的面前，作为开发人员即可感受到征服AJAX技术的成就感。

5 结束语

AJAX不是一种新的编程语言，是一种用于创建快速动态网页，独立于Web服务的浏览器技术。因其能极好的改善用户体验，在1998年提出后立刻吸引了广大开发人员的关注，并得到了广泛的应用。AJAX虽然优势非常明显，但也有不够的地方，如兼容性、稳定性相对较弱，当用户修改浏览器安全等级，关闭JavaScript脚本功能后，代码将无法工作，AJAX功能将丧失。如何进一步提升AJAX的兼容性是未来研究的重点。

参考文献：

[1]王建国.Ajax技术在网站开发中的应用研究[J].湖南城市学院学报：自然科学版，2016（01）：155-156.

[2]李志伟.基于AJAX的网页信息交互技术要点及优势[J].产业与科技论坛，2016（09）：86-86.

[3]靖伟.Ajax技术的研究与应用[J].中国传媒大学学报：自然科学版，2015，22（06）：50-55.

[4]王玉娟，徐绕山.Ajax技术缺陷及其优化[J].科技传播，2010（06）：84-84，86.

[5]周柱，郎朗.Ajax技术在B/S架构中的数据传输应用研究[J].新余学院学报，2016，21（03）：109-113.