在 Web 交互中，事件响应和异步数据交互是构建动态应用的核心能力。早期浏览器的事件模型混乱（IE 与标准浏览器差异显著），AJAX 实现需要繁琐的兼容代码，而 Prototype 框架通过统一的 API 封装，解决了这些痛点。本节课将深入学习 Prototype 的跨浏览器事件处理机制、AJAX 核心功能及全局管理方案，最终实现一个无刷新的登录页面。

一、跨浏览器事件模型

事件是用户与页面交互的 “桥梁”（如点击、输入、加载），但不同浏览器对事件的处理方式存在差异（如 IE 用attachEvent，标准浏览器用addEventListener）。Prototype 的事件系统通过Event对象和observe方法，提供了跨浏览器统一的事件处理方案。

1. 事件注册

Event.observe()用于给元素绑定事件处理器，自动处理浏览器兼容，语法简洁：

// 语法：Event.observe(元素, 事件类型, 处理器函数)
Event.observe('btn', 'click', function(event) {
  alert('按钮被点击了');
});

// 也可直接通过元素方法调用（更常用）
$('btn').observe('click', function(event) {
  alert('按钮被点击了');
});

优势：

• 支持所有标准事件（click、keydown、submit等）；
• 同一元素的同一事件可绑定多个处理器（不会覆盖）；
• 自动传入标准化的event对象（解决浏览器差异）。

2. 事件对象

Prototype 对原生事件对象进行了封装，提供统一的属性和方法，无需担心浏览器差异：

常用属性 / 方法	功能描述
event.target	事件源元素（触发事件的元素）
event.type	事件类型（如'click'、'submit'）
event.keyCode	键盘事件的键码（如回车键是 13）
Event.stop(event)	同时阻止事件默认行为和传播（冒泡 / 捕获）
event.preventDefault()	阻止事件默认行为（如表单提交、链接跳转）
event.stopPropagation()	阻止事件传播（避免父元素触发同一事件）

3. 阻止默认行为与事件传播

在实际开发中，常需要阻止元素的默认行为（如表单提交刷新页面）或事件传播（如子元素点击不触发父元素事件）。

① 阻止默认行为

示例：阻止表单提交的默认刷新行为

<form id="myForm" action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">提交</button>
</form>

$('myForm').observe('submit', function(event) {
  // 阻止表单默认提交（不刷新页面）
  event.preventDefault(); 
  alert('表单将通过AJAX提交');
});

② 阻止事件传播

示例：点击子元素不触发父元素的点击事件

<div id="parent" style="padding: 20px; border: 1px solid #000;">
  父元素
  <div id="child" style="padding: 10px; background: #ccc;">子元素</div>
</div>

$('parent').observe('click', function() {
  alert('父元素被点击');
});

$('child').observe('click', function(event) {
  alert('子元素被点击');
  // 阻止事件传播到父元素
  event.stopPropagation(); 
});

点击子元素时，只会触发子元素的事件处理器，父元素不会响应（若不阻止，会先触发子元素，再触发父元素）。

③ 一键阻止：Event.stop(event)

Event.stop(event)是preventDefault()和stopPropagation()的组合，适合需要同时阻止两者的场景（如链接点击）：

$('link').observe('click', function(event) {
  Event.stop(event); // 既不跳转，也不传播
  alert('链接点击被拦截');
});

4. 事件委托：动态元素的事件处理

对于动态添加的元素（如 AJAX 加载的内容），直接绑定事件会失效。Prototype 通过事件委托（利用事件冒泡）解决此问题：将事件绑定到静态父元素，通过event.target判断触发源。

示例：为动态添加的列表项绑定点击事件

<ul id="dynamicList">
  <!-- 列表项会动态添加 -->
</ul>
<button id="addItem">添加项</button>

// 绑定父元素的click事件（父元素是静态的）
$('dynamicList').observe('click', function(event) {
  // 判断事件源是否是列表项（类名为item）
  if (event.target.hasClassName('item')) {
    alert('点击了：' + event.target.innerHTML);
  }
});

// 动态添加列表项
$('addItem').observe('click', function() {
  var newItem = new Element('li', { className: 'item' }).update('新项');
  $('dynamicList').insert(newItem);
});

无论何时添加列表项，点击时都会触发事件处理器，无需重新绑定。

二、AJAX 核心

AJAX（异步 JavaScript 和 XML）是实现 “无刷新更新页面” 的核心技术，让 Web 应用更接近桌面软件的流畅体验。Prototype 封装了Ajax.Request等类，简化了 AJAX 的实现。

1. Ajax.Request

