网络请求

客户端(浏览器)通过 HTTP/HTTPS 协议向服务器发出请求, 并接收响应数据的过程。

工作流程

1.DNS将网址转成后端服务器的IP地址，找到数据接收处

2.TCP 建立浏览器和后端服务器的连接通道

3.HTTP协议请求html页面，拿取数据

4.解析数据与渲染

AJAX

是一种不用刷新页面就能发送请求、更新页面的技术

                AJAX（不刷新页面发请求的技术）
                          │
                          ▼
                HTTP 网络请求（底层协议）
                 /      │      │      \
              请求地址  请求方法  请求头   请求体
              (URL)    (GET/   (Content- (数据)
                       POST)    Type等)
http状态码
分类 含义 例子
2xx 成功 200 OK
3xx 重定向 304 缓存
4xx 客户端错误（你的问题） 404 未找到、403 无权限
5xx 服务器错误（服务器问题） 500 内部错误

同步与异步

网络请求应当异步进行，相同时间内可以做很多事

同步：
console.log('开始');
let result = longTask(); // 假设运行 3 秒
console.log('结果: ', result);
console.log('结束');
// 执行顺序: 开始 -> (等待 3 秒) -> 结果: xxx -> 结束
// 中间卡住, 页面无法响应其他操作
异步
console.log('开始');
fetch('/api/data')
.then(res => res.json())
.then(data => console.log('结果: ', data));
console.log('结束');
// 执行顺序: 开始 -> 结束 -> (稍后)结果: xxx
// 页面不会被卡住, 用户可以继续交互

实现方式

XMLHttprequest

Fetch API

Axios

请求头和请求体

请求头 （post请求时必须有）

请求头是浏览器发送请求时附带的额外说明信息，描述请求的内容类型等

请求头 含义 示例值
Content-Type 告诉服务器我发的是什么格式的数据 application/json（JSON格式）、text/html（网页）、image/png（图片）
Authorization 身份认证，告诉服务器“我是谁” Bearer eyJhbGciOiJ...（token）
Content-Type 什么时候用 示例
application/json 前后端分离项目，发送/接收JSON数据 {"name": "John"}
multipart/form-data 上传文件（图片、文档等） 文件二进制数据
application/x-www-form-urlencoded 传统表单提交 name=John&age=18
请求体

发给服务器的核心数据 eg：

const Data = {
name: 'John Doe',
email: 'john.doe@example.com'
};

XMLHttprequest

在后台与服务器交换数据

属性
属性/方法 类型 含义 常用值/说明
new XMLHttpRequest() 构造函数 创建XHR对象 必须第一步执行
.open(method, url, async) 方法 初始化请求 method: GET/POST, async: true(异步)
.send(body) 方法 发送请求 body: POST时传数据，GET时省略或null
.onreadystatechange 属性 状态变化时的回调函数 赋值一个函数，自动触发
.readyState 属性 当前请求阶段 0→4，4表示完成
.status 属性 HTTP状态码 200成功，404未找到，500服务器错误
.statusText 属性 状态码对应的文字 "OK"、"Not Found"
.responseText 属性 服务器返回的文本数据 JSON字符串或普通文本
.responseXML 属性 服务器返回的XML数据 少用
.response 属性 根据responseType返回的数据 比responseText更灵活
.responseType 属性 设置返回数据的格式 "json"、"text"、"document"等
.setRequestHeader() 方法 设置请求头 POST时需要设置Content-Type
.getResponseHeader() 方法 获取指定的响应头 xhr.getResponseHeader("Content-Type")
.getAllResponseHeaders() 方法 获取所有响应头 返回字符串
.abort() 方法 取消请求 中断正在进行的请求
.timeout 属性 设置超时时间(毫秒) xhr.timeout = 3000
.ontimeout 属性 超时时的回调函数 xhr.ontimeout = function(){}
.withCredentials 属性 跨域是否携带cookie true/false
.onload 属性 请求成功完成时的回调 比onreadystatechange更简洁
.onerror 属性 请求失败时的回调 网络错误时触发
.onprogress 属性 接收数据进度回调 可用于大文件下载进度条
使用步骤

