前端学习10—Ajax

news2025/5/17 18:32:21

1 AJAX 简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML

通过 AJAX 可以在浏览器中向服务器发送异步请求，最大优势为：无刷新获取数据

AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

优点：

  1. 可以无需刷新页面而与服务器进行通信
  2. 允许根据用户事件（鼠标、键盘、文档等事件）来更新部分页面内容

缺点：

  1. 没有浏览历史，不能回退
  2. 存在跨域问题（同源）
  3. SEO（搜索引擎优化）不友好

1.1 XML 简介

XML（可扩展标记语言），被设计用来传输和存储数据，XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据

比如有个学生数据：
	name = "孙悟空"; age = 18; gender = "男";
用 XML 表示：
	<student>
        <name>孙悟空</name>
        <age>18</age>
        <gender>男</gender>
	</student>

但现在已经被 JSON 取代了

用 JSON 表示：
	{
        "name": "孙悟空",
        "age": 18,
        "gender": "男"
    }

1.2 HTTP 协议请求报文和响应文本结构

HTTP（超文本传输协议），协议详细规定了浏览器与万维网服务器之间相互通信的规则约定

请求报文：

行	    POST  BV1WC4y1b78y?spm_id_from=3  HTTP/1.1
头       Host：atguigu.com
         Cookie：name=guigu
         Content-type：application/x-www-form-urlencoded
         User-Agent：chrome 83
空行
体		username=admin&password=admin（get请求时，请求体为空；post请求时，请求体可以为空）

响应报文：

行	    HTTP/1.1  200  OK
头       Content-type：text/html;charset=utf-8
		 Content-length: 2048
		 Content-encoding: gzip
空行
体		<html>
			<head></head>
			<body>
				<h1>尚硅谷</h1>
			</body>
		 </html>

Chrome 网络控制台查看通信报文

在这里插入图片描述

1.3 Node.js 安装

去官网找相应版本下载安装即可

检验是否安装成功：命令行中输入 node -v

出现 node 安装版本即可

1.4 express 框架

  1. 安装 express 包

    npm init --yes

    npm i express

  2. express 的基本使用

// 1. 引入 express
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request：对请求报文的封装
// response：对响应报文的封装
app.get('/', (request, response) => {
    // 设置响应
    response.send('Hello Express');
});

// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log('服务器已经启动，8000 端口监听中...');
})

终端输入 node espress基本使用.js 运行

浏览器 http://127.0.0.1:8000/ 看到运行结果：
在这里插入图片描述

1.5 nodemon 自动重启工具安装

终端输入：

npm install -g nodemon

终端运行

npx nodemon server.js

2 案例准备

get.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #responseMsg {
            width: 200px;
            height: 200px;
            border: 2px solid peachpuff;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="responseMsg"></div>
</body>

</html>

server.js

// 1. 引入 express
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request：对请求报文的封装
// response：对响应报文的封装
app.get('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应
    response.send('Hello Express');
});

// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log('服务器已经启动，8000 端口监听中...');
})

2.1 请求的基本操作

get.html

<script>
    // 获取元素
    const btn = document.querySelectorAll('button')[0];
    const responseMsg = document.querySelector('#responseMsg');
    // 绑定事件
    btn.addEventListener('click', function() {
        // 1. 创建对象
        const xhr = new XMLHttpRequest();
        // 2. 初始化 设置请求方法和 URL
        xhr.open('GET', 'http://127.0.0.1:8000/server');
        // 3. 发送
        xhr.send();
        // 4. 事件绑定 处理服务端返回来的结果
        xhr.onreadystatechange = function() {
            // 判断（服务器返回了所有的结果）
            if(xhr.readyState === 4) {
                // 判断响应状态码
                // 2xx：成功
                if(xhr.status >= 200 && xhr.status < 300) {
                    console.log(xhr);
                    responseMsg.textContent = xhr.response;
                }
            }
        }
    })
