前端学习笔记-Ajax篇

第1章:原生AJAX

1.1Ajax简介

AAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML。

通过 AAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。

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

1.2 XML 简介

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.3AJAX的特点


1.3.1 AJAX 的优点

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

1.3.2 AJAX 的缺点

  1. 没有浏览历史,不能回退
  2. 存在跨域问题(同源)
  3. SEO 不友好

//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 端口监听中......");
});

1.4 AJAX 的使用

1.4.1 核心对象

XMLHttpRequest AJAX 的所有操作都是通过该对象进行的。

1.4.2 使用步骤

1) 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
2) 设置请求信息
xhr.open(method, url);
// 可以设置请求头,一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3) 发送请求
xhr.send(body) //get 请求不传 body 参数,只有 post 请求使用
4) 接收响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}
}

 关于JSON请求的相关设置

//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 AJAX');
});
//可以接受任意类型的请求
app.all('/server',(request,response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//设置响应体response.send('HELLO AJAX POST');
});
//可以接受任意类型的请求
app.all('/json-server',(request,response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//响应一个数据const data = {name:'hjj'};//对对象进行字符串转换const str = JSON.stringify(data);//设置响应体response.send(str);
});//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动,8000 端口监听中......");
});
//JSON.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSON响应</title><style>#result{width: 200px;height: 100px;border: solid 1px #903;}</style>
</head>
<body><div id="result"></div><script>//获取元素对象const result = document.getElementById("result");//绑定键盘按下事件window.onkeydown = function(){//1.发送请求const xhr = new XMLHttpRequest();//设置相应体的数据类型xhr.responseType = 'json';//2.初始化xhr.open('GET','http://127.0.0.1:8000/json-server');//3.发送xhr.send();//4.事件绑定 处理服务器返回的结果xhr.onreadystatechange = function(){//判断(服务器返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 2xx就是成功的状态if(xhr.status >= 200 &&xhr.status < 300){//处理结果 行 头 空行 体//响应行//result.innerHTML = xhr.response;//1.手动对数据转换//let data = JSON.parse(xhr.response);//result.innerHTML = data.name;//console.log(xhr.response);//2.自动对数据转换console.log(xhr.response);result.innerHTML=xhr.response.name;}}}}</script>
</body>
</html>

1.4.3 解决 IE 缓存问题

问题:
在一些浏览器中 (IE), 由于缓存机制的存在, ajax 只会发送的第一次请求,剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式:
浏览器的缓存是根据 url 地址来记录的,所以我们只需要修改 url 地址即可避免缓存问题
xhr.open("get","/testAJAX?t="+Date.now());
//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 AJAX');
});
//可以接受任意类型的请求
app.all('/server',(request,response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//设置响应体response.send('HELLO AJAX POST');
});
//可以接受任意类型的请求
app.all('/json-server',(request,response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//响应一个数据const data = {name:'hjj'};//对对象进行字符串转换const str = JSON.stringify(data);//设置响应体response.send(str);
});
//针对IE缓存
app.get('/ie',(request,response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应体response.send('HELLO IE');
});
//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动,8000 端口监听中......");
});
//4-IE缓存.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>#result{width: 200px;height: 100px;border: solid 1px #258;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>//获取元素const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');//绑定事件btn.addEventListener('click',function(){//1.发送请求const xhr = new XMLHttpRequest();//2.初始化xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());//3.发送xhr.send();//4.事件绑定 处理服务器返回的结果xhr.onreadystatechange = function(){//判断(服务器返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 2xx就是成功的状态if(xhr.status >= 200 &&xhr.status < 300){//处理结果 行 头 空行 体//响应行result.innerHTML=xhr.response;}}}})</script>
</body>
</html>

