前端架构师之01_JavaScript_Ajax

1 Web基础知识

1.1 Web服务器

  • Web服务器又称为网站服务器，主要用于提供网上信息浏览服务。
  • 常见的Web服务器软件有Apache HTTP Server（简称Apache）、Nginx等。

浏览器与服务器交互

  • 在Web服务器中，请求资源又分为静态资源和动态资源。
  • 静态资源的特点：只要服务器没有修改这些文件，客户端每次请求到的都是同样的内容。
  • 动态资源的特点是内容可以动态发生变化，每次请求都需要计算处理。

服务器端Web开发常用的技术有哪些？PHP、Java、ASP.NET、node.js

1.2 HTTP协议

  • HTTP（HyperText Transfer Protocol）全称为超文本传输协议。
  • 用于规范客户端和服务器之间以指定的格式进行数据交互。

HTTP是一种基于“请求”和“响应”的协议。

当客户端与服务器建立连接后：

  • 客户端（浏览器）向服务器端发送一个请求，这个请求称为HTTP请求。
  • 服务器接收到请求后做出响应，称为HTTP响应。

如何查看HTTP消息？借助浏览器的开发者工具。操作步骤：

  • ① 打开开发者工具。
  • ② 切换到Network选项。
  • ③ 刷新网页。

HTTP协议

  • General表示基本信息。
  • Response Headers表示响应头。
  • Request Headers表示请求头。
  • 单击Response Headers或Request Headers右边的view source可以查看消息头的源格式。
1.2.1 请求消息
  • 请求行
  • 请求头
  • 实体内容
// 请求行
// GET / HTTP/1.1
// 请求头
// Host: www.itheima.com
// Connection: keep-alive	
// User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML,…
// Upgrade-Insecure-Requests: 1
// Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/ …
// Accept-Encoding: gzip, deflate
// Accept-Language: zh-CN,zh;q=0.9// 请求行
// POST /form.php HTTP/1.1
// 请求头
// Host: localhost
// Content-Type: application/x-www-form-urlencoded
// Content-Length: 20
// 请求实体
// user=Jim&pass=123456

请求行的组成

  • 请求方式：有许多种，如GET是浏览器打开网页默认使用的方式，其他常用的还有POST方式。
  • 请求资源路径：是指URL地址中域名右边包括参数的部分，例如“/admin/save.php?id=1”。
  • HTTP版本：如HTTP/1.1、HTTP/1.0

注：请求行各组成部分之间，使用空格隔开。

请求头

  • 请求头的作用：请求头位于请求行之后，主要用于向服务器传递附加消息。
  • 请求头的组成：都是由头字段名称和对应的值构成，中间用冒号“:”和空格分隔。
  • 举例：浏览器可接受的数据类型、压缩方式、语言以及系统环境。

实体内容

  • 内容编码：利用请求头Content-Type描述。编码格式按照<form>标签的enctype属性来设定。默认值为application/x-www-form-urlencoded。文件上传为multipart/form-data。
  • 内存长度：利用请求头Content-Length描述。
1.2.2 响应消息
  • 响应状态行
  • 响应头
  • 实体内容
// 响应状态行
// HTTP/1.1 200 OK
// 响应头
// Date: Thu, 02 Nov 2017 06:22:27 GMT
// Server: Apache/2.4.23 (Win64) OpenSSL/1.0.2h PHP/5.6.28
// Accept-Ranges: bytes
// Content-Type: text/html// 实体内容
// <!DOCTYPE html>
// <html><body></body></html>

响应状态行

  • HTTP版本：例如，HTTP/1.1。
  • 状态码：例如，200。
  • 描述信息：例如 OK 。

响应状态行用于告知客户端本次响应的状态。

状态码含义状态码含义
200正常403禁止
301永久移动404找不到
302临时移动500内部服务器错误
304未修改502无效网关
401未经授权504网关超时

状态码表示服务器对客户端请求的各种不同的处理结果和状态。

响应头用于告知客户端本次响应的基本信息，包括服务器程序名、内容的编码格式、缓存控制等。

请求头和响应头是浏览器和服务器之间交互的重要信息，由程序自动处理，通常不需要人为干预。