</script>
  • onreadystatechange：监听函数，实例的属性发生变化时，就会执行这个函数
  • readyState：实例对象的当前状态，通信过程中，每当实例对象发生状态变化，他的属性值就会一直改变。只读且只包含以下五种状态
    • 0：XMLHttpRequest 实例已经生成，但是实例的方法还没有被调用
    • 1：方法已经调用，但是实例的方法还没有调用，仍然可以使用实例的方法，设定 HTTP 请求的头信息
    • 2：实例的方法已经调用，并且服务器返回的头信息和状态码已经收到
    • 3：正在接收服务器传来的数据体（body 部分）
    • 4：服务器返回的数据已经完全接收，或者本次接收已经失败
  • status：服务器回应的 HTTP 状态码
    • 200：ok，访问正常
    • 301：永久移动
    • 302：暂时移动
    • 304：未修改
    • 307：暂时重定向
    • 401：未授权
    • 403：禁止访问
    • 404：未发现指定网址
    • 500：服务器发生错误
  • response：服务器返回的数据体（HTTP 回应的 body 部分）

2.2 设置请求参数

// 2. 初始化 设置请求方法和 URL
xhr.open('GET', 'http://127.0.0.1:8000/server?username=andy&password=123');

2.3 发送 Post 请求

html 中发送 POST 请求

// 2. 初始化 设置请求方法和 URL
xhr.open('POST', 'http://127.0.0.1:8000/server?');

server.js 增加 post 请求响应

// 3. 创建路由规则
// request：对请求报文的封装
// response：对响应报文的封装
app.get('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应
    response.send('Hello Express');
});
app.post('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('Hello Ajax Post');
})
  • server.js 文件发生改变的时候，需要重新开启服务

2.4 Post 设置请求体

// 3. 发送
// xhr.send('username=andy&password=123');
xhr.send('username:andy&password:123');

2.5 设置请求头信息

html 中设置请求头

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('name', 'lxlu');

server.js 中设置响应体

// 响应头
response.setHeader('Access-Control-Allow-Headers', '*');
  • setRequestHeader()：设置浏览器发送的 HTTP 请求的头信息，如果该方法多次调用，设定同一个字段，每次调用的值都会被合并成一个单一的值发送

2.6 服务器响应 JSON 数据

server.js

// 可以接收任意类型的请求
app.all('/json-server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 响应一个数据
    const data = {
        name: 'andy',
        age: 18
    };
    // 对对象进行字符串转换
    let str = JSON.stringify(data);
    // 设置响应体
    response.send(str);
})

对接收到的 JSON 数据进行手动转换 JSON.parse()

// 发送请求
const xhr = new XMLHttpRequest();
// 初始化
xhr.open('GET', 'http://127.0.0.1:8000/json-server');
// 发送
xhr.send();
// 事件绑定
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if(xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.response);
            // responseMsg.innerHTML = xhr.response;
            // 手动对数据转换
            let data = JSON.parse(xhr.response);
            responseMsg.innerHTML = data.name;
        }
    }
}

可以设置响应体数据类型，从而避免手动转换

在这里插入图片描述

2.7 IE 缓存问题

IE 缓存问题：IE 浏览器会将 ajax 请求的返回结果作为缓存，如果再遇到相同的 ajax 请求，就直接在缓存中取结果，这样就得不到最新的服务器响应结果（chrom 浏览器可以实时更新）

解决方法：只要每次请求的 url 不一样，IE 就会认为不是同一个请求，就可以重新请求服务器（在 url 后面加上一个时间戳参数）

xhr.open('GET', 'http://127.0.0.1:8000/ie?t=' + Date.now());

在这里插入图片描述

2.8 请求超时于网络异常处理

模拟给服务器发送请求超时的情况，3s 后返回响应结果

app.get('/delay', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应
    setTimeout(() => {
        response.send('网络请求超时');
    }, 3000);
});

请求超时与网络异常的处理

// 超时设置 2s
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function() {
    alert('网络异常，请稍后重试');
}
// 网络异常回调
xhr.onerror = function() {
    alert('你的网络似乎出了点问题')
}
  • timeout：多少毫秒后，如果请求仍然没有得到结果，就会自动终止
  • ontimeout：监听函数，如果发生 timeout 事件，就会执行这个监听函数（timeout 的监听函数）
  • onerror：请求失败的监听函数

