创建具有错误处理能力及多种浏览器通用的 XMLHttpRequest对象

<script language="javascript" type="text/javascript">
var request = false;
try {
  request = new XMLHttpRequest();
} catch (trymicrosoft) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
      request = false;
    }
  }
}
if (!request)
  alert("Error initializing XMLHttpRequest!");
</script>

很容易被这些花括号迷住了眼睛,因此下面分别介绍每一步:

  1. 创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。
  2. 增加 try/catch 块:
    1. 尝试创建 XMLHttpRequest 对象。
    2. 如果失败(catch (trymicrosoft)):
      1. 尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Msxml2.XMLHTTP)。
      2. 如果失败(catch (othermicrosoft))尝试使用较老版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Microsoft.XMLHTTP)。
    3. 如果失败(catch (failed))则保证 request 的值仍然为 false。
  3. 检查 request 是否仍然为 false(如果一切顺利就不会是 false)。
  4. 如果出现问题(request 是 false)则使用 JavaScript 警告通知用户出现了问题。  

关于 Ajax 和 Microsoft 对该领域不断增长的兴趣和参与已经有很多文章进行了介绍。事实上,据说 Microsoft 最新版本的 Internet Explorer —— version 7.0,将在 2006 年下半年推出 —— 将开始直接支持 XMLHttpRequest,让您使用 new 关键字代替所有的 Msxml2.XMLHTTP 创建代码。但不要太激动,仍然需要支持旧的浏览器,因此跨浏览器代码不会很快消失。

注意,所有以上代码都直接嵌套在 script 标记中。像这种不放到方法或函数体中的 JavaScript 代码称为静态 JavaScript。就是说代码是在页面显示给用户之前的某个时候运行。(虽然根据规范不能完全精确地 知道这些代码何时运行对浏览器有什么影响,但是可以保证这些代码在用户能够与页面交互之前运行。)这也是多数 Ajax 程序员创建 XMLHttpRequest 对象的一般方式。

将 XMLHttpRequest 创建代码移动到方法中并调用该方法

<script language="javascript" type="text/javascript">
var request;
function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (trymicrosoft) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = false;
      }
    }
  }
  if (!request)
    alert("Error initializing XMLHttpRequest!");
}
function getCustomerInfo() {
  createRequest();
  // Do something with the request variable
}
</script>
此代码惟一的问题是推迟了错误通知,这也是多数 Ajax 程序员不采用这一方法的原因。假设一个复杂的表单有 10 或 15 个字段、选择框等,当用户在第 14 个字段(按照表单顺序从上到下)输入文本时要激活某些 Ajax 代码。这时候运行 getCustomerInfo() 尝试创建一个 XMLHttpRequest 对象,但(对于本例来说)失败了。然后向用户显示一条警告,明确地告诉他们不能使用该应用程序。但用户已经花费了很多时间在表单中输入数据!这是非常令人讨厌的,而讨厌显然不会吸引用户再次访问您的网站。