//GET请求

1.创建对象

const xhr =new XMLHttpRequest( );

2.配置请求的基本信息

xhr.open('请求方式'，‘请求地址’，‘是否异步，一般用true异步’)

3.监听事件，接受相应状态

xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { // 表示请求完成
​
    if(xhr.status === 200) { // 200: 表示响应数据成功
//返回可操作的js对象
    const data = JSON.parse(xhr.responseText);
    document.querySelector(".name").innerHTML=data.name;
        }
    }
};

4.错误处理

xhr.onerror = function () {
        document.getElementById('result').textContent = '网络错误, 请稍后再试。';
};

5.发送请求

xhr.send（）

*以上步骤可简化为

// 1. 创建XHR请求对象
const xhr = new XMLHttpRequest();
​
// 2. 配置请求：用什么方式、去哪个地址、是否异步
xhr.open('GET', '#', true);
​
// 3. 设置请求完成后的处理函数（请求成功且完成后自动触发）
xhr.onload = function() {
    // 判断服务器返回的状态码是不是200（成功）
    if (xhr.status === 200) {
        // 成功：把服务器返回的数据打印出来
        console.log('数据:', xhr.responseText);
    } else {
        // 失败：打印错误码（如404、500）
        console.error('请求失败:', xhr.status);
    }
};
​
// 4. 设置网络出错时的处理函数（没网、地址连不上等情况）
xhr.onerror = function() {
    // 把错误信息显示到页面上
    document.getElementById('result').textContent = '网络错误: 无法连接服务器。';
};
​
// 5. 发送请求（这行写到最后，因为要先绑定好上面的监听器）
xhr.send();

//post请求 需要设置请求头

// 创建请求对象
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
//设置请求头
// 注意：只要用POST/PUT/PATCH发送JSON数据，这行就必须写
​
xhr.setRequestHeader('Content-Type', 'application/json');
​
//监听请求状态变化（收到响应触发）
xhr.onreadystatechange = function () {
    // 判断请求是否完成（4 = 完成）
    if (xhr.readyState === 4) {
        // 判断服务器是否返回成功（200 = 成功）
        if (xhr.status === 200) {
            // 成功：把服务器返回的JSON字符串转成JS对象
            const response = JSON.parse(xhr.responseText);
        } else {
            // 失败：收到了服务器的响应，但状态码不是200
            // 例如：403(没权限)、404(地址不存在)、500(服务器出错)
                                    document.getElementById('result').textContent = '请求失败: ' + xhr.status;
        }
    }
};
​
//监听网络错误（完全没收到响应时触发） 
xhr.onerror = function () {
    // 这种情况包括：断网、服务器挂了、域名写错、跨域被拦截
    document.getElementById('result').textContent = '网络错误, 请稍后重试。';
};
​
// 准备要发送的数据
const Data = {
    title: '我学习前端的过程',
    body: '我有在好好写博客, 好好写作业, 好好学习前端这门技术',
};
//发送请求 
//把JS对象转成JSON字符串，然后发送给服务器
xhr.send(JSON.stringify(Data));

Fetch API详解

更简洁的获取发送数据的方式，基于promise