2.9 取消请求

取消请求发生在已经发送了请求，但是还没有返回请求结果，这时可以设置取消请求：

<body>
    <button class="send">发送请求</button>
    <button class="cancel">取消请求</button>
</body>
<script>
    const send = document.querySelector('.send');
    const cancel = document.querySelector('.cancel');
    
    let xhr = null;		// 注意这里是用 let，不是 const（const 的值是不能改的）
    send.addEventListener('click', function() {
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://127.0.0.1:8000/delay');
        xhr.send();
    })
    cancel.addEventListener('click', function() {
        xhr.abort();
    })
</script>
  • abort()：终止已经发出的 HTTP 请求，调用这个方法后，readyState 属性变为 4，status 属性变为 0

2.10 重复请求问题

设置一个标识变量 isSending，当点击发送按钮时，判断 isSending 的布尔值，如果为 true，表示正在发送，需要取消请求，创建新的请求

let xhr = null;
// 标识变量
let isSending = false;

send.addEventListener('click', function() {
    if(isSending) {     // 如果正在发送，就取消请求，创建一个新的请求
        xhr.abort();
    }
    xhr = new XMLHttpRequest();
    isSending = true;   // 修改标识变量的值
    xhr.open('GET', 'http://127.0.0.1:8000/delay');
    xhr.send();
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
            // 修改标识变量
            isSending = false;
        }
    }
})
cancel.addEventListener('click', function() {
    xhr.abort();
})

3 jQuery 发送 AJAX 请求

引入 jQuery：(BootCDN --> jquery --> 复制 <script> 标签)

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

get / post 请求： . g e t ( u r l , [ d a t a ] , [ c a l l b a c k ] , [ t y p e ] ) 、 .get(url, [data], [callback], [type])、 .get(url,[data],[callback],[type])、.post(url, [data], [callback], [type])

  • url：请求的 URL 地址
  • data：请求携带的参数
  • callback：载入成功时回调函数
  • type：设置返回内容格式，xml、html、script、json、text、_default
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <title>Document</title>
</head>
<body>
    <h2>jQuery发送AJAX请求</h2>
    <button>GET请求</button>
    <button>POST请求</button>
    <button>通用性方法ajax</button>
</body>
<script>
    // 发送GET请求
    $('button').eq(0).click(function() {
        $.get('http://127.0.0.1:8000/jquery-server', {id: 3, name: 'andy'}, function(data) {
            console.log(data);
        }, 'json');
    })

    // 发送POST请求
    $('button').eq(1).click(function() {
        $.post('http://127.0.0.1:8000/jquery-server', {id: 3, name: 'andy'}, function(data) {
            console.log(data);
        }, 'json');
    })

    // 利用AJAX发送
    $('button').eq(2).click(function(){
        $.ajax({
            // url
            url: 'http://127.0.0.1:8000/jquery-server',
            // 参数
            data: {id: 3, name: 'andy'},
            // 请求类型
            type: 'GET',
            // 响应体结果
            dataType: 'json',
            // 成功的回调
            success: function(data) {
                console.log(data);
            },
            // 超时时间
            timeout: 2000,
            // 失败的回调
            error: function(){
                console.log('出错啦!!')
            },
            // 头信息
            headers: {
                a: 121
            }
        })
    })
</script>
</html>

server.js

// jQuery 服务
app.all('/jquery-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery');
    let data = {
        id: 3, 
        name: 'andy'
    };
    response.send(JSON.stringify(data));
});

4 Axios 发送 AJAX 请求

引入 axios

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios.get(url[, config])

axios.post(url[, data[, config]])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <button>GET请求</button>
    <button>POST请求</button>
    <button>AJAX请求</button>