1.4.4 AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState
0: 表示 XMLHttpRequest 实例已经生成,但是 open() 方法还没有被调用。
1: 表示 send() 方法还没有被调用,仍然可以使用 setRequestHeader() ,设定 HTTP 请求的头信息。
2: 表示 send() 方法已经执行,并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收,或者本次接收已经失败了
//网络请求超时与网络异常.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网络请求超时与网络异常</title><style>#result{width: 200px;height: 100px;border: solid 1px #258;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>//获取元素const btn = document.getElementsByTagName('button')[0];const result = document.querySelector('#result');//绑定事件btn.addEventListener('click',function(){//1.发送请求const xhr = new XMLHttpRequest();//超时设置 2s 设置xhr.timeout = 2000;//超时回调xhr.ontimeout = function(){alert("网络异常,请稍后重试哦bb~")}//网络异常回调xhr.onerror = function(){alert("你的网络似乎出了一些问题哦bb~")}//2.初始化xhr.open("GET",'http://127.0.0.1:8000/delay');//3.发送xhr.send();//4.事件绑定 处理服务器返回的结果xhr.onreadystatechange = function(){//判断(服务器返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 2xx就是成功的状态if(xhr.status >= 200 &&xhr.status < 300){//处理结果 行 头 空行 体//响应行result.innerHTML=xhr.response;}}}})</script>
</body>
</html>
//6-取消请求.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>取消请求</title>
</head>
<body><button>点击发送请求</button><button>点击取消请求</button><script>//获取元素对象const btns = document.querySelectorAll('button');let x=null;btns[0].onclick = function(){x = new XMLHttpRequest();x.open("GET",'http://127.0.0.1:8000/delay');x.send();}//取消请求abortbtns[1].onclick = function(){x.abort();}</script>
</body>
</html>
//7-重复请求的问题.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>取消请求</title>
</head>
<body><button>点击发送请求</button><script>//获取元素对象const btns = document.querySelectorAll('button');let x=null;//标识变量let isSending = false;//是否正在发送AJAX请求btns[0].onclick = function(){//判断标示变量if(isSending) x.abort();//如果正在发送 则取消该请求 创建一个新的请求x = new XMLHttpRequest();//修改 表示变量的值isSending=true;x.open("GET",'http://127.0.0.1:8000/delay');x.send();x.onreadystatechange = function(){if(x.readyState ===4){//修改标识变量isSending = false;}}}//取消请求abortbtns[1].onclick = function(){x.abort();}</script>
</body>
</html>
//上面几段代码涉及到的js文件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 AJAX');
});
//可以接受任意类型的请求
app.all('/server',(request,response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//设置响应体response.send('HELLO AJAX POST');
});
//可以接受任意类型的请求
app.all('/json-server',(request,response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//响应一个数据const data = {name:'hjj'};//对对象进行字符串转换const str = JSON.stringify(data);//设置响应体response.send(str);
});
//针对IE缓存
app.get('/ie',(request,response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应体response.send('HELLO IE');
});
//延时响应
app.get('/delay',(request,response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');setTimeout(()=>{//设置响应体response.send('延时响应');},3000)
});
//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动,8000 端口监听中......");
});

2 章:jQuery 中的 AJAX

2.1 get 请求

$.get(url, [data], [callback], [type])
url: 请求的 URL 地址。
data: 请求携带的参数。
callback: 载入成功时回调函数。
type: 设置返回内容格式, xml, html, script, json, text, _default
//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 AJAX');
});//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动,8000 端口监听中......");
});
//GET.html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX GET 请求</title><style>#result{width: 200px;height: 100px;border: solid 1px #90b;}</style>
</head>
<body><button>点击发送请求</button><div id="result"></div><script>//获取button元素const btn = document.getElementsByTagName('button')[0];const result = document.getElementById("result");//绑定事件btn.onclick = function(){//1.创建对象const xhr = new XMLHttpRequest();//2.初始化 设置请求方法和urlxhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');//3.发送xhr.send();//4.事件绑定 处理服务器返回的结果//on when 当。。。的时候//readystate 是 xhr对象中的属性,表示状态0 1 2 3 4//change 改变xhr.onreadystatechange = function(){//判断(服务器返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 2xx就是成功的状态if(xhr.status >= 200 &&xhr.status < 300){//处理结果 行 头 空行 体//1.响应行// console.log(xhr.status);//状态码// console.log(xhr.statusText);//状态字符串// console.log(xhr.getAllResponseHeaders());//所有响应头// console.log(xhr.response);//响应体result.innerHTML = xhr.response;}}}}</script>
</body>
</html>

