1月22日java假期学习读书笔记

一、学习目标
了解HTTP协议的基本概念和工作原理。
掌握JavaScript中fetch和XMLHttpRequest的使用方法。
通过实际练习，实现前端页面与后端API的数据交互。
理解常见的HTTP状态码及其含义。
二、学习内容
（一）HTTP协议基础
HTTP简介
HTTP（HyperText Transfer Protocol，超文本传输协议）是互联网上应用最为广泛的协议之一，用于客户端和服务器之间的通信。
HTTP是一种无状态的协议，每次请求都是独立的。
HTTP请求和响应
请求：客户端（如浏览器）向服务器发送的请求，包含请求行、请求头和请求体。
响应：服务器返回给客户端的响应，包含状态行、响应头和响应体。
HTTP方法
GET：用于请求资源。
POST：用于提交数据。
PUT：用于更新资源。
DELETE：用于删除资源。
HTTP状态码
200 OK：请求成功。
404 Not Found：请求的资源未找到。
500 Internal Server Error：服务器内部错误。
400 Bad Request：请求无效。
401 Unauthorized：未授权。
（二）JavaScript中的HTTP请求处理

1. XMLHttpRequest
   XMLHttpRequest是早期用于实现AJAX（Asynchronous JavaScript and XML）的API，用于在后台与服务器交换数据。
   示例代码：
   JavaScript
   复制
   function fetchData() {
   const xhr = new XMLHttpRequest();
   xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
   xhr.onload = function () {
   if (xhr.status === 200) {
   const data = JSON.parse(xhr.responseText);
   console.log(data);
   } else {
   console.error("Error:", xhr.status);
   }
   };
   xhr.onerror = function () {
   console.error("Request failed");
   };
   xhr.send();
   }

fetchData();
2. fetch API
fetch是现代浏览器提供的更简洁的API，返回一个Promise对象，支持Promise链式调用。
示例代码：
JavaScript
复制
async function fetchData() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
if (!response.ok) {
throw new Error(HTTP error! Status: ${response.status});
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Error fetching data:", error);
}
}

fetchData();
（三）实际练习：实现一个简单的用户信息查询
HTML结构
HTML
复制

用户信息查询

查询用户

JavaScript代码 JavaScript 复制 document.getElementById("fetchButton").addEventListener("click", function () { const userId = document.getElementById("userId").value.trim(); if (userId === "") { alert("请输入用户ID"); return; }

fetchUserInfo(userId);

});

async function fetchUserInfo(userId) {
try {
const response = await fetch(https://jsonplaceholder.typicode.com/users/${userId});
if (!response.ok) {
throw new Error(User not found. Status: ${response.status});
}
const userData = await response.json();
displayUserInfo(userData);
} catch (error) {
console.error("Error fetching user data:", error);
document.getElementById("userInfo").textContent = "用户未找到";
}
}

function displayUserInfo(data) {
const userInfoDiv = document.getElementById("userInfo");
userInfoDiv.innerHTML = <p><strong>用户名：</strong>${data.username}</p> <p><strong>邮箱：</strong>${data.email}</p> <p><strong>电话：</strong>${data.phone}</p> ;
}
三、学习心得
HTTP协议的重要性
HTTP是前端与后端交互的基础协议，理解其工作原理有助于更好地开发Web应用。
熟悉常见的HTTP状态码可以快速定位问题。
fetch与XMLHttpRequest的对比
fetch是现代浏览器推荐的API，代码更加简洁，支持Promise和Async/Await。
XMLHttpRequest虽然功能强大，但代码较为繁琐，逐渐被fetch替代。
异步请求的实际应用
通过实际编写代码，我更好地理解了如何使用fetch实现前端与后端的数据交互。
异步请求可以提升用户体验，避免页面刷新。
实践的重要性
实践可以帮助快速发现和解决问题，加深对知识点的理解。