</body>
<script>
    const btns = document.querySelectorAll('button');

    // 配置 baseUrl
    axios.defaults.baseURL = 'http://127.0.0.1:8000';

    btns[0].onclick = function() {
        // GET 请求
        axios.get('/axios-server', {
            // url 参数
            params: {
                id: 12,
                nickName: 'candy'
            },
            // 请求头信息
            headers: {
                name: 'lxlu',
                age: 18
            }
        }).then((value) => {
            console.log(value);
        });
    }

    btns[1].addEventListener('click', function() {
        // POST 请求
        axios.post('/axios-server',{
                username: 'admin',
                password: 123
            }, {
            params: {
                id: 121,
                nickName: 'kun'
            },
            headers: {
                height: 175,
                weight: 60
            } 
        })
    })

    btns[2].onclick = function() {
        // axios函数发送AJAX请求
        axios({
            method: 'POST',
            url: '/axios-server',
            params: {
                vip: 88,
                level: 15
            },
            headers: {
                a: 100,
                b: 200
            },
            data: {
                username: 'admin',
                password: 'admin'
            }
        }).then( response => {
            // 响应状态码
            console.log(response.status);
            // 响应状态字符串
            console.log(response.statusText);
            // 响应头信息
            console.log(response.headers);
            // 响应体
            console.log(response.data);
        })
    }
</script>
</html>

server.js

// axios 服务
app.all('/axios-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery');
    let data = {
        id: 3, 
        name: 'andy'
    };
    response.send(JSON.stringify(data));
});

5 fetch 发送 AJAX 请求

fetch无需安装，是window的内置方法；fetch对象属于全局对象，可以直接调用，它的返回结果是一个 promise 对象，但是请求的数据在第二个 .then 中才能获取，error可以使用catch统一进行处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>AJAX请求</button>
</body>
<script>
    const btn = document.querySelector('button');
    btn.onclick = function(){
        fetch('http://127.0.0.1:8000/fetch-server', {
            // 请求方法
            method: 'POST',
            // 请求头
            headers: {
                name: 'lxlu'
            },
            // 请求体
            body: 'username=admin&password=123'
        }).then(response => {
            // return response.text();
            return response.json();
        }).then(response => {
            console.log(response);
        });
    }
</script>
</html>

server.js

// fetch 服务
app.all('/fetch-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    let data = {
        id: 3, 
        name: 'andy'
    };
    response.send(JSON.stringify(data));
});

6 同源策略

同源策略是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的javascrip脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制。

同源：协议、域名、端口号必须相同

违背同源策略就是跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello</h1>
    <button>点击获取用户数据</button>
</body>
<script>
    const btn = document.querySelector('button');
    btn.onclick = function() {
        const xhr = new XMLHttpRequest();
        // 因为满足同源策略,所以 url 可以简写
        xhr.open('GET', '/data');
        xhr.send();
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
                if(xhr.status >= 200 && xhr.status < 300) {
                    console.log(xhr.response);
                }
            }
        }
    }
</script>
</html>

const express = require('express');

const app = express();

app.get('/home', (request, response) => {
    // 响应一个页面
    response.sendFile(__dirname + '/home.html');
});

app.get('/data', (request,response) => {
    response.send('用户数据');
})

app.listen(9000, ()=>{
    console.log('服务已经启动');
})

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6.1 jsonp

6.2 CORS

通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2333040.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

list的常见接口使用

list的常见接口使用

今天&#xff0c;我们来讲解一下C关于STL标准库中的一个容器list的常见接口。 在我们之前c语言数据结构中&#xff0c;我们已经了解过了关于链表的知识点了&#xff0c;那么对于现在理解它也是相对来说比较容易的了。 数据结构--双向循环链表-CSDN博客 1. 定义与包含头文件 …
阅读更多...
一维差分数组

一维差分数组

2.一维差分 - 蓝桥云课 问题描述 给定一个长度为 n 的序列 a。 再给定 m 组操作&#xff0c;每次操作给定 3 个正整数 l, r, d&#xff0c;表示对 a_{l} 到 a_{r} 中的所有数增加 d。 最终输出操作结束后的序列 a。 ​​Update​​: 由于评测机过快&#xff0c;n, m 于 20…
阅读更多...
再次重拾jmeter之踩坑

