AJAX练习题:加强你的异步通信技能!

2023-12-15 14:32:25

?

?

学习目标:

  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 点

文章来源:https://blog.csdn.net/weixin_70007095/article/details/135014804
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。