14、动态数据与Ajax：打造交互式网页的秘诀

aa123

于 2025-12-04 11:05:59 发布

阅读量3

点赞数

CC 4.0 BY-SA版权

分类专栏： Head First JavaScript入门指南文章标签： Ajax XMLHttpRequest XML

本文链接：https://blog.youkuaiyun.com/aa123/article/details/155582120

Head First JavaScript入门指南专栏收录该内容

15 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

动态数据与Ajax：打造交互式网页的秘诀

在当今的网络世界中，用户期望网页能够对他们的每一个操作做出即时响应。JavaScript通过一种名为Ajax的编程技术，在实现这一目标的过程中发挥了至关重要的作用。Ajax使得网页能够动态地加载和保存数据，同时实时响应用户操作，而无需刷新整个页面。

1. 动态数据的需求

以Ruby的YouCube博客为例，她热爱自己基于JavaScript的博客，但对于每次添加新博客都要编辑整个HTML文件感到十分沮丧。她希望能够将博客内容与描述博客页面的HTML代码分离，从而专注于博客内容本身。

2. 数据驱动的YouCube

通过引入动态数据，YouCube博客实现了内容与页面结构的分离。动态数据是在页面被浏览器处理时动态加载到页面中的数据。基于动态数据构建的网页被称为数据驱动页面，因为页面只是定义了一个结构，具体内容由数据填充。

以下是YouCube页面的HTML代码示例：

<html> 
  <head> 
    <title>YouCube - The Blog for Cube Puzzlers</title> 
    <script type="text/javascript" src="ajax.js"> </script> 
    <script type="text/javascript" src="date.js"> </script> 
    <script type="text/javascript"> 
      // 自定义日期函数，以MM/DD/YYYY格式显示日期 
      Date.prototype.shortFormat = function() { 
        return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear(); 
      } 
      // 博客对象构造函数 
      function Blog(body, date, image) { 
        // 分配属性 
        this.body = body; 
        this.date = date; 
        this.image = image; 
      } 
    </script> 
  </head> 
  <body onload="loadBlog();"> 
    <h3>YouCube - The Blog for Cube Puzzlers</h3> 
    <img src="cube.png" alt="YouCube" /> 
    <input type="button" id="search" value="Search the Blog" disabled="disabled" onclick="searchBlog();" /> 
    <input type="text" id="searchtext" name="searchtext" value="" /> 
    <div id="blog"></div> 
    <input type="button" id="showall" value="Show All Blog Entries" disabled="disabled" onclick="showBlog();" /> 
    <input type="button" id="viewrandom" value="View a Random Blog Entry" disabled="disabled" onclick="randomBlog();" /> 
  </body> 
</html>

博客数据则存储在一个单独的XML文件中：

<blog> 
  <title>YouCube - The Blog for Cube Puzzlers</title> 
  <author>Puzzler Ruby</author> 
  <entries> 
    <entry> 
      <date>08/14/2008</date> 
      <body>Got the new cube I ordered. It's a real pearl.</body> 
    </entry> 
    <entry> 
      <date>08/19/2008</date> 
      <body>Solved the new cube but of course, now I'm bored and shopping for a new one.</body> 
    </entry> 
    <!-- 更多博客条目 -->
  </entries> 
</blog>

JavaScript负责处理博客数据，并将其与HTML代码合并，生成最终的YouCube页面。这种数据驱动的页面由结构页面和博客数据两部分组成，使得Ruby可以独立于HTML、CSS和JavaScript代码来操作博客内容。

3. Ajax的通信机制

Ajax通过允许客户端浏览器与Web服务器之间进行微小的“对话”，使得动态数据成为可能。具体来说，脚本可以向服务器请求数据，如博客条目集合，服务器则使用Ajax将数据发送回来。脚本再将博客数据动态地整合到页面中。