实体内容

  • 网页 -> 图片
  • 服务器的响应实体内容有多种编码格式。
  • 服务器为了告知浏览器内容类型，会通过响应消息头中的Content-Type字段来描述。
  • 例如，网页的类型通常是“text/html”，这是一种MIME类型表示方式。

MIME是目前大部分互联网应用程序通用的格式。MIME的表示方法为“大类别/具体类型”。

MIME含义MIME含义
text/plain普通文本（.txt）image/gifGIF图像（.gif）
text/xmlXML文本（.xml）image/pngPNG图像（.png）
text/htmlHTML文本（.html）image/jpegJPEG图像（.jpeg）
text/cssCSS文本（.css）application/javascriptJavaScript程序（.js）

浏览器会根据服务器响应的不同MIME类型采取不同的处理方式。

  • 遇到普通文本时直接显示。
  • 遇到HTML时渲染成网页。
  • 遇到GIF、PNG、JPEG等类型时显示为图像。

如果浏览器遇到无法识别的类型时，在默认情况下会执行下载文件的操作。

2 Web服务器搭建

2.1 前后端交互

  • Web开发分为前端和后端。
  • 前端是面向用户的一端，即浏览器程序开发。
  • 后端则为前端提供服务，即服务器端程序开发。
  • 在动态网站中，许多功能是由前后端交互实现的。例如，用户注册和登录、发表评论、查询积分、余额等。
  • 这些操作可分为两类，一类是向服务器提交数据（表单交互），一类是向服务器查询数据（ URL参数交互）。

表单交互

表单交互是指在HTML中创建一个表单，用户填写表单后提交给服务器，服务器收到表单后返回处理结果。

URL参数交互

URL参数经常用于浏览器向服务器提交一些请求信息。

3 Ajax入门

3.1 什么是Ajax

Ajax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。

描述：不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。

功能：用于实现与服务器进行异步交互的功能。

Ajax相对于传统的Web应用开发区别：

  • 传统Web工作流程

  • Ajax工作流程

相较于传统网页，使用Ajax技术的优势具体有以下几个方面。

  • 减轻服务器的负担
  • 节省带宽
  • 用户体验更好

3.2 创建Ajax对象

创建Ajax对象

  • W3C标准

    var xhr = new XMLHttpRequest();

  • 早期IE浏览器

    var xhr = new ActiveXObject('Microsoft.XMLHTTP');
var xhr = new ActiveXObject('Msxml2.XMLHTTP');
var xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0');
var xhr = new ActiveXObject('Msxml2.XMLHTTP.5.0');
var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0');

3.3 Ajax向服务器发送请求

  • 创建一个新的HTTP：open()方法

    • open('method', 'URL' [, asyncFlag [, 'userName' [, 'password']]])

    • method：用于指定请求方式，如GET、POST，不区分大小写。

    • URL：表示请求的地址。

    • asyncFlag：可选参数，用于指定请求方式，同步请求为false，默认为异步请求true。

    • userName和password：可选参数，表示HTTP认证的用户名和密码。

  • 设置HTTP请求头：setRequestHeader()方法

    • setRequestHeader('haeder', 'value')

    • 参数都为字符串类型。

    • header表示请求头字段。

    • value为该字段的值。

    • 此方法必须在open()方法后调用。

  • 向Web服务器发送请求并接收响应：send()方法

    • send(content)

    • content：用于指定要发送的数据，其值可为DOM对象的实例、输入流或字符串，一般与POST请求类型配合使用。

    • 注意：如果请求声明为同步，该方法将会等待请求完成或者超时才会返回，否则此方法将立即返回。

在进行Ajax开发时，经常使用GET方式或POST方式发送请求。

  • GET方式适合从服务器获取数据。
  • POST方式适合向服务器发送数据。需要设置内容的编码格式，告知服务器用什么样的格式来解析数据。

Ajax对象发送请求的方法。

// GET
var xhr = new XMLHttpRequest();         // 创建Ajax对象
xhr.open('GET', 'test?a=1&b=2');    // 建立HTTP请求
xhr.send();// POST
var xhr = new XMLHttpRequest();
xhr.open('POST', 'test?a=1&b=2');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('c=3&d=4');

同步请求与异步请求

