HTTP、Web常用协议等等
文章目录
1. 网络请求的状态码有哪些?
1)1xx 信息性状态码
100 Continue
:表示目前为止一切正常,客户端可以继续发送请求或者忽略这个响应。101 Switching Protocols
:服务器根据客户端的请求切换协议。
2)2xx 成功状态码
200 OK
:最常见的成功状态码,表示请求已成功,响应主体包含所请求的资源。201 Created
:表示请求成功并且服务器创建了新的资源。202 Accepted
:表示服务器已接受请求,但尚未处理。204 No Content
:表示请求成功,但响应没有实体内容。
3)3xx 重定向状态码
301 Moved Permanently
:表示请求的资源已被永久移动到新位置,浏览器会自动重定向到新位置。302 Found
:表示请求的资源临时被移动到其他位置,浏览器会自动重定向到新位置。但与301
不同的是,这个重定向可能是临时的。303 See Other
:表示请求的资源存在另一个 URI,应使用 GET 方法获取该资源。304 Not Modified
:表示资源未被修改,客户端可以使用缓存的版本。307 Temporary Redirect
:与302
类似,但客户端应保持请求方法不变进行重定向。
4)4xx 客户端错误状态码
400 Bad Request
:表示请求有语法错误或请求无法被服务器理解。401 Unauthorized
:表示请求需要用户认证,通常是因为没有提供有效的身份验证凭证。403 Forbidden
:表示服务器理解请求,但拒绝执行,通常是因为用户没有足够的权限访问资源。404 Not Found
:表示服务器找不到请求的资源。405 Method Not Allowed
:表示请求方法不被允许,例如使用了 POST 请求但服务器只允许 GET 请求。406 Not Acceptable
:表示服务器无法根据客户端的请求头返回满足要求的资源。408 Request Timeout
:表示客户端请求超时,服务器在规定时间内没有收到完整的请求。409 Conflict
:表示请求与服务器的当前状态冲突,例如提交的内容与已有资源冲突。429 Too Many Requests
:表示客户端发送的请求过多,超出了服务器的限制。
5)5xx 服务器错误状态码
500 Internal Server Error
:表示服务器内部错误,通常是服务器遇到了意外情况,无法完成请求。501 Not Implemented
:表示服务器不支持请求的功能,无法完成请求。502 Bad Gateway
:表示作为网关或者代理的服务器,从上游服务器接收到无效的响应。503 Service Unavailable
:表示服务器暂时不可用,通常是由于服务器过载或正在进行维护。504 Gateway Timeout
:表示作为网关或者代理的服务器,在等待上游服务器响应时超时。505 HTTP Version Not Supported
:表示服务器不支持请求中使用的 HTTP 版本。
2.在 Web 开发中常用的协议和标准有哪些?
1)协议
- HTTP(HyperText Transfer Protocol,超文本传输协议):
- 是用于在 Web 浏览器和 Web 服务器之间传输数据的基础协议。
- 目前主要使用的版本是 HTTP/1.1 和 HTTP/2。HTTP/2 相比 HTTP/1.1 有更高的性能,支持多路复用、头部压缩等特性。
- 特点包括无状态、基于请求/响应模式等。
- HTTPS(HyperText Transfer Protocol Secure,超文本传输安全协议):
- 在 HTTP 的基础上通过 SSL/TLS 加密来确保数据传输的安全。
- 广泛用于需要保护用户数据(如登录信息、支付信息等)的场景。
- 提供了数据加密、身份验证和数据完整性校验等功能。
- FTP(File Transfer Protocol,文件传输协议):
- 虽然在 Web 开发中不是主要用于网页传输,但在一些场景下可能用于文件上传和下载,例如网站后台管理中上传文件到服务器。
- 支持两种模式:主动模式和被动模式。
- WebSocket:
- 一种在单个 TCP 连接上进行全双工通信的协议。
- 允许服务器主动向客户端推送数据,而不仅仅是客户端请求后服务器响应的模式。
- 常用于实时通信应用,如在线聊天、实时数据更新等。
2)标准
- HTML(HyperText Markup Language,超文本标记语言):
- 用于创建网页的结构和内容。
- 目前 HTML5 是广泛使用的版本,支持丰富的多媒体元素、语义化标签、本地存储等特性。
- CSS(Cascading Style Sheets,层叠样式表):
- 用于控制网页的外观和布局。
- CSS3 引入了很多新特性,如动画、渐变、弹性布局等。
- JavaScript:
- 一种客户端脚本语言,用于为网页添加交互性和动态效果。
- 有众多的框架和库,如 React、Vue.js、Angular 等,遵循 ECMAScript 标准。
- REST(Representational State Transfer,表述性状态转移):
- 一种软件架构风格,用于设计 Web 服务。
- 强调资源的概念,通过 HTTP 方法(
GET
、POST
、PUT
、DELETE
等)对资源进行操作。
- JSON(JavaScript Object Notation,JavaScript 对象表示法):
- 一种轻量级的数据交换格式。
- 常用于 Web 服务之间的数据传输以及与前端的交互。
- XML(eXtensible Markup Language,可扩展标记语言):
- 另一种常用的数据交换格式。
- 虽然不如 JSON 简洁,但具有良好的扩展性和自描述性。
3.如何处理跨域问题?
跨域问题是由同源政策(Same-Origin Policy)引起的,浏览器出于安全考虑限制 JavaScript 在一个源(域、协议、端口)上与另一个源进行交互。下面是一些处理跨域问题的方法:
1)CORS(跨源资源共享)
CORS 是一种机制,允许服务器通过在响应中添加特定 HTTP 头部来指示哪些源可以访问资源。
示例代码:
// 服务器端响应头可以如下设置:
Access-Control-Allow-Origin: *
// 或者指定特定源:
Access-Control-Allow-Origin: https://example.com
// 在 Node.js(Express)的例子中:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); // 允许所有跨域请求
// 或者
app.use(cors({ origin: 'https://example.com', // 只允许特定源 }));
app.get('/data', (req, res) => { res.json({ message: 'Hello, world!' }); });
app.listen(3000, () => { console.log('Server running on port 3000'); });
2)JSONP(JSON with Padding)
JSONP 是一种非官方的跨域请求方式,它利用
示例代码:
//客户端下载数据:
function handleResponse(data) { console.log(data); }
const script = document.createElement('script');
script.src = 'https://example.com/data?callback=handleResponse';
document.body.appendChild(script);
//服务器响应:
handleResponse({ message: 'Hello, world!' });
3)代理
通过设置同源服务器(如 Webpack dev server 或 Nginx)代理请求,可以有效避免跨域问题。客户端的请求会先发送到代理服务器,代理服务器再请求目标服务器的数据。
Webpack 示例配置:
webpack.config.js module.exports = {
devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, }, }, }, };
4) iframe + postMessage
如果应用的两个部分可以通过 iframe 嵌套的方式共存,可以使用 postMessage 方法实现跨域消息传递。
示例代码:
//主窗口发送消息:
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('Hello from parent', 'https://example.com');
//iframe 接收消息:
window.addEventListener('message', (event) => {
if (event.origin === 'https://parent-origin.com') { console.log(event.data); // 处理消息 } });
5) WebSocket
WebSocket 协议不受同源政策的限制,可以用于跨域通信。需要服务器和客户端都支持 WebSocket。
示例代码:
const socket = new WebSocket('ws://example.com/socket');
socket.onopen = function(event) { socket.send('Hello Server!'); };
socket.onmessage = function(event) { console.log(event.data); };
总结:
选择合适的跨域解决方案取决于具体的情况,通常情况下,CORS 是最常见和推荐的方案。
如果控制服务器端,那么配置 CORS 将是最高效的方式。
如果不能改动服务器,其他方式如 JSONP 和代理也可以考虑。
4.get请求传参长度的误区、get和post请求在缓存方面的区别
1)误区:
- 我们经常认为
get
请求参数长度存在限制, - 而
post
请求参数长度是无限制的。
2)实际上 HTTP协议 从未规定 GET/POST 的请求长度限制是多少。
- 对
get
请求参数的限制是来源与浏览器或 web 服务器,浏览器或 web 服务器限制了url
的长度。 - 为了明确这个概念,我们必须再次强调下面几点:
- HTTP 协议 未规定 GET/POST 的长度限制;
- GET 的最大长度限制是因为浏览器和web服务器限制了 URI 的长度;
- 不同的浏览器和 web 服务器,限制的最大长度不一样;
- 要支持 IE,则最大长度为 2083 byte ,若只支持 Chrome,则最大长度 8182byte。
3)在缓存方面的区别:
- Get请求:类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,可以使用缓存;
- Post请求:一般是修改和删除的工作,必须与数据库交互,不能使用缓存。
5.简单说说,你对 token 的理解
1)概念
- Token 是一种用于身份验证和授权的凭证。
- 在网络应用中,它通常是一个字符串,代表着用户的身份或者特定的权限。
2)作用
- 身份验证:
- 当用户登录系统时,服务器验证用户的身份信息(如用户名和密码)后,会生成一个 token 并返回给客户端。
- 客户端在后续的请求中携带这个 token,服务器通过验证 token 的有效性来确定用户的身份,而无需每次都要求用户重新输入用户名和密码。
- 例如,在一个移动应用中,用户登录后,应用会保存 token,在后续与服务器的交互中,将 token 包含在请求头中,服务器据此识别用户身份。
- 授权访问:
- Token 可以包含特定的权限信息,决定用户可以访问哪些资源和执行哪些操作。
- 服务器可以根据 token 中的权限标识来控制用户对不同功能和数据的访问。
- 比如,一个企业管理系统中,不同的用户角色可能有不同的权限,token 可以明确标识用户的角色和相应的权限范围。
3)特点
- 无状态性:
- 服务器不需要在内存中存储每个用户的会话状态,只需要验证 token 的有效性。
- 这使得服务器可以更轻松地扩展,并且减少了服务器的资源消耗。
- 例如,在分布式系统中,多个服务器可以独立地验证 token,而不需要共享用户会话信息。
- 安全性:
- Token 可以使用加密技术进行签名,确保其在传输过程中不被篡改。
- 一些 token 还可以设置过期时间,增加了系统的安全性。
- 例如,JSON Web Token(JWT)使用数字签名来保证其完整性和真实性,并且可以设置较短的过期时间,以减少被攻击的风险。
- 灵活性:
- Token 可以在不同的平台和设备上使用,包括 Web 应用、移动应用和 API 调用。
- 它可以适应不同的身份验证和授权需求,并且可以与各种技术栈集成。
- 例如,一个基于微服务架构的系统中,不同的服务可以使用相同的 token 进行身份验证和授权,提高了系统的可维护性和可扩展性。
6.简单说说,你对 axios 的理解
1)概述
- Axios 是一个基于 Promise 的 HTTP 客户端,用于在浏览器和 Node.js 中发送 HTTP 请求。
- 它可以方便地与现代 JavaScript 框架(如 Vue、React 和 Angular)集成,提供了简洁的 API 和强大的功能。
2)主要特点
- 支持 Promise API:
- Axios 的所有请求方法都返回 Promise 对象,使得异步请求的处理更加简洁和可读。可以使用
then
和catch
方法来处理请求的成功和失败情况。 - 例如:
axios.get('/api/data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });
- Axios 的所有请求方法都返回 Promise 对象,使得异步请求的处理更加简洁和可读。可以使用
- 支持多种请求方法:
- Axios 支持常见的 HTTP 请求方法,如 GET、POST、PUT、DELETE、PATCH 等。可以轻松地发送不同类型的请求,并传递相应的请求参数。
- 例如:
// GET 请求 axios.get('/api/users', { params: { page: 1, limit: 10 } }); // POST 请求 axios.post('/api/users', { name: 'John', age: 30 });
- 拦截器:
- Axios 提供了请求拦截器和响应拦截器,可以在请求发送前和响应返回后进行一些预处理操作。
- 请求拦截器可以用于添加请求头、设置认证信息、处理请求参数等。响应拦截器可以用于统一处理错误、格式化响应数据等。
- 例如:
// 请求拦截器 axios.interceptors.request.use(config => { config.headers['Authorization'] = 'Bearer ' + token; return config; }, error => { return Promise.reject(error); }); // 响应拦截器 axios.interceptors.response.use(response => { return response.data; }, error => { if (error.response.status === 401) { // 处理未授权错误 } return Promise.reject(error); });
- 并发请求:
- Axios 支持并发请求,可以同时发送多个请求,并等待它们全部完成后进行处理。
- 可以使用
axios.all
和axios.spread
方法来处理并发请求的结果。 - 例如:
axios.all([ axios.get('/api/users'), axios.get('/api/posts') ]).then(axios.spread((usersResponse, postsResponse) => { console.log(usersResponse.data); console.log(postsResponse.data); })).catch(error => { console.error(error); });
- 可配置性:
- Axios 可以进行各种配置,如设置请求超时时间、设置基础 URL、设置请求头、设置响应数据格式等。
- 例如:
axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.timeout = 5000; axios.defaults.headers.common['Content-Type'] = 'application/json';
3)应用场景
- 与后端 API 交互:
- 在前端应用中,使用 Axios 与后端服务器的 API 进行通信,获取数据、提交表单、更新资源等。
- 例如,在一个电商网站中,使用 Axios 发送请求获取商品列表、添加购物车、下单等操作。
- 前后端分离项目:
- 在前后端分离的架构中,Axios 作为前端与后端之间的通信桥梁,方便地进行数据交互和业务逻辑处理。
- 前后端可以独立开发、测试和部署,提高开发效率和系统的可维护性。
- 移动应用开发:
- 在移动应用开发中,Axios 可以用于与服务器进行通信,实现数据的同步和更新。
- 例如,在一个移动社交应用中,使用 Axios 发送请求获取用户动态、发布状态、评论等操作。
7. ajax原理
AJAX(Asynchronous JavaScript and XML)即异步 JavaScript 和 XML,其工作原理如下:
1)基本概念
- AJAX 不是一种新的编程语言,而是一种用于创建快速动态网页的技术。
- 它通过在后台与服务器进行少量数据交换,实现网页的异步更新,而无需重新加载整个网页。
- 这使得网页能够提供更流畅的用户体验,就像在使用桌面应用程序一样。
2)工作流程
- 创建 XMLHttpRequest 对象:
- 在 JavaScript 中,首先创建一个 XMLHttpRequest 对象,它是 AJAX 的核心对象,用于在后台与服务器进行通信。
- 不同浏览器对 XMLHttpRequest 对象的实现略有不同,但现代浏览器都提供了标准的 API。
- 例如:
var xhr = new XMLHttpRequest();
- 配置请求:
- 设置请求的方法(GET、POST 等)、URL 和是否异步等参数。
- 可以设置请求头信息,以便向服务器传递特定的信息。
- 例如:
xhr.open('GET', '/api/data', true); xhr.setRequestHeader('Content-Type', 'application/json');
- 发送请求:
- 使用
send()
方法发送请求。如果是 POST 请求,可以在send()
方法中传递请求参数。 - 例如:
xhr.send();
- 使用
- 监听状态变化:
- 通过监听 XMLHttpRequest 对象的
onreadystatechange
事件,来检测请求的状态变化。 - 当请求的状态发生变化时,该事件会被触发。可以在事件处理函数中根据请求的状态进行相应的处理。
- 例如:
xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功,处理响应数据 var response = xhr.responseText; console.log(response); } else if (xhr.readyState === 4 && xhr.status!== 200) { // 请求失败,处理错误 console.error('请求失败:' + xhr.status); } };
- 通过监听 XMLHttpRequest 对象的
- 服务器响应:
- 服务器接收到请求后,进行相应的处理,并返回响应数据。
- 响应数据可以是 XML 格式、JSON 格式或纯文本等。
- XMLHttpRequest 对象会根据响应的状态码和内容类型自动解析响应数据,并将其存储在
responseText
或responseXML
属性中。
- 处理响应数据:
- 在客户端,根据响应数据的格式进行相应的处理。如果是 JSON 格式,可以使用
JSON.parse()
方法将其转换为 JavaScript 对象。 - 可以根据响应数据更新网页的内容,或者执行其他操作。
- 例如:
var responseData = JSON.parse(xhr.responseText); document.getElementById('result').innerHTML = responseData.message;
- 在客户端,根据响应数据的格式进行相应的处理。如果是 JSON 格式,可以使用
3)优点
- 异步通信:
- AJAX 允许网页在不刷新整个页面的情况下与服务器进行通信,从而提供更流畅的用户体验。
- 用户可以继续与网页进行交互,而不会被长时间的等待所打断。
- 局部更新:
- 可以只更新网页的一部分内容,而不是重新加载整个页面。这减少了网络流量和服务器负载,提高了性能。
- 更好的用户体验:
- 通过异步通信和局部更新,用户可以更快地获得反馈,并且不会因为页面刷新而丢失当前的操作状态。
- 与服务器进行交互:
- 可以在后台与服务器进行数据交换,实现动态内容的加载、表单提交、数据验证等功能。