如果使用静态 JavaScript,用户在点击页面的时候很快就会看到错误信息。这样也很烦人,是不是?可能令用户错误地认为您的 Web 应用程序不能在他的浏览器上运行。不过,当然要比他们花费了 10 分钟输入信息之后再显示同样的错误要好。因此,我建议编写静态的代码,让用户尽可能早地发现问题。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
  《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化,同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容,并对部分内容进行了更新。从第 2章起,分别围绕构建令人神往的富Web 应用,逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用,辅以直观明了的客户端和服务器端示例代码,让开发人员能够迅速理解和掌握新一代Web标准所涵盖的核心技术。《深入HTML5编程(第 2版)》后探索了离线Web应用并展望了HTML5未来的发展前景。   《深入HTML5编程(第 2版)》面向有一定经验的Web应用开发人员,对HTML5及未来Web应用技术发展有浓厚兴趣的读者也可以学习参考。 第1章 HTML5概述 1 1.1 HTML5发展史 1 1.2 关于2022年的那个神话 2 1.3 谁在开发HTML5 3 1.4 新的认识 3 1.4.1 兼容性和存在即合理 3 1.4.2 效率和用户优先 4 1.4.3 化繁为简 5 1.4.4 通用访问 5 1.5 无插件范式 5 1.6 HTML5的新功能 8 1.6.1 新的DOCTYPE和字符集 8 1.6.2 新元素和旧元素 9 1.6.3 语义化标记 10 1.6.4 使用Selectors API简化选取操作 15 1.6.5 JavaScript日志和调试 18 1.6.6 window.JSON 19 1.6.7 DOM Level 3 19 1.6.8 Monkeys、Squirrelfish和其他JavaScript引擎 19 1.7 小结 21 第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 23 2.1.5 替代内容 24 2.1.6 CSS和canvas 25 2.1.7 浏览器对HTML5 Canvas的支持情况 25 2.2 使用HTML5 Canvas API 25 2.2.1 检测浏览器支持情况 25 2.2.2 在页面中加入canvas 26 2.2.3 变换 28 2.2.4 路径 30 2.2.5 描边样式 32 2.2.6 填充样式 34 2.2.7 填充矩形区域 34 2.2.8 绘制曲线 35 2.2.9 在canvas中插入图片 37 2.2.10 渐变 38 2.2.11 背景图 40 2.2.12 缩放canvas对象 42 2.2.13 Canvas变换 43 2.2.14 Canvas文本 45 2.2.15 应用阴影 46 2.2.16 像素数据 48 2.2.17 Canvas的安全机制 50 2.3 使用HTML5 Canvas创建应用 51 2.3.1 进阶功能之全页玻璃窗 54 2.3.2 进阶功能之为Canvas动画计时 54 2.4 小结 57 第3章 SVG 58 3.1 SVG概述 58 3.1.1 历史 58 3.1.2 理解SVG 59 3.1.3 可缩放图形 61 3.1.4 使用SVG创建2D图形 61 3.1.5 在页面中添加SVG 61 3.1.6 简单的形状 62 3.1.7 变换SVG元素 63 3.1.8 复用内容 64 3.1.9 图案和渐变 64 3.1.10 SVG路径 65 3.1.11 使用SVG文本 66 3.1.12 组合场景 67 3.2 使用SVG创建交互式应用 68 3.2.1 添加树 69 3.2.2 添加updateTrees函数 69 3.2.3 添加removeTree函数 70 3.2.4 添加CSS样式 70 3.2.5 终代码 70 3.3 小结 74 第4章 音频和视频 75 4.1 HTML5 Audio和Video概述 75 4.1.1 视频容器 75 4.1.2 音频和视频编解码器 76 4.1.3 HTML5 Audio和Video的限制 77 4.1.4 audio元素和video元素的浏览器支持情况 77 4.2 使用HTML5 Audio和Video API 78 4.2.1 浏览器支持性检测 79 4.2.
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证   工具 动画 协助达成位置移动、大小改变、透明度和其他的网页效果。 浏览器历史纪录管理工具 协助网页程式使用浏览器之上一页与书签(我的最爱)工具。 连线工具 协助管理跨浏览器XMLHttpRequest 功能。他也整合了表单传送、错误处理、 callback和档案上传。 资料源 提供通用可配置接口给其他组件与种种资料,如从简单的JavaScript阵列到线上服务器,间透过XHR来互动。 元素 为DOM里的HTMLElements提供包装样式,从而简化一般工作如加入监听者(listener)、对DOM操作、以及存取属性。 DOM 为一般的 DOM脚本作业提供帮助,它包括元素定位与CSS样式管理。 即拖即放 为 即拖即放的开发(建立与管理可在网页上拖放的物件)提供帮助。 事件 提供开发者对浏览器事件,如鼠标点击与键盘按键,的简易、安全之存取。它也提供自订事件物件以应付用户出版与订阅自订事件的需求。 控件 自动完成 为用户文字输入的互动提供 自动完成功能 (建议列表与随打击找的功能)。它支援广泛的资料源格式。它也透过XMLHttpReqeust支援服务器端资料源。 按钮 让用户制作功能像传统HTML表单按钮般多样、图形化的按钮。 月历 图形式、动态的控制,用于日期选择。 容器 支援大量的DHTML视窗规范包括 提示框(Tooltip)、面板、对话框、简易对话框、模组与覆盖层(Overlay)。 资料表 简单且强大的应用程式接口用来显示网页上屏幕阅读器可存取的表资料。值得关注的功能包括可排序的栏、分页、卷轴、行选取、可放大缩小的栏、以及线上编辑。 纪录器 提供一种快速简单的方式来写入 日志讯息到Mozilla Firefox的Firebug扩充插件画面终端、或者Safari JavaScript终端。 表单 提供简易产生鼠标移过弹出 选单的方式。 滑块 提供一般性滑块组件让用户可在有限范围内以单轴或者双轴选择值。 分页检视 提供以分页方式来检视内容。 树状检视 产生目录树,其下节点可以缩放。   CSS 资源 CSS页面网格: 七种基本线框外带附加组件,支援超过1000种不同网页布局。 标准CSS字型集: 标准化跨浏览器字型家族与尺寸设定。 标准CSS重设: CSS宣告,用于移除页边空白并标准化跨浏览器对显示一般元素的问题。   YUI v3.17.2更新说明: 继续修复 Loader 的 bug。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值