AJAX学习笔记

正文

目录会跟随阅读位置移动。

阅读进度

Ajax学习笔记

一、什么是Ajax？

Ajax的全称是Asynchronous JavaScript And XML，即异步的JavaScript和XML。它让网页在不刷新的情况下与服务器通信。

二、Ajax的实际应用场景

· 百度搜索框：输入关键字，下方自动弹出相关搜索提示 · 用户注册：检测用户名是否已被占用 · 京东/淘宝菜单：鼠标悬停在一级分类，二级分类懒加载出现 · 今日头条/朋友圈：滚动到底部自动加载更多内容 · 购物车：修改商品数量，总价实时更新而不刷新页面

三、Ajax的核心知识点

数据格式：从XML到JSON的演进

xml:

<student>
  <name>孙悟空</name>
  <age>18</age>
  <gender>男</gender>
</student>

json:

{"name":"孙悟空","age":18,"gender":"男"}

JSON更轻量、更易解析。

HTTP协议基础

Ajax发送的就是HTTP请求，理解HTTP协议能帮助我们更好地调试代码。HTTP报文分为请求报文和响应报文：

请求报文包含：

· 请求行：POST /s?ie=utf-8 HTTP/1.1 · 请求头：Host: atguigu.com、Content-Type等 · 空行 · 请求体：username=admin&password=admin

响应报文包含：

· 响应行：HTTP/1.1 200 OK · 响应头：Content-Type: text/html · 空行 · 响应体：返回的HTML或JSON数据

Chrome开发者工具的Network面板是调试Ajax的利器，可以清晰看到每次请求的完整报文。

四、原生Ajax实战

核心对象：XMLHttpRequest

所有Ajax操作都通过XMLHttpRequest对象完成。

GET请求示例

// 1. 创建对象
const xhr = new XMLHttpRequest();
// 2. 初始化，设置请求方法和URL（参数拼在URL后）
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');
// 3. 发送请求
xhr.send();
// 4. 监听状态变化，处理响应
xhr.onreadystatechange = function() {
    // readyState为4表示响应完成，status为2xx表示成功
    if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.response); // 获取响应数据
    }
}

POST请求示例

const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:8000/server');
// 设置请求头（可选）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送数据（放在请求体中）
xhr.send('a=100&b=200&c=300');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.response);
    }
}

readyState的5种状态

· 0：请求未初始化，未调用open() · 1：请求已建立，未调用send() · 2：请求已发送，正在处理 · 3：请求处理中，部分数据可用 · 4：响应完成，可获取数据

常见问题与解决方案

IE缓存问题：IE会缓存GET请求结果，导致第二次请求直接读缓存。解决方案是在URL后加时间戳：

xhr.open("GET", "/testAJAX?t=" + Date.now());

请求超时处理：

xhr.timeout = 2000; // 设置2秒超时
xhr.ontimeout = function() {
    alert("网络异常，请稍后重试！");
}

取消请求：

xhr.abort(); // 取消正在进行的请求

五、jQuery中的Ajax

jQuery对原生Ajax进行了封装，使用更简洁： javascript:

// GET请求
$.get('http://127.0.0.1:8000/server', {a:100, b:200}, function(data) {
    console.log(data);
}, 'json');

// POST请求
$.post('http://127.0.0.1:8000/server', {a:100, b:200}, function(data) {
    console.log(data);
});

// 全功能$.ajax()
$.ajax({
    url: 'http://127.0.0.1:8000/server',
    data: {a:100, b:200},
    type: 'POST',
    dataType: 'json',
    success: function(data) { console.log(data); },
    error: function() { console.log('请求失败'); }
});

六、跨域问题与解决方案

什么是跨域？

当一个网页向不同域名/不同协议/不同端口的网页请求资源时，就产生了跨域。

浏览器使用同源策略来保证用户信息安全：协议、域名、端口号必须完全相同才能正常请求。

解决方案

JSONP（仅支持GET请求）

利用script标签天生具有跨域能力的特性：

function handleData(data) {
    console.log(data);
}
const script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleData';
document.body.appendChild(script);

CORS（官方标准方案）

在服务器端设置响应头，告诉浏览器允许跨域：

// Node.js Express示例
app.all('/server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 正常处理请求...
});

七、Ajax的优缺点总结

优点

· 无刷新更新页面，用户体验好 · 按需加载数据，减少带宽占用 · 可实现懒加载，提升性能

缺点

· 没有浏览历史，无法回退 · 存在跨域问题

AJAX学习笔记

作者名片