知识点 描述
fetch() 返回一个Promise，Promise代表“未来的结果”
.then() 成功时的回调，第一个拿到response，第二个拿到实际数据
response.ok 布尔值，true表示状态码200-299（成功）
response.status HTTP状态码，和XHR的一样（200,404,500）
response.json() 把响应体解析成JS对象，返回Promise
.catch() 捕获所有错误（网络问题 + throw出来的错误）
基本格式
fetch(url, options)
// url: 请求的地址
// options: 可选参数。用于配置请求方式(如 GET、POST)、请求头(headers)、请求体(body)等。
// (如果不传 options, 默认就是一个 GET 请求。)
// .then() 是 Promise 的方法。用来接收成功执行之后的返回结果。
.then(response => response.json())
// 处理响应对象
// response 是服务器返回的原始响应对象(Response 实例), 包含状态码、头部、正文等。
(不是直接的数据)
// response.json() 是一个异步方法, 用来把返回的 JSON 字符串解析为 JavaScript 对象。
.then(data => {
// 处理响应数据
})
.catch(error => {
// 处理错误
});
// .catch() 是 Promise 的异常捕获方法。
// 如果请求过程中发生网络错误, 或前面的.then()中抛出了错误, 这里就会执行。
// error 是错误对象, 可以用来打印错误日志、提示用户等
使用步骤

//GET请求

//第1步：获取身份凭证（从本地存储拿token）
const token = localStorage.getItem('authToken');
​
//第2步：发起fetch请求（配置请求方式、请求头）
fetch('https://api.example.com/protected/data', {
    method: 'GET',
    headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
    }
})
​
// 第3步：处理响应对象（判断成功/失败，解析数据）
.then(response => {
    if (!response.ok) {
        throw new Error('请求失败: ' + response.status);
    }
    return response.json();
})
​
// 第4步：处理解析后的数据（拿到真正要用的数据）
.then(data => {
    console.log('获取到的数据: ', data);
})
​
//第5步：捕获错误（网络问题 + 手动抛出的错误）
.catch(error => {
    console.error('请求出错: ', error);
});

//POST请求

//第1步：准备要发送的数据
const postData = {
    name: 'Alice',
    email: 'alice@example.com'
};
​
//第2步：发起fetch请求
fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',                             
    // 请求方式改为POST
    headers: {
        'Content-Type': 'application/json',    
        // 告诉服务器发的是JSON
        'Authorization': 'Bearer token'         
        // 身份验证（可选）
    },
    body: JSON.stringify(postData)             
    // 唯一新增：把数据转成JSON字符串发过去
})
​
//第3步：处理响应对象
.then(response => {
    if (!response.ok) {
        throw new Error('提交失败');
    }
    return response.json();                      // 解析服务器返回的数据
})
​
//第4步：处理解析后的数据
.then(data => {
    console.log('服务器返回数据: ', data);
})
​
//第5步：捕获错误
.catch(error => {
    console.error('错误信息: ', error);
});

第三方库：Axios

axios是一个基于Promise的HTTP客户端库，用于发送网络请求。

引入方式

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用步骤

//GET请求

const postData = {
    name: 'Alice',
    email: 'alice@example.com'
};
​
axios.post('https://api.example.com/posts', postData)
    .then(response => {
        console.log('服务器返回:', response.data);
    })
    .catch(error => {
        console.error('提交失败:', error.message);
    });

//POST请求

const postData = {
    name: 'Alice',
    email: 'alice@example.com'
};
​
axios.post('https://api.example.com/posts', postData)
    .then(response => {
        console.log('服务器返回:', response.data);
    })
    .catch(error => {
        console.error('提交失败:', error.message);
    });
# javascript # ajax
Logo
openEuler 社区

openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构

更多推荐

cover

[硬件选型]英飞凌BSC014N06NS参数详解与应用实战

avatar openEuler 社区

k8s-持久化存储，粗浅学习

要使用 StorageClass，我们就得安装对应的自动配置程序，比如我们这里存储后端使用的是 nfs，那么我们就需要使用到一个 nfs-client 的自动配置程序，我们也叫它 Provisioner（制备器），这个程序使我们已经配置好的 nfs 服务器，来自动创建持久卷，也就是自动帮我们创建 PV。有了这两部分信息，Kubernetes就能够根据用户提交的PVC，找到对应的StorageCla

avatar openEuler 社区
cover

linux内核漏洞预警｜Dirty Frag来袭，容器逃逸+Root提权双重威胁

avatar openEuler 社区