Ajax对象open()方法的第3个参数用于设置同步请求和异步请求。两种方式的区别在于，是否阻塞代码的执行。

  • 异步方式（默认）：是非阻塞的，浏览器端的JavaScript程序不用等待Web服务器响应，可以继续处理其他事情。当服务器响应后，再来处理Ajax对象获取到的响应结果。

  • 同步方式：是阻塞的，当Ajax对象向Web服务器发送请求后，会等待Web服务器响应的数据接收完成，再继续执行后面的代码。

由于同步请求的Ajax导致程序阻塞，会对用户体验造成不利影响，因此通常情况下不推荐使用同步请求。

3.4 处理服务器返回的信息

  • 获取Ajax的当前状态：readyState属性

    • readyState属性用于获取Ajax的当前状态，状态值有5种形式。

      状态值说明解释
      0未发送对象已创建，尚未调用open()方法
      1已打开open()方法已调用，此时可以调用send()方法发起请求
      2收到响应头send()方法已调用，响应头也已经被接收
      3数据接收中响应体部分正在被接收。responseText将会在载入的过程中拥有部分响应数据
      4完成数据接收完毕。此时可以通过responseText获取完整的响应

    • 另外，Ajax状态的还可以通过“XMLHttpRequest.属性名”的方式获取。

      XMLHttpRequest.UNSENT;		// 对应状态值0
XMLHttpRequest.OPENED;		// 对应状态值1
XMLHttpRequest.HEADERS_RECEIVED;	// 对应状态值2
XMLHttpRequest.LOADING;		// 对应状态值3
XMLHttpRequest.DONE;			// 对应状态值4

  • 感知Ajax状态的改变：onreadystatechange事件属性

    • onreadystatechange事件属性用于感知readyState属性状态的改变，每当readyState的值发生改变时，就会调用此事件。

      var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {console.log(xhr.readyState);
};
console.log(xhr.readyState);
xhr.open('GET', 'test.php');
xhr.send();

  • 返回当前请求的HTTP状态码：status属性

    • status属性用于返回当前请求的HTTP状态码，值为数值类型。
    • 例如，当请求成功时，状态码为200。
    • 另外还有一个类似的属性statusText，值为字符型数据，包含了描述短语，如“200 OK”。

  • 获取响应信息：responseText属性、responseXML属性等

    • 当请求服务器成功且数据接收完成时，可以使用Ajax对象提供的相关属性获取服务器的响应信息。

      属性名说明
      responseText将响应信息作为字符串返回
      responseXML将响应信息格式化为XML Document对象并返回（只读）

    • responseXML属性在请求失败或相应内容无法解析时的值为null。

    • 需要注意的是，服务器在返回XML时应设置响应头Content-Type的值为text/xml或application/xml，否则会解析失败。

    • Ajax如何处理服务器返回的信息。

      var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE) {if (xhr.status < 200 || xhr.status >= 300 && xhr.status !== 304) {alert('服务器异常');return;}console.log(xhr.responseText);}
};
xhr.open('GET', 'hello.php');
xhr.send();

URL参数编码转换

  • 在通过URL参数传递数据时，如果参数中包含特殊字符可能会出现问题。

  • 例如 “?” “=” “&”，这些字符已经被赋予了特定的含义。

  • 如果需要传递这些特殊字符，可以使用encodeURIComponent()进行URL编码。

    var str = encodeURIComponent('A&B C');
var url = 'http://xxx/test?name=' + str;
// 输出结果：http://xxx/test?name=A%26B%20C
console.log(url);

    • “&”被转换为“%26”。

    • 空格被转换为“%20”。

    • 当服务器收到已编码的内容之后，会对其进行解码，从而正确识别这些特殊字符。

  • 对于已经编码的字符串，可以使用decodeURIComponent()进行解码。

    var str = 'A%26B%20C';
// 输出结果：A&B C
console.log(decodeURIComponent(str));

4 数据交换格式

前后端应用程序在进行数据交换时，如何确保它们都能识别？

约定一种格式，确保通信双方都能够正确识别对方发送的信息。

4.1 XML数据格式

XML：eXtensible Markup Language，可扩展标记语言。

与HTML都是标签语言，XML主要用于描述和存储数据，可以自定义标签。

