AJAX 简介及入门实例(2)


// Get the value of the "phone" field and stuff it in a variable called phone
var phone = document.getElementById("phone").value;
// Set some values on a form using an array called response
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];


这里没有特别需要注意的地方,真是好极了!您应该认识到这里并没有非常复杂的东西。只要掌握了 XMLHttpRequest,Ajax 应用程序的其他部分就是如 清单 2 所示的简单 JavaScript 代码了,混合有少量的 HTML。

2. AJAX的优缺点是什么?
2.1 AJAX的优点
使用AJAX最大的优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序能更为迅捷得对用户请求进行反馈,提高了用户体验的同时,避免了在网络上发送那些没有改变过的信息。

传统的Web应用允许用户端填写表单(form),当送出表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单,然后送回一个新的网页,但这种做法浪费了很多带宽,因为:在前后两个处理后反馈的页面汇总,大部分的HTML代码往往是相同的。由于每次应用的沟通都需要向服务器发送请求,应用的回应时间久依赖于服务器的响应时间,这导致了用户界面的回应比本机应用慢很多。

与此不同的是,AJAX应用可以仅向服务器发送并取回必要的数据,它使用SOAP或其它一些基于XML的页面服务接口(界面),并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少(大约只有原来的5%),结果我们就能看到回应(服务器回应)更快的应用(结果)。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。

2.2 AJAX的缺点
对应于AJAX最主要的批评是:它可能破坏浏览器后退按钮的正常行为。在动态更新页面的情况下,用户无法回到前一个页面的状态,这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙:用户通常都希望单击后退按钮,就能够取消他们的前一次操作,但是在AJAX页面中,可能无法这样做。不过开发者已想出了种种办法来解决这个问题,当中大多数都是在用户单击后退按钮访问历史记录时,通过建立或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到AJAX元素上,以便将应用程序状态恢复到当时的状态。)

另一个相关的观点认为,使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现,大部分都使用URL片断标识符(通常被称为锚点,即URL中#后面的部分)来保持跟踪,允许用户回到指定的某个应用程序状态。(许多浏览器允许JavaScript动态更新锚点,这使得Ajax应用程序能够在更新显示内容的同时更新锚点。)这种解决方案也同时解决了许多关于不支持后退按钮的争论。

进行AJAX开发时,网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应、没有恰当的预读数据,或者对XMLHttpRequest的不恰当处理,都会使用户感到延迟,这是用户不想看到的,也是他们无法理解的。通常的解决方案是,使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

3. AJAX应用的通用流程
3.1 创建request对象
有了上面的基础知识后,我们来看看一些具体的例子。XMLHttpRequest 是 AJAX应用程序的核心,而且对很多读者来说可能还比较陌生,我们就从这里开始吧。从 清单 1 可以看出,创建和使用这个对象非常简单,不是吗?等一等。

还记得几年前的那些讨厌的浏览器战争吗?没有一样东西在不同的浏览器上得到同样的结果。不管您是否相信,这些战争仍然在继续,虽然规模较小。但令人遗憾的是,XMLHttpRequest 成了这场战争的牺牲品之一。因此获得 XMLHttpRequest 对象可能需要采用不同的方法。下面我将详细地进行解释。

使用 Microsoft 浏览器

Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML。因此如果编写的AJAX应用程序要和 Internet Explorer 打交道,那么必须用一种特殊的方式创建对象。

但并不是这么简单。根据 Internet Explorer 中安装的 JavaScript 技术版本不同,MSXML 实际上有两种不同的版本,因此必须对这两种情况分别编写代码。请参阅 清单 3,其中的代码在 Microsoft 浏览器上创建了一个 XMLHttpRequest。

清单 3. 在 Microsoft 浏览器上创建 XMLHttpRequest 对象

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wfzwjy.html