再次重拾jmeter之踩坑

1.添加“csv数据文件设置”&#xff0c;运行时提示 java.lang.IllegalArgumentException: Filename must not be null or empty检查多次后才发现因为我运行的是整个线程组&#xff0c;所以对应http请求下不能包括空的csv文件 2. 填写ip时不能加/&#xff0c;要在路径里加&…
阅读更多...
4-6记录（B树）

4-6记录（B树）

找左边右下或者右边左下 转化成了前驱后继的删除 又分好几种情况&#xff1a; 1. 只剩25&#xff0c;小于2&#xff0c;所以把父亲拉到25旁边&#xff0c;兄弟的70顶替父亲 对于25&#xff0c;25的后继就是70&#xff0c;25后继的后继是71&#xff08;中序遍历) 2. 借左子树…
阅读更多...
06软件测试需求分析案例-添加用户

06软件测试需求分析案例-添加用户

给职业顾问部的老师添加用户密码后&#xff0c;他们才能登录使用该软件。只有admin账户具有添加用户、修改用户信息、删除用户的权利。admin是经理或团队的第一个人的账号&#xff0c;后面招一个教师就添加一个账号。 通读需求是提取信息&#xff0c;提出问题&#xff0c;输出…
阅读更多...
Nacos服务发现和配置管理

Nacos服务发现和配置管理

目录 一、Nacos概述 1. Nacos 简介 2. Nacos 特性 2.1 服务发现与健康监测 2.2 动态配置管理 2.3 动态DNS服务 2.4 其他关键特性 二、 服务注册和发现 2.1 核心概念 2.2 Nacos注册中心 2.3 Nacos单机模式 2.4 案例——服务注册与发现 2.4.1 父工程 2.4.2 order-p…
阅读更多...
操作系统 3.1-内存使用和分段

操作系统 3.1-内存使用和分段

如何简单使用内存 这张幻灯片展示了计算机如何开始执行程序的基本过程&#xff0c;涉及到存储器、指令寄存器&#xff08;IR&#xff09;、运算器和控制器等计算机组件。 存储器&#xff1a;程序被加载到内存中。图中显示了一个指令 mov ax, [100]&#xff0c;它的作用是将内存…
阅读更多...
禅道MCP Server开发实践与功能全解析

禅道MCP Server开发实践与功能全解析

一、简介 1、MCP Server核心定义 MCP Server&#xff08;Meta Command Protocol Server&#xff09;是一种基于客户端-服务器架构的轻量级服务程序&#xff0c;采用统一的mcp协议格式&#xff0c;通过连接多样化数据源和工具为AI应用提供扩展能力。它作为中间层&#xff0c;实…
阅读更多...
GNSS静态数据处理

GNSS静态数据处理

1 安装数据处理软件&#xff1a;仪器之星&#xff08;InStar &#xff09;和 Trimble Business Center 做完控制点静态后&#xff0c;我们需要下载GNSS数据&#xff0c;对静态数据进行处理。在处理之前需要将相关软件在自己电脑上安装好&#xff1a; 仪器之星&#xff08;InS…
阅读更多...
java家政APP源码，家政预约平台源码，家电上门维修、家电上门清洗

java家政APP源码，家政预约平台源码，家电上门维修、家电上门清洗

家政上门预约服务APP源码&#xff0c;开发功能涵盖了用户注册与登录、家政服务分类与选择、预约管理、支付与交易、地图与导航、评价与反馈、个人信息管理、消息通知、营销工具以及数据分析等多个方面。这些功能的实现不仅提高了家政服务的便捷性和效率&#xff0c;还为用户提供…
阅读更多...
【LLM基础】Megatron-LM相关知识（主要是张量并行机制）

【LLM基础】Megatron-LM相关知识（主要是张量并行机制）

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了Megatron-LM的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于Megatron-LM相关材料进行的&#xff0c;每个知识点的修正和深入…
阅读更多...
动力电池自动点焊机：新能源汽车制造的智能焊接利器