<!-- XML的声明 -->
<!-- version表示XML的版本，是声明中必不可少的属性，且必须放在第1位 -->
<!-- encoding用于指定编码 -->
<?xml version="1.0" encoding="utf-8" ?>
<!-- 开始标签 -->
<booklist><book><name>三国演义</name><author>罗贯中</author></book><book><name>水浒传</name><author>施耐庵</author></book>
<!-- 结束标签 -->
</booklist>

当服务器返回的是一个XML格式的数据时，利用Ajax对象的responseXML属性即可对XML数据进行处理。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE) {var data = xhr.responseXML;var booklist = data.getElementsByTagName('booklist')[0];console.log(booklist.childNodes);var book = booklist.children[0];console.log(book.children[0].innerHTML);               // 方式1console.log(book.children[0].firstChild);              // 方式2（会加上引号）console.log(book.children[0].firstChild.wholeText);    // 方式3}
};
xhr.open('GET', 'xml.php');
xhr.send();

4.2 JSON数据格式

JSON：是一种轻量级的数据交换格式。

特点：采用完全独立于语言的文本格式，这使得JSON更易于程序的解析和处理。

与XML对比：使用JSON对象访问属性的方式获取数据更加方便，在JavaScript中可以轻松地在JSON字符串与对象之间转换。

JSON格式的数据交互实现。

var obj = {name: 'Tom', age: 24};     // 准备要发送的数据
var json = JSON.stringify(obj);       // 将对象转换为JSON字符串
var xhr = new XMLHttpRequest();
xhr.open('POST', 'json.php');
xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE) {var obj = JSON.parse(xhr.responseText);    // 将JSON字符串转换为对象console.log(obj);/*console.log(typeof xhr.responseText);     // 查看服务器返回数据的类型：stringeval('var obj = ' + xhr.responseText);    // 用eval()函数将字符型转成对象console.log(obj.name);                    // 输出结果：Tomconsole.log(obj.age);                     // 输出结果：24*/}
};
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('json=' + encodeURIComponent(json));

eval()函数

JavaScript中的eval()函数可将传入的字符串当做JavaScript代码执行。

console.log(typeof xhr.responseText); // 查看服务器返回数据的类型：string
eval('var obj = ' + xhr.responseText);  // 用eval()函数将字符型转成对象
console.log(obj.name);                         // 输出结果：Tom
console.log(obj.age);                    	   // 输出结果：24

eval()在设置参数时，如果传入的字符串不合法，会导致后面的代码也不执行，所以一般情况下不推荐使用它。

5 跨域请求

5.1 Ajax跨域问题

  • 域（Domain）是指网络中独立运行的单位。
  • 从网络安全角度来看，域是安全的边界，每个域都有自己的安全策略，不同域之间是隔离的，除非建立信任关系，否则无法互相访问。
A网站 -> 利用Ajax读取用户在B网站中的余额 -> B网站
A网站 <- 通过Ajax向A网站发送修改密码的请求 <- B网站

跨域请求会导致网页失去安全性，因此浏览器阻止跨域请求。

浏览器如何解决跨域问题带来的危害。

遵循同源策略，同源是指请求URL地址中的协议、域名和端口都相同。

非同源的URL地址

问题URL-1URL-2
域名不同http://www.example.com/1.htmlhttp://api.example.com/1.html
协议不同http://www.example.com/1.htmlhttps://www.example.com/1.html
端口不同http://www.example.com/1.htmlhttp://www.example.com:8080/1.html

浏览器遵循“同源策略”带来的问题：给网站正常的跨域需求带来了难题。

解决办法之一：为使受信任的网站之间能够跨域访问，HTML5提供了一个新的策略，就是Access-Control-Allow-Origin响应头。目标服务器通过该响应头可以指定允许来自特定URL的跨域请求，其值可以设置为任意URL或特定URL等。

header('Access-Control-Allow-Origin: http://localhost:8081');var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8082/8082');
xhr.send();

5.2 JSONP实现跨域请求

JSONP：遵循浏览器的同源策略基础上实现跨域请求的一种方式。

原理：与XMLHttpRequest无关，是利用 <script> 标签的src属性实现了跨域请求。

