[原创]Ajax适用场景
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; mso-outline-level: 1;"><span style="COLOR: red; FONT-FAMILY: 宋体; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman';"></span><span lang="EN-US" style="COLOR: red;"><p></p></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span lang="EN-US"><font face="Times New Roman"> <p></p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span lang="EN-US"><font face="Times New Roman">Ajax</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">已经成为大型网站所必有的技术。</span><span lang="EN-US"><font face="Times New Roman">Ajax</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">在网站的各个场景中，都可以看到。例如，</span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">校友录的登录借口；</span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span lang="EN-US"><font face="Times New Roman">Google</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">输入关键字的文本框；</span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">各大论坛上自动验证用户输入的数据的文本框。</span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span lang="EN-US"><font face="Times New Roman"> <p></p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">总起来，可以大致归纳为以下几类：</span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span lang="EN-US"><font face="Times New Roman"> <p></p></font></span></p><p class="4" style="MARGIN: 3pt 0cm;"><strong><span lang="EN-US"><font face="Times New Roman">1</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">．表单驱动的交互</span></strong></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span lang="EN-US"><font face="Times New Roman"> <p></p></font></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕后，页面刷新，再回头检查是否刷新结果正确。使用</span><span lang="EN-US"><font face="Times New Roman">Ajax</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">，在点击</span><span lang="EN-US"><font face="Times New Roman">sunmit</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">按钮后，立刻进行异步处理，并在页面上快速显示了更新后的结果，这里没有整个页面刷新的问题。<span style="COLOR: blue;">例如校友录登录就是使用使用这种方式</span>。</span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span lang="EN-US"><font face="Times New Roman"> <p></p></font></span></p><p class="4" style="MARGIN: 3pt 0cm;"><strong><span lang="EN-US"><font face="Times New Roman">2</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">．深层次的树的导航</span></strong></p><p class="4" style="MARGIN: 3pt 0cm;"><span lang="EN-US"><strong><font face="Times New Roman"> <p></p></font></strong></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">深层次的级联菜单（树）的遍历是一项非常复杂的任务，使用</span><span lang="EN-US"><font face="Times New Roman">JavaScript</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">来控制显示逻辑，使用</span><span lang="EN-US"><font face="Times New Roman">Ajax</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">延迟加载更深层次的数据可以有效的减轻服务器的负担。以前的对级联菜单的处理多数是这样的：为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用</span><span lang="EN-US"><font face="Times New Roman">JavaScript</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">来控制它的子集项目的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题，但是如果用户不对菜单进行</span><font face="Times New Roman"></font><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">操作或只对菜单中的一部分进行操作的话，那读取的数据中的一部分就会成为冗余数据而浪费用户的资源，特别是在菜单结构复杂、数据量大的情况下（比如菜单有</span><font face="Times New Roman">
</font><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">很多级、每一级菜又有上百个项目），这种弊端就更为突出。</span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">如果在此案中应用</span><span lang="EN-US"><font face="Times New Roman">Ajax</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">后，结果就会有所改观：在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操作一级菜单其中一项时，会通过</span><span lang="EN-US"><font face="Times New Roman">Ajax</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">向后台请求当前一级项目所属的二级子菜单的所有数据，如果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，以此类推……这样，用什么就取什么、用多少就取</span><font face="Times New Roman">
</font><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了用户等待时间，也把对资源的浪费降到最低。例如</span><span lang="EN-US"><font face="Times New Roman">Google</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">的首页，收入不同的关键词，就会自动提示响应的关键字。</span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span lang="EN-US"><font face="Times New Roman"> <p></p></font></span></p><p class="4" style="MARGIN: 3pt 0cm;"><strong><span lang="EN-US"><font face="Times New Roman">3</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">．快速的用户与用户间的交流响应</span></strong></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">在众多人参与的交流讨论的场景下，最不爽的事情就是让用户一遍又一遍刷新页面以便知道是否有新的讨论出现。新的回复应该以最快的速度显示出来，而把用户从分神的刷新中解脱出来，</span><span lang="EN-US"><font face="Times New Roman">Ajax</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">是最好的选择。</span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span lang="EN-US"><font face="Times New Roman"> <p></p></font></span></p><p class="4" style="MARGIN: 3pt 0cm;"><strong><span lang="EN-US"><font face="Times New Roman">4</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">．类似投票、</span><span lang="EN-US"><font face="Times New Roman">yes/no</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">等无关痛痒的场景</span></strong></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">对于类似这样的场景中，如果提交过程需要达到</span><span lang="EN-US"><font face="Times New Roman">40</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">秒，很多的用户就会直接忽略过去而不会参与，但是</span><span lang="EN-US"><font face="Times New Roman">Ajax</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">可以把时间控制在</span><span lang="EN-US"><font face="Times New Roman">1</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">秒之内，从而更多的用户会加入进来。</span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span lang="EN-US"><font face="Times New Roman"> <p></p></font></span></p><p class="4" style="MARGIN: 3pt 0cm;"><strong><span lang="EN-US"><font face="Times New Roman">5</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">．对数据进行过滤和操纵相关数据的场景</span></strong></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">对数据使用过滤器，按照时间排序，或者按照时间和名称排序，开关过滤器等等。任何要求具备很高交互性数据操纵的场合都应该用</span><span lang="EN-US"><font face="Times New Roman">JavaScript</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">，而不是用一系列的服务器请求来完成。在每次数据更新后，再对其进行查找和处理需要耗费较多的时间，而</span><span lang="EN-US"><font face="Times New Roman">Ajax</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">可以加速这个过程。<span style="COLOR: blue;">例如，新浪的邮箱就是采用了这些技术。</span></span><span lang="EN-US" style="COLOR: blue;"><p></p></span></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt;"><span lang="EN-US"><font face="Times New Roman"> <p></p></font></span></p><p class="4" style="MARGIN: 3pt 0cm;"><strong><span lang="EN-US"><font face="Times New Roman">6</font></span><span style="FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman";">．普通的文本输入提示和自动完成的场景</span></strong></p><span style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA;">在文本框等输入表单中给予输入提示，或者自动完成，可以有效的改善用户体验，尤其是那些自动完成的数据可能来自于服务器端的场合，</span><span lang="EN-US" style="FONT-SIZE: 10.5pt; FONT-FAMILY: "Times New Roman"; mso-fareast-font-family: 宋体; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA;">Ajax</span><span style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA;">是很好的选择。这一点，</span><span lang="EN-US" style="FONT-SIZE: 10.5pt; FONT-FAMILY: "Times New Roman"; mso-fareast-font-family: 宋体; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA;">Google</span><span style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA;">做的最好。大家到</span><span lang="EN-US" style="FONT-SIZE: 10.5pt; FONT-FAMILY: "Times New Roman"; mso-fareast-font-family: 宋体; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA;">Google</span><span style="FONT-SIZE: 10.5pt; FONT-FAMILY: 宋体; mso-ascii-font-family: "Times New Roman"; mso-hansi-font-family: "Times New Roman"; mso-bidi-font-family: "Times New Roman"; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA;">的首页输入关键字，就会发现其优点。</span>
页:
[1]