Ajax入门教程：简单应用示例

"该资源提供了一个简单的AJAX应用实例，旨在帮助初学者理解并运用AJAX技术。通过创建XMLHttpRequest对象，实现与服务器的异步数据交互，展示了一个获取邮件数量并在页面上实时更新的场景。同时，还涉及到动态添加选项到下拉列表的功能。" 在网页开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不刷新整个页面的情况下，从服务器获取数据并局部更新页面。以下是对提供的代码片段的详细解析： 1. **创建XMLHttpRequest对象**： 在JavaScript中，`XMLHttpRequest`是用于实现AJAX的核心对象。代码首先检查浏览器支持的类型，然后创建对象。对于旧版IE浏览器，使用`new ActiveXObject("Microsoft.XMLHTTP")`；对于其他现代浏览器，使用`new XMLHttpRequest()`。 2. **发送AJAX请求**： `getMail`函数触发了AJAX请求。它调用`CreateXMLHTTPRequest`函数确保XMLHttpRequest对象被正确创建。然后，定义了`onreadystatechange`事件处理器`handler`，这个处理器会在请求状态改变时被调用。接着，使用`open`方法配置请求，这里设置了请求方式为"POST"，URL为"ajax/getMailCount.aspx"，并设置异步执行（第三个参数为`true`）。最后，使用`send`方法发送请求，传入`null`表示无额外的数据要发送。 3. **处理响应**： `handler`函数是请求状态改变时的回调函数。当`readystate`属性值为4时，表示请求已完成。`responsetext`属性则包含了服务器返回的数据。在这里，数据被赋值给了页面上的某个元素（ID为"dd"），实现了数据显示。同时，使用`setTimeout`每1秒调用一次`getMail`，以实现数据的实时更新。 4. **动态添加选项到下拉列表**： 另一段JavaScript代码展示了如何在下拉列表（`<select>`元素）中动态添加选项。`Button2_onclick`函数用于添加新选项。`select`变量获取了ID为"sscs"的`<select>`元素，然后使用`options.add`方法添加新的`<option>`元素。这显示了如何通过JavaScript动态修改DOM元素。 5. **获取选中选项的值**： `getSelectValue`函数用于获取下拉列表中选中的选项的值。当用户选择一个选项时，`options`属性可以访问所有选项，`selectedIndex`属性返回当前选中的选项索引，而`value`属性则获取选中选项的值。 这个实例展示了基础的AJAX使用方法，包括创建XMLHttpRequest对象、发送请求、处理响应以及动态操作DOM。对于初学者，这是一个很好的起点，可以帮助他们理解AJAX在网页中的实际应用。