ASP.NET 提供了一个基于服务器的富编程模型,这种回传架构能够在服务器端用面向对象程序设计语言完成所有工作。可以确保代码更安全并且能够和所有浏览器兼容。
不过,回传架构也有缺点。页面回传总是带来微小但确实可感觉得到的额外负载,它不能及时响应鼠标移动和按键事件。此外,某些任务(如弹出窗口、提供实时状态信息、框架间通信)需要浏览器的交互,不可能通过服务器端编程完成。
为了解决这些问题,开发人员通常借助客户端编程来弥补服务器端网页代码的不足。通过这些客户端脚本,你可以创建响应更及时的网页并且能够完成某些服务器端不可能完成的任务。
通常,创建富用户界面的自定义控件、为了获得最佳的浏览器兼容性,客户端脚本语言首选 JavaScript。
JavaScript 本质
JavaScript 是一种嵌入式语言,通常嵌入于一个网页,它的代码被下载到客户端计算机并被浏览器解释执行。
JavaScript 一般有两种嵌入方式:
- 把代码直接嵌入到 HTML 元素的事件特性中,这是处理少量代码最直接的方式。
- 添加包含 JavaScript 代码的 <script> 标签,通常可以选择页面加载后自动执行或创建 JavaScript 函数在客户端事件时被调用。
命名的 JavaScript 代码子程序被成为函数,即使它们并不显式的返回值。它们并非被成为方法,因为 JavaScript 语言并不真正支持面向对象编程。
无论是使用 <script> 块还是事件特性或者同时使用两者,都有两种选择去创建 JavaScript 代码,这点很重要:
- 把固定的代码嵌入在 .aspx 页面,一般在 <head> 标签内
- 使用 Page 类提供的方法动态的添加 JS 代码(最灵活)
HTML DOM
服务器端程序员已经习惯了在与之交互时把 Web 页面作为控件对象的集合。客户端程序员则可以按相似的抽象工作。差别在于,现在你使用的每个对象直接映射到一个 HTML 标签,它们不再是任何高级控件,所有的对象被归结为段落、标题、图像、表单控件和表格。
把 Web 页面作为对象树交互的能力源于 HTML DOM(Document Object Model)。JavaScript 和 HTML DOM 的组合被成为 DHTML(Dynamic HTML)。换言之,DHTML 并不是一项独立技术,而是使用 JavaScript 的一种特定方式。
客户端事件
JavaScript 支持一组丰富的客户端事件,如下表:
| onchange | 输入控件中修改值时发生。对于文本控件,失去焦点时发生 | select、text、text area |
| onclick | 单击时发生 | button、check box、radio、link、area |
| onmouseover | 鼠标指针滑过控件时发生 | link、area |
| onmouseout | 鼠标指针离开控件时发生 | link、area |
| onkeydown | 用户按键时发生 | text、text area |
| onkeyup | 用户释放按键时发生 | text、text area |
| onselect | 用户选中输入控件的某段文本时发生 | text、text area |
| onfocus | 控件获得焦点时发生 | select、text、text area |
| onblur | 控件离开焦点时发生 | select、text、text area |
| onabort | 用户取消图像下载时发生 | image |
| onerror | 图像不能正确下载时发生 | image |
| onload | 页面结束下载时发生 | window、location |
| onunload | 页面卸载时发生 | window |
如果以 XHTML 编写页面,JavaScript 的名称必须全部使用小写(阅读困难),如果不使用 XHTML 约定,则可以大小写混合,如 onMouseOver。
下面的网页代码为 2 个 TextBox 控件添加 onmouseover 事件:
{
TextBox1.Attributes.Add("onmouseover",
"alert('Your mouse is hoving on TextBox1.');");
TextBox2.Attributes.Add("onmouseover",
"alert('Your mouse is hoving on TextBox2.');");
}