2.2 post 请求

$.post(url, [data], [callback], [type])
url: 请求的 URL 地址。
data: 请求携带的参数。
callback: 载入成功时回调函数。
type: 设置返回内容格式, xml, html, script, json, text, _default
//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 AJAX');
});app.post('/server',(request,response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//设置响应体response.send('HELLO AJAX POST');
});//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动,8000 端口监听中......");
});

//POST.html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX POST 请求</title><style>#result{width: 200px;height: 100px;border: solid 1px #903;}</style>
</head>
<body><div id="result"></div><script>//获取元素对象const result = document.getElementById("result");//绑定事件result.addEventListener("mouseover",function(){//1.创建对象const xhr = new XMLHttpRequest();//2.初始化 设置请求方法和urlxhr.open('POST','http://127.0.0.1:8000/server');//3.发送xhr.send('a=100&b=200&c=300');//4.事件绑定 处理服务器返回的结果xhr.onreadystatechange = function(){//判断(服务器返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 2xx就是成功的状态if(xhr.status >= 200 &&xhr.status < 300){//处理结果 行 头 空行 体//1.响应行result.innerHTML = xhr.response;}}}})</script>
</body>
</html>

2.3 设置请求头信息

【open后,send前】

//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 AJAX');
});
//可以接受任意类型的请求
app.all('/server',(request,response)=>{//设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//设置响应体response.send('HELLO AJAX POST');
});//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动,8000 端口监听中......");
});
//POST.html文件修改部分<body><div id="result"></div><script>//获取元素对象const result = document.getElementById("result");//绑定事件result.addEventListener("mouseover",function(){//1.创建对象const xhr = new XMLHttpRequest();//2.初始化 设置请求方法和urlxhr.open('POST','http://127.0.0.1:8000/server');//设置请求头xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.setRequestHeader('name','hjj');//3.发送xhr.send('a=100&b=200&c=300');//4.事件绑定 处理服务器返回的结果xhr.onreadystatechange = function(){//判断(服务器返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 2xx就是成功的状态if(xhr.status >= 200 &&xhr.status < 300){//处理结果 行 头 空行 体//1.响应行result.innerHTML = xhr.response;}}}})</script>
</body>

3 章:跨域

3.1 同源策略

