GET请求知识详解

一、GET 请求是什么

GET 是 HTTP 协议里最基础的一种请求方法。

一句话理解：从服务器「获取 / 查询」数据，不修改服务器上的数据。 就像你在浏览器地址栏输入网址敲回车，本质就是发送 GET 请求，向服务器拿网页内容。

核心特点：

1. 数据拼在URL 地址栏 上，用 ? 分隔，多个参数用 & 连接 示例：https://xxx.com/api/list?name=张三&age=20
   • ? 后面：查询参数（query 参数）
2. 只用来读取数据，不能新增、修改、删除服务器资源（规范上）
3. 有长度限制：URL 不能太长，不同浏览器限制不一样，一般 2k 左右，不能传大量数据
4. 会被浏览器缓存、保存在历史记录里
5. 明文传输：参数直接写在地址栏，不能传密码、隐私信息

二、GET 能解决什么问题

只做查询、读取类需求：

1. 获取列表数据：商品列表、新闻列表、表格数据
2. 查询详情：根据 ID 获取某一条数据
3. 搜索功能：输入关键词，后台返回匹配结果
4. 获取静态资源：图片、html、css、js 文件
5. 分页查询：?page=1&size=10 获取第 1 页 10 条数据

不适合：提交表单、上传文件、修改 / 新增数据（这些一般用 POST）

三、GET 请求怎么使用（前端 2 种写法，你学的 JS）

方式 1：原生 JS XMLHttpRequest（老原生 AJAX，作业常考）

// 1. 创建请求对象
let xhr = new XMLHttpRequest();
// 2. 打开连接：方法GET，接口地址+查询参数，true=异步
let url = "https://api.example.com/user?name=小明&page=1";
xhr.open("GET", url, true);
// 3. 监听请求状态变化
xhr.onreadystatechange = ()=>{
  // readyState=4 请求完成；status=200 成功
  if(xhr.readyState === 4 && xhr.status === 200){
    // 拿到后台返回的数据
    let res = JSON.parse(xhr.responseText);
    console.log(res);
  }
}
// 4. 发送请求（GET不需要传参数在send里面）
xhr.send();

重点：GET 的参数写在 url 里，send() 里面不传内容

方式 2：fetch（现代浏览器推荐，现在项目常用）

// 拼接查询参数
let params = new URLSearchParams();
params.append("name","小明");
params.append("page","1");
let url = `https://api.example.com/user?${params}`;

fetch(url,{
  method:"GET" // GET可以省略不写，fetch默认就是GET
})
.then(response=>response.json())
.then(res=>{
  console.log("获取的数据",res);
})
.catch(err=>{
  console.log("请求失败",err);
})

URLSearchParams 专门用来拼接 get 参数，自动处理特殊字符，避免手动拼接&出错。