动力电池自动点焊机：新能源汽车制造的智能焊接利器

在新能源汽车产业蓬勃发展的今天&#xff0c;动力电池作为其核心部件&#xff0c;其性能与安全性直接关系到整车的续航里程和使用寿命。而动力电池的制造过程中&#xff0c;焊接工艺是至关重要的一环。这时&#xff0c;动力电池自动点焊机便以其高效、精准、智能的特点&#xf…
阅读更多...
linux shell编程之条件语句（二）

linux shell编程之条件语句（二）

目录 一. 条件测试操作 1. 文件测试 2. 整数值比较 3. 字符串比较 4. 逻辑测试 二. if 条件语句 1. if 语句的结构 (1) 单分支 if 语句 (2) 双分支 if 语句 (3) 多分支 if 语句 2. if 语句应用示例 (1) 单分支 if 语句应用 (2) 双分支 if 语句应用 (3) 多分支 …
阅读更多...
uniapp uni-collapse动态切换数据时高度不能自适应

uniapp uni-collapse动态切换数据时高度不能自适应

需单独调用方法更新 this.$nextTick(() > {if (this.$refs.collapseBox) {this.$refs.collapseBox.resize()} })
阅读更多...
递归？递推？

递归？递推？

前言&#xff1a;递归、递推是两种非常常见基础的算法了&#xff0c;但我之前忘了从这基础的先讲起了&#xff0c;大家应该也都略有了解吧&#xff01;今天突然想写点相关延伸内容&#xff0c;所以还是完整介绍一些吧 递归 递归是一种通过函数调用自身解决问题的算法。在递归…
阅读更多...
蓝桥杯--结束

蓝桥杯--结束

冲刺题单 基础 一、简单模拟&#xff08;循环数组日期进制&#xff09; &#xff08;一&#xff09;日期模拟 知识点 1.把月份写为数组&#xff0c;二月默认为28天。 2.写一个判断闰年的方法&#xff0c;然后循环年份的时候判断并更新二月的天数 3.对于星期数的计算&#…
阅读更多...
【ChCore Lab 01】Bomb Lab 拆炸弹实验（ARM汇编逆向工程）

【ChCore Lab 01】Bomb Lab 拆炸弹实验（ARM汇编逆向工程）

文章目录 1. 前言2. 实验代码版本问题3. 关于使用问题4. 宏观分析5. read_line 函数介绍6. phase_0 函数6.1. read_int 函数6.2. 回到 phase_0 函数继续分析6.3. 验证结果 7. phase_1 函数7.2. 验证结果 8. phase_2 函数8.1. read_8_numbers 函数8.2. 回到 phase_2 函数继续分析…
阅读更多...
二分答案----

二分答案----

二分答案 - 题目详情 - HydroOJ 问题描述 给定一个由n个数构成的序列a&#xff0c;你可以进行k次操作&#xff0c;每次操作可以选择一个数字&#xff0c;将其1&#xff0c;问k次操作以后&#xff0c;希望序列里面的最小值最大。问这个值是多少。 输入格式 第一行输入两个正…
阅读更多...
Transformer多卡训练初始化分布式环境：(backend=‘nccl‘)

Transformer多卡训练初始化分布式环境：(backend=‘nccl‘)

Transformer多卡训练初始化分布式环境：(backend=‘nccl’) dist.init_process_group(backend=nccl)在多卡环境下初始化分布式训练环境，并为每个进程分配对应的 GPU 设备。下面为你逐行解释代码的含义： 1. 初始化分布式进程组 try:dist.init_process_group(backend=nccl) e…
阅读更多...
Kubernetes集群环境搭建与初始化

Kubernetes集群环境搭建与初始化

1.Kubernetes简介&#xff1a; Kubernetes是Google开源的一个容器编排引擎&#xff0c;它支持自动化部署、大规模可伸缩、应用容器化管理。在生产环境中部署一个应用程序时&#xff0c;通常要部署该应用的多个实例以便对应用请求进行负载均衡。 在Kubernetes中&#xff0c;我…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023