Ajax.Request是 Prototype 的核心 AJAX 类，用于发送 HTTP 请求（GET/POST 等），并处理响应。

基本语法：

new Ajax.Request(url, {
  method: 'get', // 请求方法：get/post，默认get
  parameters: { key1: 'value1', key2: 'value2' }, // 请求参数
  onSuccess: function(response) { // 请求成功回调
    // 处理响应
  },
  onFailure: function(response) { // 请求失败回调
    // 处理错误
  }
});

示例：GET 请求获取数据

// 点击按钮加载用户信息
$('loadUserBtn').observe('click', function() {
  new Ajax.Request('/api/user', {
    method: 'get',
    parameters: { id: 1 }, // 传递用户ID
    onSuccess: function(response) {
      // response.responseText 是服务器返回的原始文本
      var user = JSON.parse(response.responseText); // 解析JSON
      $('userInfo').update(`
        <p>姓名：${user.name}</p>
        <p>年龄：${user.age}</p>
      `);
    },
    onFailure: function() {
      $('userInfo').update('加载失败，请重试');
    }
  });
});

示例：POST 请求提交数据

// 提交表单数据
$('submitBtn').observe('click', function() {
  new Ajax.Request('/api/save', {
    method: 'post',
    parameters: {
      username: $('username').value,
      email: $('email').value
    },
    onSuccess: function(response) {
      alert('保存成功：' + response.responseText);
    }
  });
});

2. Ajax.Updater

Ajax.Updater是Ajax.Request的简化版，可自动将服务器响应内容更新到指定 DOM 元素，无需手动调用update()。

基本语法：

new Ajax.Updater(
  target, // 目标元素（ID或元素对象）
  url,    // 请求URL
  options // 配置参数（同Ajax.Request）
);

示例：用服务器响应更新列表

<ul id="newsList"></ul>
<button id="loadNews">加载新闻</button>

$('loadNews').observe('click', function() {
  new Ajax.Updater(
    'newsList', // 目标元素：更新ul#newsList
    '/api/news', // 请求URL
    {
      method: 'get',
      parameters: { category: 'tech' },
      // 加载中显示提示
      onLoading: function() {
        $('newsList').update('加载中...');
      }
    }
  );
});

服务器返回的 HTML（如<li>新闻1</li><li>新闻2</li>）会直接替换ul#newsList的内容，简化了代码。

3. Ajax.PeriodicalUpdater

用于定期（如每隔 3 秒）发送请求并更新页面，适合实时数据展示（如股票行情、在线人数）。

基本语法：

new Ajax.PeriodicalUpdater(
  target,   // 目标元素
  url,      // 请求URL
  {
    frequency: 3, // 间隔时间（秒），默认2秒
    decay: 2      // 失败后间隔倍数（如2：失败后间隔变为6秒、12秒...）
  }
);

示例：实时更新在线人数

<p>当前在线：<span id="onlineCount">0</span>人</p>

// 每5秒更新一次在线人数
var updater = new Ajax.PeriodicalUpdater(
  'onlineCount',
  '/api/online',
  {
    frequency: 5,
    onSuccess: function(response) {
      // 服务器返回纯数字（如"123"）
      $('onlineCount').update(response.responseText);
    }
  }
);

// 停止更新（如需）
// updater.stop();

三、全局 AJAX 管理

在复杂应用中，需要对所有 AJAX 请求进行全局管理（如显示全局加载动画、统一错误处理）。Ajax.Responders允许注册全局回调函数，监听所有 AJAX 请求的生命周期。

1. 全局加载状态

示例：所有 AJAX 请求加载时显示动画，完成后隐藏

<div id="loading" style="display: none; position: fixed; top: 0; left: 0; right: 0; background: #ff0; text-align: center;">
  加载中...
</div>

// 注册全局响应器
Ajax.Responders.register({
  // 任何请求开始时触发
  onLoading: function() {
    $('loading').show(); // 显示加载动画
  },
  // 任何请求完成时触发（成功或失败）
  onComplete: function() {
    $('loading').hide(); // 隐藏加载动画
  }
});

无论页面中有多少个 AJAX 请求，加载动画都会统一显示和隐藏，提升用户体验。

2. 全局错误处理

统一处理所有 AJAX 请求的错误（如网络异常、服务器错误）：

Ajax.Responders.register({
  onFailure: function(response) {
    // 响应状态码非200时触发
    if (response.status === 404) {
      alert('请求的资源不存在');
    } else if (response.status === 500) {
      alert('服务器内部错误，请稍后再试');
    } else {
      alert('请求失败，状态码：' + response.status);
    }
  }
});

