AJAX基础知识

2024-09-27

什么是AJAX

AJAX，即Asynchronous JavaScript and XML。

简单说就是：异步js与xml。

AJAX不是什么？

不是新的语言，还是用js。只是把现有标准组合在一起的方式。

AJAX可以干什么？

无刷新获取数据：可以在不刷新页面的情况下发送http请求，得到http响应。

无刷新更新页面：根据用户事件来更新部分内容。

AJAX的缺点

没有浏览历史，不能后退
有跨域问题（需要同源）
SEO不友好（爬虫是爬不到的）

AJAX应用示例

注册页面时，检测用户名不可用。
搜索时出现的下拉框和关键字。
鼠标悬停出现二级分类。比如京东购物界面。如果不悬停，不会向服务端发送请求。这叫懒加载：用则加载，不用则不加载.
新闻网站页面滚到底，重新生成新的内容（比如今日头条）。

AJAX的使用方法

原生方式xhr, jQuery，axios方式、内置fetch方式。无论是哪些方式，都是对原生方式xhr的封装，为了让请求更简单和易用。

axios兼容promise风格，更现代化。
fetch不是第三方库，可以直接使用，方便。

xhr原生方式

// 获取button元素
var btn = document.querySelector('button');
// 绑定事件
btn.onclick = function(){
    // 创建xhr对象
    var xhr = new XMLHttpRequest();
    // 初始化：设置请求方法和url
    xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300', true);
    // 发送请求
    xhr.send();
    // 事件绑定，处理服务端返回结果
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300){ // readystate: 1未初始化 2已经发送 3正在接收 4完成; status: 200+都是成功
            // 1.响应行
            console.log(xhr.status); //状态码
            console.log(xhr.statusText); //状态文本
            // 2.响应头
            console.log(xhr.getAllResponseHeaders());
            // 3.响应体
            console.log(xhr.response);
            // 获取服务端返回的数据
            var data = xhr.responseText; //responseText将响应体变成Text格式
            // 获取result元素
            var result = document.querySelector('#result');
            // 将数据显示到result元素中
            result.innerHTML = data;
        }
    }
}

axios方式

我总结在axios基础知识。

fetch方式

注意，用fetch的时候，因为用了await方法，函数名必须加上async。

因为老版的浏览器不支持fetch，因此工作中一般不用，用以上三种xhr的方法居多。jQuery被逐渐淘汰，而原生xhr太难用，实际上用axios最多。

try {
    const response = await fetch(`http://localhost:3000/api1/search/users2?q=${KeyWord}`)
    const data = await response.json()
    // console.log(data);
    PubSub.publish('communication', {isLoading:false, users:data.items})
} catch (error) {
    console.log('请求出错了', error);
    PubSub.publish('communication', {isLoading:false, err:error.message})
}

可以参考fetch的使用方法。