在浏览器中， 哪些标签可以加载跨域资源？<script>、<img>、<iframe>、<link> 等标签。

  • JSONP之所以采用 <script> 标签，是因为该标签加载的资源可以直接当做JavaScript代码执行，只要通过服务器端的配合，就可以传送数据。

  • JSONP跨域请求。

JSONP本质上是加载了其他网站的脚本，这种方式存在安全风险，因为其他网站可以利用JavaScript窃取用户信息，或更改页面内容。因此，在加载脚本前，一定确保对方是受信任的网站。

自动生成JSONP回调函数名

实际开发，使用以上的方式实现JSONP跨域请求，还存在以下两点不足。

  • 回调函数的函数名test()会污染全局作用域。
  • 当需要发送多个JSONP请求时，无法区分每个回调函数。

为了解决这两个问题，我们可以编写代码实现自动生成一个随机的回调函数名，并在请求时将函数名传递给服务器，服务器在返回结果中调用指定的函数。

function jsonp(url, callback) {var name = 'jsonp' + Math.random().toString().replace(/\D/g, '');window[name] = callback;var script = document.createElement('script');var attr = document.createAttribute('src');attr.value = url + '?callback=' + name;script.setAttributeNode(attr);document.body.appendChild(script);
};
jsonp('http://localhost:8082/test', function(data) {console.log(data);
});

6 扩展技术

6.1 Cookie

Cookie：或称为Cookies，指某些网站为了辨别用户身份、进行会话（Session）跟踪而储存在客户端上的数据。

相关的响应头：Set-Cookie字段

特点：下次请求该网站时，浏览器会将Cookie数据放入请求头中的Cookie字段，服务器收到这段数据即可辨认用户状态。

Cookie是根据域名、路径等参数存储的，不同网站的Cookie相互隔离，从而保证数据的安全性。

6.2 FormData

Ajax向服务器发送数据时，如何收集表单中的数据？

以前的方法：通过DOM操作手动获取用户在表单中填写的值。

缺点：表单中的数据非常多时，使用此方式将会给开发和维护带来许多麻烦。

HTML5提供的方法：FormData表单数据对象。

使用方式：new FormData()实例化并传入 <form> 表单对象即可。

在创建FormData对象后，可在调用Ajax对象的send()方法时作为参数传入，从而将表单数据发送给服务器。