同源策略 (Same-Origin Policy) 最早由 Netscape 公司提出,是浏览器的一种安全策略。
同源: 协议、域名、端口号 必须完全相同。违背同源策略就是跨域。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>同域请求</title>
</head>
<body><h1>hjj</h1><button>点击获取用户数据</button><script>const btn = document.querySelector('button')btn.onclick = function(){const x = new XMLHttpRequest();//因为这里是同域问题,所以url可以简写x.open("GET",'/data');//发送x.send();//检查状态x.onreadystatechange = function(){if(x.readyState === 4){if(x.status >= 200 && x.status < 300){console.log(x.response);}}}}</script>
</body>
</html>
//server.js
const express = require('express');
const app = express();
app.get('/home',(request,response)=>{//响应一个页面response.sendFile(__dirname+'/index.html');
});
app.get('/data',(request,response)=>{response.send('用户数据');
});
app.listen(9000,()=>{console.log("服务已经启动...");
});

3.2 如何解决跨域

3.2.1 JSONP

1.JSONP 是什么
JSONP(JSON with Padding) ,是一个非官方的跨域解决方案,纯粹凭借程序员的聪明才智开发出来,只支持 get 请求。
2.JSONP 怎么工作的?
在网页有一些标签天生具有跨域能力,比如: img link iframe script
JSONP 就是利用 script 标签的跨域能力来发送请求的
3. JSONP 的使用
27.尚硅谷_AJAX-jsonp的实现原理_哔哩哔哩_bilibili
1. 动态的创建一个 script 标签
        var script = document.createElement("script");
2. 设置 script src ,设置回调函数
        script.src = "http://localhost:3000/testAJAX?callback=abc";
        function abc(data) {
                alert(data.name);
        };
3. script 添加到 body
        document.body.appendChild(script);
4. 服务器中路由的处理
        router.get("/testAJAX" , function (req , res) {
        console.log("收到请求 ");
        var callback = req.query.callback;
        var obj = {
                name:"孙悟空",
                age:18
        }
        res.send(callback+"("+JSON.stringify(obj)+")");
        });
4.jQuery 中的 JSONP
<!DOCTYPE html >
< html lang= "en" >
< head >
        < meta charset= "UTF-8" >
        < title >Title</ title >
</ head >
< body >
        < button id= "btn" > 按钮 </ button >
        < ul id= "list" ></ ul >
        < script type= "text/javascript" src= "./jquery-1.12.3.js" ></ script >
        < script type= "text/javascript" >
                window .onload = function () {
                        var btn = document . getElementById ( 'btn' )
                        btn .onclick = function () {
$ . getJSON ( "http://api.douban.com/v2/movie/in_theaters?callback=?" , function
(data) {
console . log (data);
// 获取所有的电影的条目
var subjects = data.subjects;
// 遍历电影条目
for ( var i = 0 ; i < subjects . length ; i ++){
$ ( "#list" ). append ( "<li>" +
subjects [ i ].title+ "<br />" +
"<img src= \" " + subjects [ i ].images.large+ " \" >" +
"</li>" );
}
});
}
}
</ script >
</ body >
</ html >

3.2.2 CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
30.尚硅谷_AJAX-设置CORS响应头实现跨域_哔哩哔哩_bilibili
1.CORS 是什么?
CORS Cross-Origin Resource Sharing ),跨域资源共享。 CORS 是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get 和 post 请求。
跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
2.CORS 怎么工作的?
CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应放行。
3.CORS 的使用
主要是服务器端的设置:
        router.get("/testAJAX" , function (req , res) {
                //通过 res 来设置响应头,来允许跨域请求
                //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
                res.set("Access-Control-Allow-Origin","*");
                res.send("testAJAX 返回的响应");
        });

 4.安装nodemon报错记录

PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> Get-ExecutionPolicy
Restricted
PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> Set-ExecutionPolicy RemoteSigned
PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> nodemon server.js  
[nodemon] 3.1.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node server.js`
node:internal/modules/cjs/loader:1137throw err;^Error: Cannot find module 'express'
Require stack:
- C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX\server.jsat Module._resolveFilename (node:internal/modules/cjs/loader:1134:15)at Module._load (node:internal/modules/cjs/loader:975:27)at Module.require (node:internal/modules/cjs/loader:1225:19)at require (node:internal/modules/helpers:177:18)at Object.<anonymous> (C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX\server.js:2:17)at Module._compile (node:internal/modules/cjs/loader:1356:14)at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)at Module.load (node:internal/modules/cjs/loader:1197:32)at Module._load (node:internal/modules/cjs/loader:1013:12)at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12) {code: 'MODULE_NOT_FOUND',requireStack: [ 'C:\\Users\\jinju\\Desktop\\前端学习\\练习版本\\AJAX\\原生AJAX\\server.js' ]
}Node.js v18.19.0
[nodemon] app crashed - waiting for file changes before starting...
npm install express
PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> npm install expressadded 65 packages, and audited 66 packages in 7s13 packages are looking for fundingrun `npm fund` for detailsfound 0 vulnerabilities
PS C:\Users\jinju\Desktop\前端学习\练习版本\AJAX\原生AJAX> nodemon server.js
[nodemon] 3.1.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node server.js`
服务已经启动,8000 端口监听中......

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【Python爬虫实战】DrissionPage 与 ChromiumPage:高效网页自动化与数据抓取的双利器

