Ajax调用GET请求数据的实用写法

在做网页开发时，经常需要从服务器获取一些动态数据，比如用户信息、商品列表或者天气情况。这时候，用 Ajax 发个 GET 请求就特别方便，不用刷新页面就能把数据拿回来。

原生 JavaScript 实现 GET 请求

不依赖任何框架的情况下，可以直接用浏览器自带的 XMLHttpRequest 来发请求。比如要获取某个用户的资料，接口是 /api/user?id=123，可以这样写：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/user?id=123', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

这段代码创建了一个异步请求，等服务器返回数据后，通过 onreadystatechange 拿到响应内容，再解析成 JavaScript 对象使用。

用 fetch 更简洁

现在大多数现代浏览器都支持 fetch，语法更清晰。还是拿上面的例子，改用 fetch 写法会更清爽：

fetch('/api/user?id=123')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('请求出错：', error);
    });

fetch 返回的是 Promise，链式调用处理起来顺手，尤其适合嵌套逻辑不多的场景。

jQuery 的 $.get 方法

如果项目里用了 jQuery，那获取数据就更简单了，一行代码搞定：

$.get('/api/user', { id: 123 }, function(data) {
    console.log(data);
});

参数自动拼接成查询字符串，回调函数直接接收解析好的数据，适合快速开发或者老项目维护。

实际应用场景举例

比如你做一个搜索框，用户输入关键词时，实时显示匹配的结果。就可以在输入事件中发起 GET 请求，把关键词传给后端：

document.getElementById('searchInput').addEventListener('input', function(e) {
    const keyword = e.target.value;
    if (!keyword) return;

    fetch('/api/search?kw=' + encodeURIComponent(keyword))
        .then(res => res.json())
        .then(results => {
            const list = document.getElementById('resultList');
            list.innerHTML = results.map(item => 
                '<li>' + item.name + '</li>'
            ).join('');
        });
});

用户每输入一个字，就向服务器请求一次匹配数据，页面局部更新，体验流畅。

发送 GET 请求时，注意把用户输入的内容用 encodeURIComponent 处理一下，避免特殊字符导致 URL 出错。另外，频繁请求可以加个防抖，减少服务器压力。