<form id="form">姓名：<input type="text" name="name"><br>密码：<input type="password" name="password"><br>邮箱：<input type="text" name="email"><br><input type="submit" value="提交">
</form>
<script>document.getElementById('form').onsubmit = function() {var fd = new FormData(this);var xhr = new XMLHttpRequest();xhr.open('POST', 'test.php');xhr.send(fd);return false;  // 阻止表单默认的提交操作};/*var fd = new FormData();fd.append(name, value);*/
</script>

6.3 Promise

Promise是ES6新增的对象，用来传递异步操作的消息。

在代码层面，Promise解决了异步操作的“回调地狱”问题。

“回调地狱”是指，在一个异步操作执行完成后，执行下一个异步操作时，出现回调函数嵌套回调函数的情况。如果嵌套的层级过多，会导致代码可读性变差。

Setup.prototype.run = function() {this.step1(function() {this.step2(function() {this.step3(function() {// ……});});});
};

  • Ajax的onreadystatechange()就是一个异步操作，若需要在一个Ajax请求完成后，再发出另一个Ajax请求，就会出现回调函数嵌套情况。

  • 利用Promise对象提供的语法对Ajax操作进行优化。

    function xhr(options) {return new Promise(function(resolve, reject) {var xhr = new XMLHttpRequest();xhr.open(options.type || 'GET', options.url);xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE) {if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {resolve(xhr.responseText);     // 成功时执行的函数} else {reject('服务器发生错误。');    // 失败时执行的函数}}};xhr.send(options.data);});
}var fd = new FormData();
fd.append('num', 100);xhr({url: 'test.php', type: 'POST', data: fd}).then(function(data) {console.log('请求成功：' + data);
}, function(err) {console.log('请求失败：' + err);
});xhr({url: '1.txt', type: 'POST', data: fd}).then(function(data) {console.log('请求成功：' + data);
}).catch(function(err) {console.log('发生异常：' + err);
});xhr({url: 'test.php', type: 'POST', data: fd}).then(function(data) {console.log('第1次请求结果：' + data);return xhr({url: 'test.php', type: 'POST', data: fd});
}).then(function(data) {console.log('第2次请求结果：' + data);
}).catch(function(err) {console.log('发生异常：' + err);
});

Fetch API

提出的原因：XMLHttpRequest对象的语法比较复杂。

作用：新版本的浏览器提出Fetch API，基于Promise语法，提高代码的可读性。

提示：由于Fetch API目前是一个实验中的功能，浏览器支持并不全面，因此不推荐在上线项目中使用。

fetch('test.php', {method: 'POST', headers: new Headers({'Content-Type': 'text/plain'})
}).then(function(response) {// 处理响应结果
}).catch(function(err) {// 处理错误
});

6.4 WebSocket

WebSocket：是HTML5新增的一个客户端与服务器异步通信的API。

作用：用于使浏览器支持WebSocket网络协议。

解决的问题： HTTP轮询。

HTTP轮询：客户端需要不断向服务器发送HTTP请求，询问服务器是否有新的消息，这种方式称为HTTP轮询。特点是其通信效率非常低。

解决办法：WebSocket实现了全双工通信，在建立连接后，服务器可以将新消息主动推送给客户端，这种方式实时性更强，效率更高。

// 创建WebSocket对象，连接服务器
var ws = new WebSocket('ws://127.0.0.1:2000'); 
// 当连接成功时执行的回调函数
ws.onopen = function() { console.log('连接成功');ws.send('Tom');console.log('向服务端发送一个字符串：Tom');
};
// 当收到服务器消息时执行的回调函数，event是事件对象
ws.onmessage = function(event) {console.log('收到服务器消息：' + event.data);
};var ws = new WebSocket('ws://127.0.0.1:2000');
ws.onopen = function() {console.log('连接成功');
};
ws.onmessage = function(e) {console.log('收到服务器消息：' + e.data);
};

r) {
// 处理错误
});

### 6.4 WebSocketWebSocket：是HTML5新增的一个客户端与服务器异步通信的API。作用：用于使浏览器支持WebSocket网络协议。解决的问题： HTTP轮询。HTTP轮询：客户端需要不断向服务器发送HTTP请求，询问服务器是否有新的消息，这种方式称为HTTP轮询。特点是其通信效率非常低。解决办法：WebSocket实现了全双工通信，在建立连接后，服务器可以将新消息主动推送给客户端，这种方式实时性更强，效率更高。```js
// 创建WebSocket对象，连接服务器
var ws = new WebSocket('ws://127.0.0.1:2000'); 
// 当连接成功时执行的回调函数
ws.onopen = function() { console.log('连接成功');ws.send('Tom');console.log('向服务端发送一个字符串：Tom');
};
// 当收到服务器消息时执行的回调函数，event是事件对象
ws.onmessage = function(event) {console.log('收到服务器消息：' + event.data);
};var ws = new WebSocket('ws://127.0.0.1:2000');
ws.onopen = function() {console.log('连接成功');
};
ws.onmessage = function(e) {console.log('收到服务器消息：' + e.data);
};

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

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

相关文章

代码随想录 Day8 栈(FILO)与队列(FIFO) LeetCode T232 用栈实现队列 LeetCodeT225 用队列实现栈

代码随想录 Day8 栈(FILO)与队列(FIFO) LeetCode T232 用栈实现队列 LeetCodeT225 用队列实现栈

题目详细思路来自于:代码随想录 (programmercarl.com) 栈和队列都是大家不陌生的数据结构,我们之前的栈和队列一般是用数组或链表来实现的 , 这里我们给出实现方式,用于帮助更好的理解. 1.用链表实现栈 /* 基于链表实现的栈 */ class LinkedListStack { private ListNode sta…
阅读更多...
聊聊MySQL的InnoDB引擎与MVCC

聊聊MySQL的InnoDB引擎与MVCC

目录 一、InnoDB引擎 1.1逻辑存储结构 1). 表空间 2). 段 3). 区 4). 页 5). 行 1.2架构 1.2.1内存结构 1). Buffer Pool 2). Change Buffer 3). Adaptive Hash Index 4). Log Buffer 1.2.2磁盘结构 1). System Tablespace 2). File-Per-Table Tablespaces 3). …
阅读更多...
Vue3之Suspense

