Ajax开发与传统web开发方式

阳光穿透心脏的1/2处 2022-08-06 14:14 161阅读 0赞

Ajax(英文缩写：Asynchronous   JavaScript  And  XML，即异步JavaScript和XML)，把用户和Web页面间的交互与Web浏览器和服务器间的通信分离开来。

# 对比    #

## 用户交互方式 ##

传统的Web应用：用户点击链接或按钮，向服务器端提出请求，用户需要等待服务器的响应，服务器端开始进行相应的处理，处理完成之后，把响应的结果通过一个新的HTML页面返回给用户。

传统Web应用，称为同步交互方式。用户每进行一个操作，都要等待服务器的响应过程。

Ajax应用方式：称为异步方式。用户向服务器端提交请求后，不需要等待服务器的响应，可以继续自己的用户体验。当服务端进行了相应处理之后，返回给浏览器，会有XMLHTTPRequest接收返回的数据结果，并将响应的结果呈现给用户。

![Center][]

## 服务器和客户端的工作量 ##

传统Web程序，服务器端承担大量的工作，客户端只有数据显示的功能。

Ajax应用程序，客户端界面和Ajax引擎都是在客户端运行，这样可以将一些服务器工作在Ajax引擎处实现。

![Center 1][]

##  ##

## 用户体验 ##

## 页面端 ##

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp; </td> 
 <td colspan="2"> 页面端 </td> 
 </tr> 
 <tr> 
 <td> 表面现象 </td> 
 <td> 本质 </td> 
 </tr> 
 <tr> 
 <td> 传统Web方式 </td> 
 <td> 1．&nbsp; 页面代码简单 2．&nbsp; Submit按钮提交数据，表单管理数据 3．&nbsp; Input中定义name属性 </td> 
 <td> 浏览器做了很多数据组织和提交工作 </td> 
 </tr> 
 <tr> 
 <td> Ajax方式 </td> 
 <td> 1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 页面代码量大 2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 通过button的一个onclick事件转向js的方法，然后通过编写js代码来获取数据，发送数据，接收数据 3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Input中定义id属性 4.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 页面中预留了div标签，自己编写js代码将div中的内容更新 </td> 
 <td> 需要自己编写代码进行数据的组织，提交，接收，并进行页面的更新。 </td> 
 </tr> 
 </tbody> 
</table>

## 服务器端 ##

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp; </td> 
 <td colspan="2"> 服务器端的servlet </td> 
 </tr> 
 <tr> 
 <td> 表面现象 </td> 
 <td> 本质 </td> 
 </tr> 
 <tr> 
 <td> 传统方式 </td> 
 <td> 接收请求数据 进行校验操作 输出结果 输出校验页面地址 </td> 
 <td> 返回页面 </td> 
 </tr> 
 <tr> 
 <td> Ajax方式 </td> 
 <td> 接收请求数据 进行校验操作 输出结果 </td> 
 <td> 返回数据 </td> 
 </tr> 
 </tbody> 
</table>

# Ajax缺点： #

1.ajax通信常常是一个数据片段,例如,xml.html片段,或者纯文本,这些信息不是完整的html文档,而且通过后台来异步获取,不能被搜索引擎发现并缓存.

2.ajax将大量的运算从服务器端转移到了客户端,意味着浏览器将承受更大的负担,不再是简单的文档显示。

[Center]: /images/20220806/538bf8d9e66744ce9a90903e25a2425c.png
[Center 1]: /images/20220806/83c2a60365cf4e67a08c1af0b9b6cf28.png