以下是Ajax请求和响应的流程：

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;

    A(客户端):::process -->|发送请求| B(服务器):::process
    B -->|返回响应| A

4. XML的作用

XML是一种标记语言，与HTML类似，但更加灵活。HTML有固定的标签和属性集，而XML不定义任何标签和属性，只规定了标签和属性的创建和使用规则。这使得XML可以根据具体需求创建自定义的标记语言。

在YouCube博客中，XML用于存储博客数据。XML数据以文本形式存储在普通的纯文本文件中，文件扩展名为 .xml 。

以下是XML与HTML的一些区别：
| 比较项 | HTML | XML |
| ---- | ---- | ---- |
| 标签规则 | 语法较为宽松，如  标签可单独使用 | 每个开始标签必须有对应的结束标签，如 ... |
| 空标签 | 空标签如   可直接使用 | 空标签必须以   形式表示 |
| 属性值 | 属性值可不加引号 | 属性值必须用引号括起来 |

5. XMLHttpRequest对象

JavaScript中的XMLHttpRequest对象用于发起Ajax请求和处理响应。该对象包含多个方法和属性，以下是一些重要的方法和属性：
| 方法/属性 | 描述 |
| ---- | ---- |
| open() | 准备请求，指定请求类型（如”GET”或”POST”）、服务器URL等 |
| send() | 向服务器发送请求 |
| readyState | 请求的状态，如0（未初始化）、1（已打开）、2（已发送）、3（正在接收）、4（已加载） |
| status | 请求的HTTP状态码，如404（未找到）、200（OK） |
| responseText | 服务器返回的响应数据，以纯文本字符串形式表示 |
| responseXML | 服务器返回的响应数据，以XML节点树对象形式表示 |
| abort() | 取消请求 |

然而，XMLHttpRequest对象的使用较为复杂，即使是最基本的Ajax请求也需要大量的JavaScript代码。为了简化操作，可以创建一个自定义的AjaxRequest对象。

6. 自定义AjaxRequest对象

AjaxRequest对象是对XMLHttpRequest对象的封装，提供了更简单的接口来发起Ajax请求和处理响应。以下是AjaxRequest对象的主要方法：
| 方法 | 描述 |
| ---- | ---- |
| getReadyState() | 获取请求的状态 |
| getResponseText() | 获取响应数据的纯文本形式 |
| getResponseXML() | 获取响应数据的XML形式 |
| send() | 准备并发起Ajax请求 |
| getStatus() | 获取请求的HTTP状态码 |

以下是使用AjaxRequest对象发起GET请求的示例代码：

var ajaxReq = new AjaxRequest();
ajaxReq.send("GET", "blog.xml", handleRequest);

其中， handleRequest 是自定义的请求处理函数，用于处理服务器的响应。

7. 请求类型：GET和POST

Ajax请求主要分为GET和POST两种类型：
- GET ：主要用于从服务器检索数据，不会对服务器造成任何影响。适用于从服务器的XML文件中检索博客数据。
- POST ：通常用于向服务器发送数据，服务器的状态可能会因此发生变化，如将数据保存到数据库。适用于通过网页表单动态添加新博客条目。

以下是GET和POST请求的示例代码：

// GET请求
request.open("GET", "blog.xml", true);
request.send(null);