Vue3之Suspense

<Suspense> 是一个内置组件&#xff0c;用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成&#xff0c;并可以在等待时渲染一个加载状态。 我们可以看到官网并不推荐我们使用它&#xff0c;目前仍处于测试中。 他用于加…
阅读更多...
VUE2项目：尚品汇-axios二次封装请求以及VUEX的状态管理库

VUE2项目：尚品汇-axios二次封装请求以及VUEX的状态管理库

上一篇&#xff1a;VUE2项目&#xff1a;尚品汇VUE-CLI脚手架初始化项目以及路由组件分析&#xff08;一&#xff09; 目录 axios二次封装API接口管理与解决跨域API接口管理nprogress进度条配置 VUEX状态管理库三级分类动态背景颜色防抖三级联动跳转路由分析 axios二次封装 项…
阅读更多...
windows系统查看exe程序的依赖dll并拷贝到指定路径下

windows系统查看exe程序的依赖dll并拷贝到指定路径下

脚本 echo off REM windows_copy_depends.bat是脚本文件名&#xff0c;exe_path是exe文件的全路径&#xff0c;dll_folder_path是脚本当前路径下的文件夹名称 REM 如windows_copy_depends.bat E:\git_code\windows_docker_desktop\winget.exe 123 echo Usage: windows_copy_dep…
阅读更多...
大数据-玩转数据-Flink Catalog

大数据-玩转数据-Flink Catalog

