AJAX概述 管理科学与工程学科 耿方方
AJAX概述 管理科学与工程学科 耿方方
主要内容 什么是AJAX? 为什么要使用AJAX? AJAX的优势 AJAX的应用场景 AJAX的工作原理 AJAX的技术组成
主要内容 什么是AJAX? 为什么要使用AJAX? AJAX的优势 AJAX的应用场景 AJAX的工作原理 AJAX的技术组成
什么是AJAX AJAX是 JavaScript、ⅪM、CSS、D0M等多种已有技术的组合,可以 实现客户端的异步请求操作,这样可以实现在不需要刷新页面的情 况下与服务器进行通信,从而减少了用户的等待时间。 AJAX的全称为( Asynchronous JavaScript and XMI,异步 JavaScript和X),即异步 JavaScript和M技术。 AJAX是增强的 JavaScript,是一种可以调用后台服务器获得数据的客 户端 JavaScript技术,支持更新部分页面的内容而不重载整个页面
什么是AJAX AJAX是JavaScript、XML、CSS、DOM等多种已有技术的组合，可以 实现客户端的异步请求操作，这样可以实现在不需要刷新页面的情 况下与服务器进行通信，从而减少了用户的等待时间。 AJAX 的全称为 （ Asynchronous JavaScript and XML ， 异 步 JavaScript和XML），即异步JavaScript和XML技术。 AJAX是增强的JavaScript,是一种可以调用后台服务器获得数据的客 户端JavaScript技术,支持更新部分页面的内容而不重载整个页面
AJAX的开发模式 在传统的Web应用模式中,页面中用户的每一次操作都将触发一次返 回Web服务器的HTP请求,服务器进行相应的处理(获得数据,运行 与不同的系统会话)后,返回一个理M页面客户端。 向服务器发送HTTP请求 Web服务器 浏览器 处理数据 HTML+CSS 处理完成 数据
AJAX的开发模式 在传统的Web应用模式中，页面中用户的每一次操作都将触发一次返 回Web服务器的HTTP请求，服务器进行相应的处理（获得数据，运行 与不同的系统会话）后，返回一个HTML页面客户端
AJAX的开发模式 在AJA应用中,页面中用户的操作通过AJAX引擎与服务器端进行通 信,然后将返回结果提交给客户端页面的AAX引擎,再由AJAX引擎 来决定将这些数据插入到页面的指定位置。 “调向服务器发送HITP请求 浏览器 A Jax Web服务器 引擎 监视中 处理数据 二二 M或字 符串数据 处理完成
AJAX的开发模式 在AJAX应用中，页面中用户的操作通过AJAX引擎与服务器端进行通 信，然后将返回结果提交给客户端页面的AJAX引擎，再由AJAX引擎 来决定将这些数据插入到页面的指定位置
AJAX的优势 与传统的Web应用不同,AJAX在用户与服务器之间引入一个中间媒介 (AJAX引擎),消除网络交互过程中的处理-等待-处理一等待的缺点 从而大大改善网站的视觉效果。 ■基于标准化且被广泛支持的技术 AJAX不需要任何浏览器插件,就可以被绝大多数主流浏览器支持, 用户只需要允许 JavaScript在浏览器上执行即可。 减轻服务器和带宽负担 按需取数,可以最大程度的减少冗余请求和响应对服务造成的负担。 可以把一些服务器负担的工作转嫁到客户端,利用客户端闲置的能 力来处理,减轻服务器的负担,充分利用带宽资源,节约空间和宽带 租用成本
AJAX的优势 与传统的Web应用不同，AJAX在用户与服务器之间引入一个中间媒介 （AJAX引擎），消除网络交互过程中的处理-等待-处理-等待的缺点， 从而大大改善网站的视觉效果。 基于标准化且被广泛支持的技术 AJAX不需要任何浏览器插件，就可以被绝大多数主流浏览器支持， 用户只需要允许JavaScript在浏览器上执行即可。 减轻服务器和带宽负担 按需取数，可以最大程度的减少冗余请求和响应对服务造成的负担。 可以把一些服务器负担的工作转嫁到客户端，利用客户端闲置的能 力来处理，减轻服务器的负担，充分利用带宽资源，节约空间和宽带 租用成本
AJAX的优势 无需刷新页面,减少用户心理和实际的等待时间 特别是在读取大量数据时,不会像刷新页面那样出现白屏的情况, AJAX使用 XMLHt tpRequest对象发送请求并且得到服务器响应,在不重 新载入整个页面的情况下,用 JavaScript操作DOM更新页面。因此在读 取数据的过程中,用户所面对的不是白屏,是原来的页面内容,只有 在数据接收完毕之后才更新相应部分的内容。 可以调用Ⅺ等外部数据。进一步促进页面呈现和数据的分离。 AJAX没有平台限制。AJAX把服务器的角色由原本传输内容转变为传 输数据,而数据格式则可以是纯文本格式和Ⅺ格式,这两种格式没 有平台限制
AJAX的优势 无需刷新页面，减少用户心理和实际的等待时间。 特别是在读取大量数据时，不会像刷新页面那样出现白屏的情况， AJAX使用XMLHttpRequest对象发送请求并且得到服务器响应，在不重 新载入整个页面的情况下，用JavaScript操作DOM更新页面。因此在读 取数据的过程中，用户所面对的不是白屏，是原来的页面内容，只有 在数据接收完毕之后才更新相应部分的内容。 可以调用XML等外部数据。进一步促进页面呈现和数据的分离。 AJAX没有平台限制。AJAX把服务器的角色由原本传输内容转变为传 输数据，而数据格式则可以是纯文本格式和XML格式，这两种格式没 有平台限制
AJAX的应用场景 表单驱动的交互 传统的表单提交,在文本框输入内容后,点击按钮,后台处理完毕 后,页面刷新,再回头检查是否刷新结果正确。使用AJAX,在点击提 交按钮后,立刻进行异步处理,并在页面上快速显示了更新后的结果, 这样提交不会导致整个页面刷新。 深层次的树的导航 深层次的级联菜单(树)的遍历是一项非常复杂的任务,使用 JavaScript来控制显示逻辑,使用AJAX延迟加载更深层次的数据可以 有效的减轻服务器的负担
AJAX的应用场景 表单驱动的交互 传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕 后，页面刷新，再回头检查是否刷新结果正确。使用AJAX，在点击提 交按钮后，立刻进行异步处理，并在页面上快速显示了更新后的结果， 这样提交不会导致整个页面刷新。 深层次的树的导航 深层次的级联菜单（树）的遍历是一项非常复杂的任务，使用 JavaScript来控制显示逻辑，使用AJAX延迟加载更深层次的数据可以 有效的减轻服务器的负担
AJAX的应用场景 用户间的交流响应 在多人参与的交流讨论的场景下,最不愿发生的事情就是让用户 遍又一遍刷新页面以便知道是否有新的讨论出现。新的回复应该以最 快的速度显示出来,而把用户从分神不断的刷新中解脱出来,使用 Ajax是最好的选择。 类似投票等场景 对于投票等类似的场景中,如果提交过程需要达到40秒,很多的 用户就会直接忽略过去而不会参与,使用AJAX可以把时间控制在很短 的时间内,从而吸引更多的用户加入进来
AJAX的应用场景 用户间的交流响应 在多人参与的交流讨论的场景下，最不愿发生的事情就是让用户一 遍又一遍刷新页面以便知道是否有新的讨论出现。新的回复应该以最 快的速度显示出来，而把用户从分神不断的刷新中解脱出来，使用 Ajax是最好的选择。 类似投票等场景 对于投票等类似的场景中，如果提交过程需要达到40秒，很多的 用户就会直接忽略过去而不会参与，使用AJAX可以把时间控制在很短 的时间内，从而吸引更多的用户加入进来
AJAX的应用场景 文本输入场景 在文本框等输入表单中给予输入提示或者自动完成,可以有效的改 善用户体验,尤其是那些自动完成的数据可能来自于服务器端的场 合,使用AJA是很好的选择
AJAX的应用场景 文本输入场景 在文本框等输入表单中给予输入提示或者自动完成，可以有效的改 善用户体验，尤其是那些自动完成的数据可能来自于服务器端的场 合，使用AJAX是很好的选择