使用innerHTML属性创建动态内容
如果结合作用HTML元素的innerHTML属性，responseText属性会变得非常有用。
innerHTML.html清单：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using responseText with innerHTML</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "innerHTML.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {//把responseText直接赋给innerHTML
document.getElementById("results").innerHTML = xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="Search for Today's Activities" onclick="startRequest();"/>
</form>
<div id="results"></div>
</body>
</html>
innerHTML.xml清单：
<table border="1">
<tbody>
<tr>
<th>Activity Name</th>
<th>Location</th>
<th>Time</th>
</tr>
<tr>
<td>Waterskiing</td>
<td>Dock #1</td>
<td>9:00 AM</td>
</tr>
<tr>
<td>Volleyball</td>
<td>East Court</td>
<td>2:00 PM</td>
</tr>
<tr>
<td>Hiking</td>
<td>Trail 3</td>
<td>3:30 PM</td>
</tr>
</tbody>
</table>
运行结果：
使用responseText和innerHTML可以大简化向页面增加动态内容的工作。遗憾的是，这种方法存在一些缺陷。因为innerHTML属性不是HTML元素的标准属性，所以与标准兼容的浏览器不一定提供这个属性的实现。不过，当前大多数浏览器支持innerHTML属性。但是，IE是率先使用innerHTML的浏览器，但它的innerHTML实现反而最受限制。现在许多浏览器都将innerHTML属性作为所有HTML元素的读/写属性。与此不同的是，IE则有所限制，在表和表行之类的HTML元素上innerHTML属性仅仅是只读属性，从一定程度上看这就是限制了它的使用。
分享到：
相关推荐
要使用Ajax，首先需要创建一个`XMLHttpRequest`实例。然后，我们需要设置请求的类型（GET或POST）、URL以及是否异步执行。接着，调用`open()`方法初始化请求，再调用`send()`方法发送请求。例如： ```javascript ...
这篇“web学习笔记——javascript基础”将带你走进JavaScript的世界，理解其基本概念和常用语法。 JavaScript语法基础： 1. 变量：在JavaScript中，变量用于存储数据。声明变量使用`var`关键字，例如`var myVar = ...
3.1.1 使用innerhtml属性创建动态内容 37 3.1.2 将响应解析为xml 40 3.1.3 使用w3c dom动态编辑页面 45 3.2 发送请求参数 52 3.2.1 请求参数作为xml发送 59 3.2.2 使用json向服务器发送数据 64 3.3 小结 70 ...
在上面的代码中，我们使用正则表达式来匹配 Ajax 返回的数据中是否有 `<script>` 标签，如果存在则取出标签内部的内容，并创建新的 `<script>` 标签将其添加到 `<head>` 中，让浏览器解析。 解决 Ajax 返回 ...
1. 创建XMLHttpRequest对象：这是Ajax的基础，所有浏览器（除了IE5）都内建了这个对象。在JavaScript中，可以通过new XMLHttpRequest()来创建一个实例。 2. 打开连接：使用XMLHttpRequest对象的open()方法，指定...
通过以上内容的学习，我们了解到 Ajax 的基本原理及其关键组成部分，包括 `XMLHttpRequest` 对象的创建、请求的发送与接收、回调函数的使用等。同时，我们也讨论了一些进阶主题，如跨域请求的问题及解决方案。掌握...
Ajax全称为“Asynchronous JavaScript and XML”，是一种创建快速动态网页的技术。其核心组成部分包括: - **标准呈现:** 使用XHTML和CSS进行页面布局。 - **动态展示与交互:** 通过DOM实现页面元素的动态更改。 - *...
1. **XMLHttpRequest对象**：创建并使用XMLHttpRequest对象是Ajax的核心步骤，通过open()方法设置请求类型、URL和异步模式，send()方法发送请求。 2. **事件处理**：监听XMLHttpRequest对象的onreadystatechange事件...
### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心，它负责在客户端与服务器之间发送异步请求，无需刷新整个页面即可实现局部数据更新。要使用 ...
本篇笔记将详细介绍AJAX的工作原理以及其实现方法。 #### 二、AJAX核心：XMLHttpRequest对象 AJAX的核心是`XMLHttpRequest`对象，它提供了一种在客户端与服务器之间进行异步数据交换的方式。下面是一段示例代码，...
在创建动态选择项，即`<select>`元素的选项时，我们可以利用`innerHTML`来实现。例如，假设我们有一个空的`<select>`元素，我们可以通过以下方式向其中添加新的`<option>`元素： ```html <select id="mySelect"></...
例如，可以使用 innerHTML 属性来获取某个 HTML 元素中的所有内容，然后使用正则表达式来提取其中的文本内容。 例如，下面的代码可以获取 test 元素中的所有内容，然后使用正则表达式来提取其中的文本内容： var ...
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，设计... 这些是JSON和AJAX的基本概念及使用方法，它们共同构成了Web应用程序中数据交互的重要组成部分，使得用户可以享受到更流畅、更动态的网页体验。
### AJAX基础教程知识点总结 #### 一、AJAX概述 - **定义**：Asynchronous JavaScript and XML（异步JavaScript和XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 - **目的**：提高Web应用的...
AJAX的核心在于创建 XMLHttpRequest 对象，通过这个对象与服务器进行通信，从而在后台加载数据并更新页面的部分内容，提升用户体验。 一、AJAX基本原理 1. **创建XMLHttpRequest对象**：在JavaScript中，首先需要...
在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，使得交互更加流畅。本教程将...
**Ajax异步传输数据(1)——页面格式** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它的核心是JavaScript，利用XMLHttpRequest对象与服务器进行通信，...
**AJAX基础到精通教程** AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了用户...