AJAX学习文档..docVIP

Ajax学习总结 Ajax概述 Ajax 应用程序所用到的基本技术 Ajax应用场景 Ajax实例详介 Ajax复杂例子 Ajax概述 Ajax关键词：Javascript, Xml, 异步AJAX，即Asynchronous Javascript And XML的缩写，可翻译为异步Javascript及技术。其核心是一个寄宿在浏览器中名为的类。通过此类，可以做到无需提交表单就可以实现与服务器的连接；无需刷新整个页面，就可以动态更新页面中一部分的内容。通常使用XML作为数据交换的载体，但也可使用其他的载体，如纯文本。简单来说，就是通过发送信息给服务器，异步接收服务器处理并返回信息，然后通过Javascript动态更新页面的部分内容。 应用AJAX的流程： 1、定义一个事件处理器 2、获取XmlHttpRequest，并将事件处理器注册给它 3、与服务器连接 4、发送信息 5、服务器返回处理完毕的信息 6、每当XmlHttpRequest的状态发生变化，自动触发事件处理器 7、事件处理器动态更新页面 Ajax 应用程序所用到的基本技术 (一).Html 用于建立 web 表单并确定应用程序其他部分使用的字段。 (二).Javascript 代码是运行 ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。 (三).dHtml 或 dynamic Html，用于动态更新表单。我们将使用div、span和其他动态 Html 元素来标记 Html。 (四).文档对象模型 dom 用于（通过 Javascript 代码）处理 Html 结构和（某些情况下）服务器返回的 Xml。 (这是最牛的一个地方！！！) Ajax应用场景 Ajax不是万能的，在适合的场合使用Ajax，才能充分发挥它的长处，改善系统性能和用户体验，绝不可以为了技术而滥用。Ajax的特点在于异步交互，动态更新web页面，因此它的适用范围是交互较多，频繁读取数据的web应用。现在来看几个Ajax的应用实例，读者可以了解如何使用Ajax技术改进现有的web应用系统。 场景1.数据验证 在填写表单内容时，需要保证数据的唯一性（例如新用户注册填写的用户名），因此必须对用户输入的内容进行数据验证。 数据验证通常有两种方式： 一种是直接填写，然后提交表单，这种方式需要将这个页面提交到服务器端进行验证，整个过程不仅时间长而且造成了服务器不必要的负担； 第二种方式是改进了的验证过程，用户可以通过点击相应的验证按钮，打开新窗口查看验证结果，但是这样需要新开一个浏览器窗口或者对话框，还需要专门编写验证的页面，比较耗费系统资源。 而使用Ajax技术，可以由XmlHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担。 场景2.按需取数据 分类树或者树形结构在web应用系统中使用得非常广泛，例如部门结构，文档得分类结构常常使用树形空间呈现。 以前每次对分类树得操作都会引起页面重载，为了避免这种情况出现，一般不采用每次调用后台得方式，而是一次性将分类结果中得数据一次性读取出来并写入数组，然后根据用户的操作，用Javascript来控制节点的呈现，这样虽然解决了操作响应速度，不重复载入页面以及避免向服务器频繁发送请求的问题，但是如果用户不对分类进行操作或者只对分类树中的一部分数据进行操作的话（这种情况很普遍的），那么读取的数据中就会有相当大的冗余，浪费了用户的资源。特别是在分类结构复杂，数据庞大的情况下，这种弊端就更加明显了。 现在应用Ajax改进分类树的实现机制。在初始化页面时，只获取第一级子分类的数据并且显示；当用户点开一级分类的第一节点时，页面会通过Ajax向服务器请求当前分类所属的二级子分类的所有数据；如果再请求已经呈现的二级分类的某一节点时，再次向服务器请求当前分类所属的三级子分类的所有数据，以此类推。页面会根据用户的操作向服务器请求它所需要的数据，这样就不会存在数据的冗余，减少了数据下载总量。同时，更新页面时不需要重载所有内容，只更新需要更新的那部分内容即可，相对于以前后台处理并且重载的方式，大大缩短了用户的等待时间。 场景3.自动更新页面 在web应用中有很多数据的变化时十分迅速的，例如最新的热点新闻，天气预报以及聊天室内容等。在Ajax出现之前，用户为了即使了解相应的内容必须不断刷新页面，查看是否有新的内容变化，或者页面本身实现定时刷新的功能（大多数聊天室页面就是这样做的）。 有可能会发生这种情况；有一段时间网页的内容没有发生任何变化，但是用户并不知道，仍然不断的刷新页面；或者用户失去了耐心，放弃了刷新页面，却很有