四、AJAX 登录页面（带表单验证）

需求说明

实现一个无刷新登录页面，包含：

1. 表单验证：用户名和密码不能为空，密码长度≥6；
2. AJAX 提交：点击登录按钮后，用 POST 请求提交数据，不刷新页面；
3. 状态反馈：加载中显示 “登录中...”，成功则跳转到首页，失败则显示错误信息；
4. 全局加载动画：所有 AJAX 请求（包括登录）触发时显示。

实现步骤

1. HTML 结构与样式

<div class="login-container" style="width: 300px; margin: 50px auto;">
  <h2>用户登录</h2>
  <form id="loginForm">
    <div class="form-group">
      <label>用户名：</label>
      <input type="text" id="username" name="username" class="form-control">
    </div>
    <div class="form-group">
      <label>密码：</label>
      <input type="password" id="password" name="password" class="form-control">
    </div>
    <div class="error" style="color: red; margin: 10px 0;"></div>
    <button type="submit" id="loginBtn" class="btn">登录</button>
  </form>
</div>

<!-- 全局加载动画 -->
<div id="loading" style="display: none; position: fixed; top: 0; left: 0; right: 0; padding: 5px; background: #ff0; text-align: center;">
  处理中...
</div>

2. JavaScript 实现逻辑

document.observe('dom:loaded', function() {
  // 1. 全局AJAX加载动画
  Ajax.Responders.register({
    onLoading: function() {
      $('loading').show();
    },
    onComplete: function() {
      $('loading').hide();
    }
  });

  // 2. 获取元素
  var form = $('loginForm');
  var username = $('username');
  var password = $('password');
  var errorEl = form.down('.error');

  // 3. 表单验证函数
  function validateForm() {
    var errors = [];
    if (!username.value.trim()) {
      errors.push('用户名不能为空');
    }
    if (password.value.length < 6) {
      errors.push('密码长度不能少于6位');
    }
    // 显示错误信息
    errorEl.update(errors.length > 0 ? errors.join('<br>') : '');
    return errors.length === 0; // 验证通过返回true
  }

  // 4. 绑定表单提交事件
  form.observe('submit', function(event) {
    event.preventDefault(); // 阻止默认提交

    // 先验证表单
    if (!validateForm()) {
      return;
    }

    // 5. AJAX提交登录数据
    new Ajax.Request('/api/login', {
      method: 'post',
      parameters: {
        username: username.value,
        password: password.value
      },
      onSuccess: function(response) {
        var result = JSON.parse(response.responseText);
        if (result.success) {
          // 登录成功，跳转到首页
          window.location.href = '/index';
        } else {
          // 显示服务器返回的错误（如用户名或密码错误）
          errorEl.update(result.message);
        }
      },
      onFailure: function() {
        errorEl.update('网络异常，请稍后重试');
      }
    });
  });
});

3. 服务器响应格式（示例）

登录成功响应：

{ "success": true, "message": "登录成功" }

登录失败响应：

{ "success": false, "message": "用户名或密码错误" }

代码解析

• 事件处理：用form.observe('submit', ...)绑定表单提交事件，event.preventDefault()阻止默认刷新；
• 表单验证：在提交前通过validateForm()检查输入，实时显示错误信息；
• AJAX 提交：用Ajax.Request发送 POST 请求，参数为用户名和密码；
• 响应处理：解析 JSON 响应，成功则跳转，失败则显示错误；
• 全局管理：通过Ajax.Responders实现全局加载动画，所有 AJAX 请求统一触发。

这个案例完整覆盖了 “事件绑定→表单验证→AJAX 交互→全局状态” 的流程，是实际项目中常见的交互模式。

最后小结：

Prototype 的事件处理和 AJAX 模块，在前端发展史上具有重要意义：

1. 跨浏览器兼容：统一了 IE 与标准浏览器的事件模型和 AJAX 实现，让开发者无需编写大量兼容代码；
2. 简化 API：用observe()替代复杂的事件注册，用Ajax.Request封装 XMLHttpRequest 的繁琐步骤；
3. 提升开发效率：事件委托、自动元素更新等功能，大幅减少了动态页面的开发工作量；
4. 奠定现代实践：其倡导的 “无刷新交互”“事件驱动” 等理念，为后续 jQuery、Vue 等框架的交互设计提供了参考。

尽管现代框架（如 React、Vue）已采用不同的事件和数据交互模式，但 Prototype 解决问题的思路（统一接口、屏蔽底层差异、提升开发效率）仍值得学习。下节课，我们将学习 Prototype 的高级特性与实际项目中的最佳实践。