副队长JavaScript教程(68)-Ajax Get请求详解与实战

点此查看 所有教程、项目、源码导航

前面我们认识了 AJAX 的概念、HTTP、同步异步这些基础内容。从这一篇开始，我们手写代码，用原生 XMLHttpRequest（XHR）实现第一个 AJAX GET 请求。

1. GET 请求适用场景

GET 请求一般用来查询、获取数据，不会修改服务器里面的数据。

比如：获取列表、查询一条信息、搜索数据，都适合用 GET。

GET 的特点：

1. 请求参数直接拼接在网址（URL）后面；
2. 参数会在地址栏直接看见，不适合传递隐私信息；
3. 可以被浏览器缓存。

2. XHR 对象基础介绍

XMLHttpRequest 是浏览器内置的对象，不需要额外引入，专门用来在后台发送网络请求，也就是传统 AJAX 的核心。

我们发送请求，大体分为 4 个步骤：

2.1 创建 XHR 对象

var xhr = new XMLHttpRequest();

2.2 配置请求信息（open）

open(请求方式, 请求地址, 是否异步)

• 第一个参数：请求方式，这里写 'GET'
• 第二个参数：接口地址
• 第三个参数：布尔值，true 代表异步（推荐），false 代表同步

2.3 监听服务器返回结果

通过 onreadystatechange 事件，监听请求状态变化。
readyState 代表当前请求的阶段：

• 0：对象已经创建，还没有调用 open
• 1：已经调用 open，还没有发送请求
• 2：请求已经发送，响应头已经接收完成
• 3：正在接收响应体数据
• 4：全部数据接收完毕（我们主要判断这个状态）

同时还要判断状态码 status === 200，代表请求成功。

2.4 发送请求（send）

GET 请求，send() 里面直接传 null 或者不传内容。

3. 完整 GET 请求示例代码

// 1. 创建XHR对象
var xhr = new XMLHttpRequest();
// 2. 配置请求：GET，测试接口地址，异步true
xhr.open('GET', 'http://www.pandabrother.cn:8080/java-api-demo/student/hello', true);
// 3. 监听状态变化
xhr.onreadystatechange = function () {
  // readyState等于4：数据接收完成；status等于200：请求成功
  if (xhr.readyState === 4 && xhr.status === 200) {
    // responseText 拿到服务器返回的文本数据
    console.log(xhr.responseText);
  }
};
// 4. 发送GET请求,该请求没参数，写null就行
xhr.send(null);

说明，上述案例中的http://www.pandabrother.cn:8080/java-api-demo/student/hello地址处的接口，是我提前写好放到服务器上的，这样可以让大家在初学阶段就能对真实后端API进行直接测试。

运行结果，可以看到，这条信息是来自远程后端服务器的。

4. GET 请求携带参数

很多时候我们需要给接口传递查询条件，GET 的参数拼在 URL 后面。
格式：地址?参数名=值&参数名=值

4.1 基础写法

		var xhr = new XMLHttpRequest();
        // 拼接参数：?id=1&name=zhangsan
        xhr.open('GET', 'http://www.pandabrother.cn:8080/java-api-demo/student/getParamTest?id=1', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        };
        xhr.send();

运行后，可以看到，后端拿到id后，将带id信息的字符串返回给了前端：

4.2 参数编码问题（重点）

如果参数里面有中文、空格、特殊符号，直接拼接会乱码，需要用 encodeURIComponent() 编码。

var name = '张三';
var nameEncode = encodeURIComponent(name);
var url = 'http://www.pandabrother.cn:8080/java-api-demo/student/paramEncodeTest?name=' + nameEncode;

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

效果如下：

注意，建议对参数都加上encodeURIComponent，不加的话可能会有风险，加了更稳妥。

5. 把返回的数据渲染到页面

前面只是打印在控制台，我们结合 DOM，拿到数据后更新页面，这才是 AJAX 的核心：局部更新。

<div id="box"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'url', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 拿到字符串格式的返回数据
    var resStr = xhr.responseText;
    // JSON字符串转JS对象
    var res = JSON.parse(resStr);
    // 修改页面内容
    document.getElementById('box').innerText = res.title;
  }
};
xhr.send();
</script>

这个只是一个示例，后面会有详细描述。

6. 常见问题与坑点

6.1 缓存问题

有些浏览器的 GET 请求会缓存结果，相同地址第二次请求不会去找服务器，直接拿旧数据。
解决办法：拼接一个随机参数，每次地址不一样

var url = 'https://jsonplaceholder.typicode.com/posts/1?t=' + Math.random();

JSONPlaceholder，是一个免费、在线的模拟 REST 假接口（Mock API），专门给前端 / 后端练手、测试 AJAX、Fetch、SpringBoot 请求用的后端接口，感兴趣的可以了解下。

6.2 只判断 readyState=4，忘记判断 status=200

就算地址 404，readyState 也会走到 4，必须同时判断状态码，才代表真正拿到正确数据。

6.3 GET 请求不能在 send 里面传参数

GET 的参数是写在 url 上，send 里面不能放数据，放了也不会生效。

7. 小结

1. GET 用于查询数据，参数拼接在 URL 后面；
2. XHR 四步：创建对象 → open 配置 → onreadystatechange 监听 → send 发送；
3. readyState === 4 代表数据接收完成，status === 200 代表请求成功；
4. 中文、特殊参数需要 encodeURIComponent 编码；
5. GET 存在缓存问题，可以追加随机参数解决。

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/woshisangsang/article/details/169831661