&#x1f308;个人主页&#xff1a;易辰君-CSDN博客 &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html ​ 目录 前言 一、DrissionPage简介 &#xff08;一&#xff09;特点 &#xff08;二&#xff09;安装 &#xff08;三…

Halcon基于laws纹理特征的SVM分类

与基于区域特征的 SVM 分类不同&#xff0c;针对图像特征的 SVM 分类的算子不需要直接提取 特征&#xff0c;下面介绍基于 Laws 纹理特征的 SVM 分类。 纹理在计算机视觉领域的图像分割、模式识别等方面都有着重要的意义和广泛的应 用。纹理是指由于物体表面的物理属性不同所…

Netty篇(入门编程)

目录 一、Hello World 1. 目标 2. 服务器端 3. 客户端 4. 流程梳理 &#x1f4a1; 提示 5. 运行结果截图 二、Netty执行流程 1. 流程分析 2. 代码案例 2.1. 引入依赖 2.2. 服务端 服务端 服务端处理器 2.3. 客户端 客户端 客户端处理器 2.4. 代码截图 一、Hel…

从0开始学习机器学习--Day14--如何优化神经网络的代价函数

在上一篇文章中&#xff0c;解析了神经网络处理分类问题的过程&#xff0c;类似的&#xff0c;在处理多元分类问题时&#xff0c;神经网络会按照类型分成多个输出层的神经元来表示&#xff0c;如下&#xff1a; 处理4个分类问题时的神经网络 我们可以看到&#xff0c;相较于之…

除草机器人算法以及技术详解!

算法详解 图像识别与目标检测算法 Yolo算法&#xff1a;这是目标检测领域的一种常用算法&#xff0c;通过卷积神经网络对输入图像进行处理&#xff0c;将图像划分为多个网格&#xff0c;每个网格生成预测框&#xff0c;并通过非极大值抑制&#xff08;NMS&#xff09;筛选出最…

Android MavenCentral 仓库更新问题

MavenCentral 仓库更新问题 前言正文一、Maven central repository的账户迁移二、获取加密账户信息三、问题和解决方式① 问题1② 解决1③ 问题2④ 解决2 前言 在去年的3、4月份的时候我发布了一个开源库EasyView&#xff0c;在MavenCentral上&#xff0c;可以说当时发布的时候…

腾讯为什么支持开源?

今天看到一条新闻&#xff0c;感觉腾讯在 AI 大模型方面确实挺厉害的&#xff0c;符合它低调务实的风格&#xff0c;在不知不觉中一天竟然开源了两个核心的&#xff0c;重要的 AI 大模型。 据新闻报道&#xff0c;11月 5 日&#xff0c;腾讯混元宣布最新的 MoE 模型“混元 Larg…

学习了,踩到一个坑!

前言 踩坑了啊&#xff0c;最近踩了一个 lombok 的坑&#xff0c;有点意思&#xff0c;给你分享一波。 我之前写过一个公共的服务接口&#xff0c;这个接口已经有好几个系统对接并稳定运行了很长一段时间了&#xff0c;长到这个接口都已经交接给别的同事一年多了。 因为是基…

『Django』APIView基于类的用法

点赞 关注 收藏 学会了 本文简介 上一篇文章介绍了如何使用APIView创建各种请求方法&#xff0c;介绍的是通过函数的方式写接口。 本文要介绍 Django 提供的基于类&#xff08;Class&#xff09;来实现的 APIView 用法&#xff0c;代码写起来更简单。 APIView基于类的基…

CentOS系统查看CPU、内存、操作系统等信息

