Ajax开发与传统web开发方式

前端之家收集整理的这篇文章主要介绍了Ajax开发与传统web开发方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

对比@H_301_4@
@H_301_4@@H_301_4@@H_301_4@

用户交互方式@H_301_4@@H_301_4@@H_301_4@

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

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

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

@H_301_4@@H_301_4@

服务器和客户端的工作量@H_301_4@@H_301_4@

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

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

@H_301_4@@H_301_4@@H_301_4@

用户体验@H_301_4@@H_301_4@@H_301_4@

@H_301_4@@H_301_4@@H_301_4@

用户体验@H_301_4@@H_301_4@@H_301_4@

表面现象@H_301_4@@H_301_4@@H_301_4@

本质@H_301_4@@H_301_4@@H_301_4@

传统方式@H_301_4@@H_301_4@@H_301_4@

A@H_301_4@页面@H_301_4@->B@H_301_4@页面@H_301_4@->A@H_301_4@页面@H_301_4@@H_301_4@@H_301_4@

用户需要在不同页面中进行操作@H_301_4@@H_301_4@@H_301_4@

Ajax@H_301_4@方式@H_301_4@@H_301_4@@H_301_4@

始终在@H_301_4@A@H_301_4@页面@H_301_4@@H_301_4@@H_301_4@

用户只在一个页面中进行操作@H_301_4@@H_301_4@@H_301_4@

页面端@H_301_4@@H_301_4@@H_301_4@

页面端@H_301_4@@H_301_4@@H_301_4@

表面现象@H_301_4@@H_301_4@@H_301_4@

传统@H_301_4@Web@H_301_4@方式@H_301_4@@H_301_4@@H_301_4@

1. 页面代码简单@H_301_4@@H_301_4@@H_301_4@

2. Submit@H_301_4@按钮提交数据,表单管理数据@H_301_4@@H_301_4@@H_301_4@

3. Input@H_301_4@中定义@H_301_4@name@H_301_4@属性@H_301_4@@H_301_4@@H_301_4@

浏览器做了很多数据组织和提交工作@H_301_4@@H_301_4@@H_301_4@

1. 页面代码量大@H_301_4@@H_301_4@@H_301_4@

2. 通过@H_301_4@button@H_301_4@的一个@H_301_4@onclick@H_301_4@事件转向@H_301_4@js@H_301_4@方法,然后通过编写@H_301_4@js@H_301_4@代码获取数据,发送数据,接收数据@H_301_4@@H_301_4@@H_301_4@

3. Input@H_301_4@中定义@H_301_4@id@H_301_4@属性@H_301_4@@H_301_4@@H_301_4@

4. 页面中预留了@H_301_4@div@H_301_4@标签,自己编写@H_301_4@js@H_301_4@代码将@H_301_4@div@H_301_4@中的内容更新@H_301_4@@H_301_4@@H_301_4@

需要自己编写代码进行数据的组织,提交,接收,并进行页面的更新。@H_301_4@@H_301_4@@H_301_4@

服务器端@H_301_4@@H_301_4@@H_301_4@

服务器端的@H_301_4@servlet@H_301_4@@H_301_4@@H_301_4@

接收请求数据@H_301_4@@H_301_4@@H_301_4@

进行校验操作@H_301_4@@H_301_4@@H_301_4@

输出结果@H_301_4@@H_301_4@@H_301_4@

输出校验页面地址@H_301_4@@H_301_4@@H_301_4@

返回页面@H_301_4@@H_301_4@@H_301_4@

输出结果@H_301_4@@H_301_4@@H_301_4@

返回数据@H_301_4@@H_301_4@@H_301_4@

Ajax@H_301_4@缺点:@H_301_4@@H_301_4@@H_301_4@@H_301_4@

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

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

猜你在找的Ajax相关文章