一、Catalog Catalog 提供了元数据信息&#xff0c;例如数据库、表、分区、视图以及数据库或其他外部系统中存储的函数和信息。 数据处理最关键的方面之一是管理元数据。 元数据可以是临时的&#xff0c;例如临时表、或者通过 TableEnvironment 注册的 UDF。 元数据也可以是持…
阅读更多...
ES写入数据时：circuit_breaking_exception[[parent] Data too large

ES写入数据时：circuit_breaking_exception[[parent] Data too large

报错&#xff1a; circuit_breaking_exception[[parent] Data too large, data for [<transport_request>] would be [12318476937/11.2gb], which is larger than the limit of [12237372108/12.2gb], real usage: [12318456248/11.2gb]原因&#xff1a; &#xff08;…
阅读更多...
Kafka收发消息核心参数详解

Kafka收发消息核心参数详解

文章目录 1、从基础的客户端说起1.1、消息发送者主流程1.2、消息消费者主流程 2、从客户端属性来梳理客户端工作机制2.1、消费者分组消费机制 1、从基础的客户端说起 Kafka提供了非常简单的客户端API。只需要引入一个Maven依赖即可&#xff1a; <dependency><groupId…
阅读更多...
【RabbitMQ实战】06 RabbitMQ配置

【RabbitMQ实战】06 RabbitMQ配置

一、概述 一般情况下&#xff0c;可以使用默认的内建配置来有效地运行RabbitMQ&#xff0c;并且大多数情况下也并不需要修改任何 RabbitMQ的配置。当然&#xff0c;为了更加有效地操控 RabbitMQ&#xff0c;也可以利用调节系统范围内的参数来达到定制化的需求。 RabbitMQ提供…
阅读更多...
《大师级引导-应对困境的工具与技术》读书笔记1

《大师级引导-应对困境的工具与技术》读书笔记1

《大师级引导-应对困境的工具与技术》这个书&#xff0c;十分不错&#xff0c;教练和非教练都可以学习。下面是其中的关于冲突的处理&#xff1a; 定义&#xff1a;双方以解决冲突、说明关系为目的而进行的积极的、具有建设性的对话。 目的&#xff1a;制定双方协议&#xf…
阅读更多...
《CTFshow-Web入门》10. Web 91~110

《CTFshow-Web入门》10. Web 91~110

Web 入门 索引web91题解总结 web92题解总结 web93题解 web94题解 web95题解 web96题解 web97题解 web98题解 web99题解总结 web100题解 web101题解 web102题解 web103题解 web104题解 web105题解总结 web106题解 web107题解 web108题解 web109题解 web110题解 ctf - web入门 索…
阅读更多...
锚框_的标定

锚框_的标定

一、查漏补缺、熟能生巧&#xff1a; 1.关于fix.axis.add_patch在原来图像的坐标系同添加 边框的函数的使用&#xff1a; 2.torch.arange( h , device)生成tensor的等差数组: 3.torch.T&#xff08;&#xff09;就是transpose转置操作的函数咯: 4.torch.repeat操作&#xff0c…
阅读更多...
Substructure‑aware subgraph reasoning for inductive relation prediction

Substructure‑aware subgraph reasoning for inductive relation prediction

摘要 关系预测的目的是推断知识图中实体之间缺失的关系，其中归纳关系预测因其适用于新兴实体的有效性而广受欢迎。大多数现有方法学习逻辑组合规则或利用子图来预测缺失关系。尽管在性能方面已经取得了很大的进展，但目前的模型仍然不是最优的，因为它们捕获拓扑信息的能力有…
阅读更多...
【Axure高保真原型】3D圆柱图_中继器版

【Axure高保真原型】3D圆柱图_中继器版

今天和大家分享3D圆柱图_中继器版的原型模板&#xff0c;图表在中继器表格里填写具体的数据&#xff0c;调整坐标系后&#xff0c;就可以根据表格数据自动生成对应高度的圆柱图&#xff0c;鼠标移入时&#xff0c;可以查看对应圆柱体的数据……具体效果可以打开下方原型地址体验…
阅读更多...
Springboot+vue的在线试题题库管理系统（有报告），Javaee项目，springboot vue前后端分离项目。

Springboot+vue的在线试题题库管理系统（有报告），Javaee项目，springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的在线试题题库管理系统&#xff08;有报告&#xff09;&#xff0c;Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的在线试题题库管理系统&#xff0c;采用M&…
阅读更多...
javaSwing销售管理

javaSwing销售管理

​ 目录 一、选题背景 近几年来&#xff0c;传统商业与电商似乎是水火不容&#xff0c;大有不是你死便是我活的劲头。一直以来舆论都是一边倒的电商将迅速取代传统零售的论调&#xff0c;然而几年过去&#xff0c;电商的发展确实值得侧目&#xff0c;但传统商业虽然受到不小的…
阅读更多...
LeetCode 每日一题 2023/9/25-2023/10/1

LeetCode 每日一题 2023/9/25-2023/10/1

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 9/25 460. LFU 缓存9/26 2582. 递枕头9/27 1333. 餐厅过滤器9/28 2251. 花期内花的数目9/29 605. 种花问题9/30 2136. 全部开花的最早一天10/1 9/25 460. LFU 缓存 freqMap…
阅读更多...
性能压力测试的定义及步骤是什么

性能压力测试的定义及步骤是什么

在今天的数字化时代&#xff0c;软件系统的性能和稳定性对于企业的成功至关重要。为了确保软件在高负载和压力情况下的正常运行&#xff0c;性能压力测试成为了不可或缺的环节。本文将介绍性能压力测试的定义、步骤。 一、性能压力测试的定义和目标 性能压力测试是通过模拟实际…
阅读更多...
现代c++手撸2309神经网络最简化版230901

现代c++手撸2309神经网络最简化版230901

用c++输入数据:vector<vector<float>> inputs = { {1, 1}, {1, 0} };数据targets={0,1}; 测试：vector<vector<float>> inputs22 = { {1, 0}, {1,1} }; 构建神经网络，例如：NeuralNetwork nn({ 2, 4, 1 }); 则网络有四层、输入层2个节点、输出层1个节…
阅读更多...
网络工程师学习中但是发现这个岗位非常卷怎么办

网络工程师学习中但是发现这个岗位非常卷怎么办

大家好&#xff0c;我是网络工程师成长日记实验室的郑老师&#xff0c;您现在正在查看的是网络工程师成长日记专栏&#xff0c;记录网络工程师日常生活的点点滴滴 有个同学说&#xff0c;他说现在有很多培训机构搞的这个网络工程师也非常卷。他现在还没有入行&#xff0c;他现在…
阅读更多...
最新文章

Copyright @ 2022~2023