// POST请求
request.open("POST", "addblogentry.php", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
request.send("date=09/26/2008&body=These dreams just...&image=cubeapart.png");

8. 处理Ajax响应

当Ajax请求完成后，会调用自定义的请求处理函数来处理响应。以下是一个示例处理函数：

function handleRequest() { 
  if (ajaxReq.getReadyState() == 4 && ajaxReq.getStatus() == 200) { 
    // 存储XML响应数据 
    var xmlData = ajaxReq.getResponseXML().getElementsByTagName("blog")[0]; 
    // 设置博客签名 
    Blog.prototype.signature = "by " + getText(xmlData.getElementsByTagName("author")[0]); 
    // 创建博客条目对象数组 
    var entries = xmlData.getElementsByTagName("entry"); 
    for (var i = 0; i < entries.length; i++) { 
      if (entries[i].getElementsByTagName("image")[0]) { 
        // 创建带有图片的博客条目对象 
        blog.push(new ImageBlog(new Date(getText(entries[i].getElementsByTagName("date")[0])), 
          getText(entries[i].getElementsByTagName("body")[0]), 
          getText(entries[i].getElementsByTagName("image")[0]))); 
      } else { 
        // 创建普通博客条目对象 
        blog.push(new Blog(new Date(getText(entries[i].getElementsByTagName("date")[0])), 
          getText(entries[i].getElementsByTagName("body")[0]))); 
      } 
    } 
    // 启用博客按钮 
    document.getElementById("search").disabled = false; 
    document.getElementById("showall").disabled = false; 
    document.getElementById("viewrandom").disabled = false; 
    // 显示博客 
    showBlog(5); 
  } 
}

9. 优化用户体验

为了提高用户体验，可以在博客数据加载时显示一个“等待”图标，同时在博客数据加载完成之前禁用博客按钮。

以下是在 loadBlog() 函数中显示“等待”图标的代码：

function loadBlog() {
  ajaxReq.send("GET", "blog.xml", handleRequest);
  document.getElementById("blog").innerHTML = "<img src='wait.gif' alt='Loading... ' />";
}

10. 基于Web的博客添加

YouCube现在由动态数据驱动，但Ruby希望能够通过网页界面添加博客条目，而不是编辑XML文件。可以使用Ajax的POST请求将新博客条目数据发送到服务器，服务器再将数据写入 blog.xml 文件。

由于JavaScript是客户端技术，无法直接在服务器上写入文件，因此可以使用PHP等服务器端技术来处理。以下是一个PHP脚本示例：

<?php 
$filename = "blog.xml"; 
if (file_exists($filename)) { 
  // 从XML文件加载博客条目 
  $rawBlog = file_get_contents($filename); 
} 
else { 
  // 创建一个空的XML文档 
  $rawBlog = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>"; 
  $rawBlog .= "<blog><title>YouCube - The Blog for Cube Puzzlers</title>"; 
  $rawBlog .= "<author>Puzzler Ruby</author><entries></entries></blog>"; 
} 
$xml = new SimpleXmlElement($rawBlog); 
// 添加新博客条目作为子节点 
$entry = $xml->entries->addChild("entry"); 
$entry->addChild("date", $_REQUEST["date"]); 
$entry->addChild("body", stripslashes($_REQUEST["body"])); 
if ($_REQUEST["image"] != "") 
  $entry->addChild("image", $_REQUEST["image"]); 
// 将整个博客写入文件 
$file = fopen($filename, 'w'); 
fwrite($file, $xml->asXML()); 
fclose($file); 
?>

11. 提高博客数据录入效率

为了提高博客数据录入效率，可以自动填充日期字段为当前日期，并将输入焦点设置在博客内容字段上。以下是实现该功能的代码：

function initForm() {
  document.getElementById("date").value = (new Date()).shortFormat();
  document.getElementById("body").focus();
}

通过以上步骤，YouCube博客实现了动态数据加载、网页界面添加博客条目等功能，同时优化了用户体验，提高了博客数据录入效率。

动态数据与Ajax：打造交互式网页的秘诀

12. 博客添加页面设计

为了实现通过网页界面添加博客条目，需要设计一个博客添加页面。该页面应包含用于输入博客日期、内容和可选图片的表单字段，以及一个“添加”按钮。点击按钮时，页面将收集表单数据，并使用Ajax的POST请求将数据发送到服务器。

以下是博客添加页面的设计流程：

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;

    A(用户输入数据):::process -->|点击添加按钮| B(收集表单数据):::process
    B -->|发送POST请求| C(服务器):::process
    C -->|处理数据并写入文件| D(博客文件更新):::process
    D -->|返回响应| E(客户端显示成功提示):::process

13. 数据格式与POST请求

在发送POST请求时，需要将博客数据格式化为URL编码的字符串。URL编码格式要求每个数据项的名称和值用等号分隔，不同数据项之间用 & 符号分隔。

以下是将博客数据格式化为URL编码字符串的示例：

var postData = "date=" + document.getElementById("date").value +
               "&body=" + document.getElementById("body").value +
               "&image=" + document.getElementById("image").value;

发送POST请求的代码如下：

function addBlogEntry() {
  // 禁用添加按钮并显示状态信息
  document.getElementById("add").disabled = true;
  document.getElementById("status").innerHTML = "Adding... ";

  // 发送POST请求
  ajaxReq.send("POST", "addblogentry.php", handleRequest,
    "application/x-www-form-urlencoded; charset=UTF-8",
    postData);
}

14. 处理POST请求响应

在服务器处理完POST请求后，会返回一个响应。客户端需要处理这个响应，以确认新博客条目是否成功添加。

以下是处理POST请求响应的代码：

function handleRequest() {
  if (ajaxReq.getReadyState() == 4 && ajaxReq.getStatus() == 200) {
    // 启用添加按钮并清除状态信息
    document.getElementById("add").disabled = false;
    document.getElementById("status").innerHTML = "";

    // 显示成功提示
    alert("The new blog entry was successfully added.");
  }
}

15. 避免重复请求问题

为了避免在服务器处理请求时用户再次点击“添加”按钮导致的重复请求问题，需要在请求处理期间禁用“添加”按钮，并在请求完成后重新启用。

以下是改进后的 addBlogEntry() 函数：

function addBlogEntry() {
  if (ajaxReq.getReadyState() != 4) {
    // 如果请求未完成，不做处理
    return;
  }

  // 禁用添加按钮并显示状态信息
  document.getElementById("add").disabled = true;
  document.getElementById("status").innerHTML = "Adding... ";

  // 发送POST请求
  ajaxReq.send("POST", "addblogentry.php", handleRequest,
    "application/x-www-form-urlencoded; charset=UTF-8",
    postData);
}

16. 共享代码以提高可维护性

为了避免代码重复，提高代码的可维护性，可以将常用的代码（如日期格式化函数）存储在一个单独的文件中，并在需要的页面中引入。

以下是将 shortFormat() 函数存储在 date.js 文件中的示例：

// date.js
Date.prototype.shortFormat = function() {
  return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
};

在需要使用该函数的页面中引入 date.js 文件：

<script type="text/javascript" src="date.js"></script>

17. 总结与展望

通过使用Ajax、XML和服务器端技术（如PHP），YouCube博客实现了动态数据加载、网页界面添加博客条目等功能，大大提高了博客的可维护性和用户体验。

在未来，可以进一步优化YouCube博客，例如：
- 增加搜索功能，方便用户查找特定的博客条目。
- 实现博客条目分类和标签功能，提高博客的组织性。
- 引入评论功能，增强用户互动性。

总之，利用现代Web技术可以不断提升博客的功能和性能，为用户提供更好的体验。

以下是一个总结表格，展示了YouCube博客的主要技术点和功能：
| 技术点 | 功能 |
| ---- | ---- |
| Ajax | 实现动态数据加载和交互，无需刷新页面 |
| XML | 存储博客数据，提供灵活的标记语言 |
| XMLHttpRequest | 发起Ajax请求和处理响应 |
| AjaxRequest | 简化Ajax请求的使用 |
| PHP | 处理服务器端数据写入操作 |
| 日期格式化 | 自动填充日期字段，提高用户输入效率 |
| 按钮禁用 | 避免重复请求，优化用户体验 |

通过合理运用这些技术和方法，可以打造出更加高效、易用的Web应用程序。