3．AjaxAnywhere处理系统异常和HTTP请求异常
在Web应用程序中，系统异常和HTTP请求异常的处理一向是件比较头疼的事情。在Ajax应用程序中，这两个异常的处理会比传统的通信机制下相对棘手，惟一比较有效的方式就是在回调函数中判断HTTP请求的状态码并做相应的处理。如果异常未加以处理，用户根本不知道请求到底执行成功没有，页面上也不会有任何的反应，不像传统的通信机制下会显示“HTTP404错误”等类似的错误页面。
比较可喜的是，AjaxAnywhere提供了一种比较方便的异常处理方式。之前提到的，AjaxAnywhere将服务器返回的响应数据包装成一个XML文档，这个XML文档中同样也包含系统异常和HTTP请求异常的信息，它们被封装在exception元素中。在AjaxAnywhere默认的回调函数中可以看到，它将系统异常的信息交由this.handleException (type,detail)方法处理，而HTTP请求异常则交由this. handleHttpErrorCode(code)方法处理。默认的this.handle Exception(type,detail)方法将系统异常的细节显示在弹出窗口中，如图11-22所示，其代码如例程11-31所示。
例程11-31 AjaxAnywhere处理系统异常的方法
AjaxAnywhere.prototype.handleException = function(type, details) {
alert(details);
图11-22 AjaxAnywhere显示的系统异常信息
而默认的this.handleHttpErrorCode(code)则允许用户在一个新的页面中显示HTTP请求异常信息，如图11-23所示，其代码如例程11-32所示。
例程11-32 AjaxAnywhere处理HTTP请求异常的方法
AjaxAnywhere.prototype.handleHttpErrorCode = function(code) {
var details = confirm("AjaxAnywhere default error handler. XMLHttp Request HTTP Error code:" + code + " \n\n Would you like to view the response content in a new window?");
if (details) {
var win = window.open("", this.id + "_debug_window");
if (win != null) {
win.document.write("<html><body><xmp>" + this.req.response Text);
win.document.close();
win.focus();
} else {
alert("Please, disable your pop-up blocker for this site fir st.");
}
}
图11-23 AjaxAnywhere显示的HTTP请求异常
如果用户希望系统提供更加人性化的系统异常和HTTP异常处理机制，则可以重载这两个异常处理方法。AjaxAnywhere的demo示范包中有相应的案例可供参考，如图11-24和图11-25所示。
图11-24 重载后的系统异常处理
图11-25 重载后的HTTP请求异常处理
4．定制Ajax请求执行的提示信息
之前说过，在Ajax应用程序中，当Ajax请求正在执行的时候，应当在页面的适当位置提示用户请求正在执行。而Ajax请求执行完毕后，应当提示用户页面已经更新。AjaxAnywhere提供了默认的解决方案，在页面右上角显示一个“Loading…”的蓝色提示条，如图11-26所示，其实质是一个固定位置的DIV浮动层。
图11-26 AjaxAnywhere默认的Ajax请求执行提示信息
AjaxAnywhere对象的方法showLoadingMessage()和hideLoadingMessage()用于显示和隐藏这个提示信息，它们分别在Ajax请求发送前和回调函数中被调用，其代码如例程11-33所示。
例程11-33 AjaxAnywhere默认的Ajax请求执行提示信息方法
AjaxAnywhere.prototype.showLoadingMessage = function() {
var div = document.getElementById("AA_" + this.id + "_loading_ div");
if (div == null) {
div = document.createElement("DIV");
document.body.appendChild(div);
div.id = "AA_" + this.id + "_loading_div";
div.innerHTML = " Loading...";
div.style.position = "absolute";
div.style.border = "1 solid black";
div.style.color = "white";
div.style.backgroundColor = "blue";
div.style.width = "100px";
div.style.heigth = "50px";
div.style.fontFamily = "Arial, Helvetica, sans-serif";
div.style.fontWeight = "bold";
div.style.fontSize = "11px";
}
div.style.top = document.body.scrollTop + "px";
div.style.left = (document.body.offsetWidth - 100 - (document.all? 20:0)) + "px";
div.style.display = "";
}
AjaxAnywhere.prototype.hideLoadingMessage = function() {
var div = document.getElementById("AA_" + this.id + "_loading_ div");
if (div != null)
div.style.display = "none";
在必要的时候，可以在页面的适当位置重载上述两个方法，提供个性化的提示信息。例程11-34重载上述两个方法，将这个提示信息替换成轮显的图片，如图11-27所示。读者可以在AjaxAnywhere的demo演示包中找到这个案例。
例程11-34 重载后的Ajax请求提示信息方法
ajaxAnywhere.showLoadingMessage = function() {
var img = document.getElementById("myImg");
if (img == null) {
img = document.createElement("img");
document.body.appendChild(img);
img.id = "myImg";
img.src = "balls.gif";
img.style.position = "absolute";
img.style.border = "1 solid black";
img.style.top = 0;
img.style.left = document.body.offsetWidth - 170;
}
img.style.display = "";
}
AjaxAnywhere.prototype.hideLoadingMessage = function() {
var img = document.getElementById("myImg");
if (img != null)
img.style.display = "none";
图11-27 重载后的Ajax请求提示信息
分享到：
相关推荐
Ajax开发精要——概念、案例与框架
《Ajax开发精要 概念、案例与框架》书和码.part2.rar
**Ajax开发精要原码详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了用户...
4. **Vue.js的Axios插件**：Vue.js框架内集成了axios，方便进行Ajax请求，同时利用Vue的数据绑定机制轻松更新视图。 **四、源码分析** 在提供的压缩包文件中，可能包含了一些Ajax的实例代码，包括使用不同框架或...
Ajax开发精要主要聚焦于利用Ajax技术进行WEB开发。Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建交互式网页应用的技术，它综合运用多种技术，包括JavaScript、XHTML和CSS、DOM、XML...
本资源包含了关于Ajax开发的一些关键点和源代码实例，虽然可能并不完整，但仍能为理解Ajax的工作原理和实践应用提供宝贵参考。** Ajax的核心在于创建XMLHttpRequest对象，它是JavaScript内置的对象，用于在后台与...
综上所述，"AJAX开发精要－概念，案例与框架配套源码"可能涵盖这些主题，并提供示例代码和实践练习，帮助学习者深入理解AJAX技术及其在实际项目中的应用。通过学习和实践这些知识点，开发者可以创建更高效、更动态的...
这是《Ajax开发精要 概念、案例与框架》的电子书+源码，自制的jpg格式的pdg文件，请大家用UnicornViewer察看
《Ajax开发精要 概念、案例与框架》书+码.part3.rar
Ajax，全称Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它综合运用了一系列Web开发技术，包括...理解并掌握这些技术，对于开发高效的Ajax应用程序至关重要。
**Ajax开发精要** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心在于利用JavaScript与服务器进行异步数据交换，提升了用户体验，使得网页更加动态...
本教程“Ajax程序开发经典实例教程”旨在帮助开发者深入理解和掌握Ajax技术，通过实例学习，使学习过程更加直观和易懂。 Ajax的核心在于创建XMLHttpRequest对象，它是JavaScript内置的对象，用于在后台与服务器进行...
Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。...在后续章节中，将进一步探讨JavaScript和DOM在Ajax中的具体应用，以及如何利用这些技术解决实际开发问题。
《Ajax开发精要》是一本深入探讨Ajax技术的专业书籍，旨在帮助开发者掌握使用Ajax进行高效、动态网页开发的核心技能。附带的源码是作者为了辅助读者理解和实践书中的示例而提供的，使得学习过程更加直观和实用。下面...
ASP.NET AJAX实用开发详解 电子教程
**Ajax 教程** ...- 《AJAX开发简略[1].part1-5.rar》：可能是某篇关于Ajax开发的系列教程，分多个部分详细讲解Ajax的各个方面。 通过这些资源，你可以全面地了解和掌握Ajax技术，提升Web开发能力。
本教程将深入讲解AJAX开发，包括基本概念、实例、教程以及相关的开发源码。 **1. AJAX的基本原理** AJAX的核心是JavaScript对象XMLHttpRequest，它允许在后台与服务器进行通信。当用户触发某个事件（如点击按钮）...
【Ajax技术概述】 Ajax，全称为Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的情况下，能够更新...通过这四天的学习，你将能够熟练掌握Ajax，将其应用到前端开发中，提升Web应用的互动性和效率。