Linux系统提供了一系列命令可以用来查看系统硬件信息&#xff0c;如CPU的物理个数、核数、逻辑CPU数量、内存信息和操作系统版本。 查看物理CPU、核数和逻辑CPU 在多核、多线程的系统中&#xff0c;了解物理CPU个数、每个物理CPU的核数和逻辑CPU个数至关重要。超线程技术进一步…

DNS配置

1.搭建dns服务器能够对自定义的正向或者反向域完成数据解析查询。 2.配置从DNS服务器&#xff0c;对主dns服务器进行数据备份。 options {listen-on port 53 { 192.168.111.130; };directory "/var/named";allow-query { any;};zone "openlab.com&qu…

【WebRTC】WebRTC的简单使用

目录 1.下载2.官网上的使用3.本地的使用 参考&#xff1a; 【webRTC】一、windows编译webrtc Windows下WebRTC编译 1.下载 下载时需要注意更新python的版本和网络连接&#xff0c;可以先试试ping google。比较关键的步骤是 cd webrtc-checkout set https_proxy127.0.0.1:123…

使用axois自定义基础路径,自动拼接前端服务器地址怎么办

请求路径&#xff1a; http://localhost:5173/http://pcapi-xiaotuxian-front-devtest.itheima.net/home/category/head 很明显多拼接了路径地址 查看基础路径文件发现&#xff1a; //axios基础封装 import axios from axiosconst httpInstance axios.create({baseURL: /h…

第J5周:DenseNet+SE-Net实战

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 任务&#xff1a; ●1. 在DenseNet系列算法中插入SE-Net通道注意力机制&#xff0c;并完成猴痘病识别 ●2. 改进思路是否可以迁移到其他地方呢 ●3. 测试集acc…

力扣最热一百题——杨辉三角

目录 题目链接&#xff1a;118. 杨辉三角 - 力扣&#xff08;LeetCode&#xff09; 题目描述 示例 提示: 解法一&#xff1a;利用特性构建杨辉三角 1. 结果存储结构&#xff1a; 2. 初始化和循环遍历每一层&#xff1a; 3. 构建每一层&#xff1a; 4. 填充中间的元素&…

道品科技智慧农业中的自动气象检测站

随着科技的进步&#xff0c;智慧农业已经成为现代农业发展的重要方向。农业自动气象检测站作为智慧农业的一个关键组成部分&#xff0c;发挥着不可或缺的作用。本文将从工作原理、功能特点、应用场景以及主要作用等方面对农业自动气象检测站进行深入探讨。 ## 一、工作原理 农…

Android——多线程、线程通信、handler机制

Android——多线程、线程通信、handler机制 模拟网络请求&#xff0c;会阻塞主线程 private String getStringForNet() {StringBuilder stringBuilder new StringBuilder();for (int i 0; i < 100; i) {stringBuilder.append("字符串" i);}try {Thread.sleep(…

练习LabVIEW第三十三题

学习目标&#xff1a; 刚学了LabVIEW&#xff0c;在网上找了些题&#xff0c;练习一下LabVIEW&#xff0c;有不对不好不足的地方欢迎指正&#xff01; 第三十三题&#xff1a; 用labview编写一个判断素数的程序 开始编写&#xff1a; LabVIEW判断素数&#xff0c;首先要搞…

我要精通前端-布局方式理解总结

一、浮动 1、传统网页布局的三种方式 ​CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)&#xff1a; 1.普通流&#xff08;标准流&#xff09; 2.浮动 3.定位 这三种布局方式都是用来摆放盒子的&#xff0c;盒子摆放到合适位置&#xff0c;布局自然就完成了…

C-DTL698电表 转 IEC61850 协议项目案例

目录 1 案例说明 2 VFBOX网关工作原理 3 准备工作 4 配置VFBOX网关 5 用IEC61850协议转发数据 6 网关使用多个逻辑设备和逻辑节点的方法 7 其他说明 8 案例总结 1 案例说明 设置网关采集DLT698电表数据数据把采集的数据转成IEC61850协议转发给其他系统。 2 VFBOX网关…