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

学习目标：

创建一个AJAX请求，从服务器获取一个JSON对象，并将其显示在网页上。
创建一个AJAX请求，向服务器发送数据并获取响应。使用获取到的响应数据更新网页上的内容。
创建一个AJAX请求，从服务器获取一个XML文件，并从中提取所需的数据。
创建一个AJAX请求，从服务器获取HTML片段，并将其插入到网页上的特定位置。
创建一个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()方法进行错误处理。