AJAX练习题：加强你的异步通信技能！

?

?

学习目标：

1. 创建一个AJAX请求，从服务器获取一个JSON对象，并将其显示在网页上。

2. 创建一个AJAX请求，向服务器发送数据并获取响应。使用获取到的响应数据更新网页上的内容。

3. 创建一个AJAX请求，从服务器获取一个XML文件，并从中提取所需的数据。

4. 创建一个AJAX请求，从服务器获取HTML片段，并将其插入到网页上的特定位置。

5. 创建一个AJAX请求，从服务器获取一个图片，并在网页上显示它。

代码解释：

题1：从服务器获取JSON对象并显示在网页上

// 创建一个AJAX请求，从服务器获取一个JSON对象，并将其显示在网页上

// 使用fetch API发送AJAX请求
fetch("http://example.com/data.json")
  .then(response => response.json()) // 解析响应为JSON对象
  .then(data => {
    // 将获取到的JSON对象显示在网页上
    document.getElementById("result").innerHTML = JSON.stringify(data);
  })
  .catch(error => console.log(error)); // 处理错误

在此代码中，我们使用了fetch API 来发送AJAX请求去获取JSON数据。使用.then() 方法来解析响应并将其显示在网页上。如果有错误发生，则使用.catch()方法进行错误处理。

题2: 向服务器发送数据并获取响应，更新网页上的内容

// 创建一个AJAX请求，向服务器发送数据并获取响应。使用获取到的响应数据更新网页上的内容。

// 创建一个包含发送数据的对象
const data = {
  name: "John",
  age: 25
};

// 使用fetch API发送AJAX请求
fetch("http://example.com/submit", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
})
  .then(response => response.text()) // 解析响应为文本
  .then(response => {
    // 使用获取到的响应数据更新网页上的内容
    document.getElementById("result").innerHTML = response;
  })
  .catch(error => console.log(error)); // 处理错误

在此代码中，我们使用fetch API发送POST请求，并通过headers设置请求头为"Content-Type": "application/json"，将包含数据的对象转换为JSON字符串并通过 body 字段发送出去。然后，我们解析响应为文本并使用.then()方法将其显示在网页上。如果有错误发生，则使用.catch()方法进行错误处理。

题3: 从服务器获取XML文件，提取所需的数据

// 创建一个AJAX请求，从服务器获取一个XML文件，并从中提取所需的数据。

// 使用fetch API发送AJAX请求
fetch("http://example.com/data.xml")
  .then(response => response.text()) // 解析响应为文本
  .then(data => {
    // 将文本数据解析为XML对象
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(data, "text/xml");
    
    // 从XML文件中提取所需的数据
    const title = xmlDoc.getElementsByTagName("title")[0].textContent;
    
    // 显示提取到的数据在网页上
    document.getElementById("result").innerHTML = title;
  })
  .catch(error => console.log(error)); // 处理错误

在此代码中，我们使用fetch API发送AJAX请求，使用.then()方法将响应解析为文本数据。然后，我们使用DOMParser来将文本数据解析为XML对象。接着，我们使用getElementsByTagName()方法从XML文件中提取所需的数据，并将其显示在网页上。如果有错误发生，则使用.catch()方法进行错误处理。

题4: 从服务器获取HTML片段，并将其插入到网页上的特定位置

// 创建一个AJAX请求，从服务器获取HTML片段，并将其插入到网页上的特定位置。

// 使用fetch API发送AJAX请求
fetch("http://example.com/fragment.html")
  .then(response => response.text()) // 解析响应为文本
  .then(data => {
    // 将获取到的HTML片段插入到网页上的特定位置
    document.getElementById("container").innerHTML = data;
  })
  .catch(error => console.log(error)); // 处理错误

在此代码中，我们使用fetch API发送AJAX请求，使用.then()方法将响应解析为文本数据。然后，我们将获取到的HTML片段插入到网页上具有特定id的容器元素中。如果有错误发生，则使用.catch()方法进行错误处理。

题5: 从服务器获取图片，并在网页上显示

// 创建一个AJAX请求，从服务器获取一个图片，并在网页上显示它。

// 使用fetch API发送AJAX请求
fetch("http://example.com/image.jpg")
  .then(response => response.blob()) // 解析响应为Blob对象
  .then(data => {
    // 创建一个<img>元素
    const img = document.createElement("img");

    // 将获取到的图片设置为<img>元素的src属性
    img.src = URL.createObjectURL(data);
  
    // 显示图片在网页上
    document.getElementById("result").appendChild(img);
  })
  .catch(error => console.log(error)); // 处理错误

在此代码中，我们使用fetch API发送AJAX请求，使用.then()方法将响应解析为Blob对象。然后，我们创建一个<img>元素，将获取到的图片设置为<img>元素的src属性以显示在网页上。如果有错误发生，则使用.catch()方法进行错误处理。

学习时间：

提示：这里可以添加计划学习的时间

例如：

• 周一至周五晚上 7 点—晚上9点
• 周六上午 9 点-上午 11 点
• 周日下午 3 点-下午 6 点