网站重大建设项目公开发布制度,免费客户管理软件哪个好用,云南seo网站关键词优化软件,网站工程前端文章目录 一、手写ajax请求1. get2. post3. xhr.readyState4. xhr.status5. xhr.open 二、跨域三、cookie、localStorage和sessionStorage四、http1. http常见的状态码有哪些2. http常见的header有哪些3. 什么是RestfulAPI4. 描述一下http的缓存机制5. https 一、手写ajax请求 … 文章目录 一、手写ajax请求1. get2. post3. xhr.readyState4. xhr.status5. xhr.open 二、跨域三、cookie、localStorage和sessionStorage四、http1. http常见的状态码有哪些2. http常见的header有哪些3. 什么是RestfulAPI4. 描述一下http的缓存机制5. https 一、手写ajax请求
1. get // 1.创建一个XMLHttpRequest对象let xhr new XMLHttpRequest();// 2.设置请求行xhr.open(get, http://localhost:3000/get);// 3.设置请求头xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);// 4.设置请求体xhr.send(null);// 5.监听请求状态xhr.onreadystatechange function() {// 6.判断请求状态if(xhr.readyState 4 xhr.status 200) {// 7.获取响应体console.log(xhr.responseText);}}2. post // 1.创建一个XMLHttpRequest对象let xhr new XMLHttpRequest();// 2.设置请求行xhr.open(post, http://localhost:3000/post);// 3.设置请求头xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);// 4.设置请求体xhr.send(name小明age18); // 这里得传字符串// 5.监听请求状态xhr.onreadystatechange function() {// 6.判断请求状态if(xhr.readyState 4 xhr.status 200) {// 7.获取响应体console.log(xhr.responseText);}}
3. xhr.readyState
xhr.readyState 有以下状态值分别代表的意思如下
状态值意思0未初始化尚未调用open方法1启动已经调用open方法2发送已经调用send方法3接收正在接收响应数据4完成已经接收到全部响应数据
请注意在这个表格中状态值是从0开始的0代表xhr对象已经被创建但尚未调用open方法直到4代表请求已完成且响应数据已接收完毕。
4. xhr.status
http状态码
状态码含义说明200OK请求成功301Moved Permanently资源被永久移动到新的URL302Found资源被临时移动到新的URL400Bad Request请求有误服务器无法处理401Unauthorized请求需要身份验证403Forbidden服务器拒绝该请求404Not Found请求的资源不存在500Internal Server Error服务器遇到错误502Bad Gateway服务器作为网关或代理时收到无效响应503Service Unavailable服务器暂时不可用504Gateway Timeout服务器作为网关或代理时在等待上游服务器响应时超时
5. xhr.open
xhr.open方法有三个参数含义如下
method表示HTTP请求的方法比如GET、POST等。url表示请求的URL地址。async表示请求是否为异步默认为true即异步请求。
如果第三个参数为true则表示异步请求即浏览器不需要等待服务器返回响应即可继续执行后面的代码。如果第三个参数为false则表示同步请求即浏览器需要等待服务器返回响应后才能继续执行后面的代码。
二、跨域
大家可以看看这篇什么是跨域(浏览器同源政策)如何解决跨域
三、cookie、localStorage和sessionStorage
cookie、localStorage和sessionStorage都是用于在浏览器端存储数据的技术。它们的用途、区别和大小如下所示
CookielocalStoragesessionStorage用途用于在浏览器和服务器之间传递数据包括会话管理、持久性登录状态等用于在浏览器端存储较大量的数据包括长期保存的用户配置、个人信息等用于在浏览器端存储临时性的数据仅在当前会话有效存储位置存储在客户端会自动随HTTP请求发送到服务器存储在客户端不会自动发送到服务器存储在客户端不会自动发送到服务器大小限制最大可以存储4KB的数据最大可以存储5MB的数据最大可以存储5MB的数据生命周期可设置过期时间可以在浏览器重启后仍然存在除非被手动清除否则会一直存在仅在当前会话有效关闭浏览器后会被自动清除访问限制对于每个具体的cookie可以设置访问限制如域名、路径等仅对于设置localStorage的网页可访问仅对于设置sessionStorage的网页可访问API可以使用document.cookie来读取和写入cookie可以使用localStorage对象的方法如setItem、getItem、removeItem等可以使用sessionStorage对象的方法如setItem、getItem、removeItem等
需要注意的是每个浏览器对cookie、localStorage和sessionStorage的实现可能会有一些细微的差异例如存储上限可能会略有不同。上述表格仅提供了一般情况下的常见规范。
四、http
1. http常见的状态码有哪些
http状态码
状态码含义说明200OK请求成功301Moved Permanently资源被永久移动到新的URL302Found资源被临时移动到新的URL400Bad Request请求有误服务器无法处理401Unauthorized请求需要身份验证403Forbidden服务器拒绝该请求404Not Found请求的资源不存在500Internal Server Error服务器遇到错误502Bad Gateway服务器作为网关或代理时收到无效响应503Service Unavailable服务器暂时不可用504Gateway Timeout服务器作为网关或代理时在等待上游服务器响应时超时
2. http常见的header有哪些
常见的HTTP请求头Request Headers如下所示
Header字段说明Accept告诉服务器可以发送的媒体类型Accept-Charset告诉服务器请求的字符集Accept-Encoding 告诉服务器请求的内容编码方式 gzipAccept-Language告诉服务器请求的语言Authorization包含用户凭证的认证信息Cache-Control缓存机制指令Connection管理持久连接 keep-aliveContent-Length请求体的大小Content-Type请求体的媒体类型Cookie之前保存的服务器发送的CookieHost请求的主机名或IP地址User-Agent包含发送请求的用户代理的信息Referer发送请求的页面的URLOrigin发起一个对跨域资源的请求
常见的HTTP响应头Response Headers如下所示
Header字段说明Accept-Ranges标识服务器是否支持范围请求Cache-Control 缓存机制指令 Content-Encoding响应内容的编码方式 gzipContent-Length响应的大小Content-Type响应内容的媒体类型Set-Cookie服务器发送的CookieDate响应生成的日期和时间Etag 客户端缓存检查标识符Server服务器标识Last-Modified资源最后修改的时间Location资源被重新定位的URLAccess-Control-Allow-Origin允许跨域资源共享的域Access-Control-Allow-Headers允许的跨域请求的自定义请求头
请注意这些是其中一些常见的HTTP头部字段实际上还有很多其他的头部字段可以用于请求和响应。
3. 什么是RestfulAPI
RESTful API 是一种使用 HTTP 协议和标准 RESTRepresentational State Transfer原则设计的 API用于系统之间的通信。它允许客户端通过 HTTP 方法GET、POST、PUT、DELETE对资源进行操作并使用 URL 定位资源。
与传统的 API 相比RESTful API 有以下区别
设计风格RESTful API 遵循资源的风格将每个资源都用一个唯一的 URI 表示并使用合适的 HTTP 方法对其进行操作。而传统的 API 常常使用不同的 URI 和操作来表示不同的功能。状态无关RESTful API 是无状态的每个请求都应该包含足够的信息来处理请求不依赖于之前的请求或状态。传统的 API 常常依赖于会话状态。结果表现RESTful API 返回的结果通常是资源的表现形式比如 JSON 或 XML 格式的数据。传统的 API 则常常返回各种包装过的数据格式。缓存支持RESTful API 支持缓存可以减少网络传输和服务器负载。传统的 API 不一定具备缓存能力。可扩展性RESTful API 的设计使得系统易于扩展和维护因为它使用标准的 HTTP 协议和约束。传统的 API 可能因为实现的特定细节而难以扩展。
总的来说RESTful API 更加简单、灵活、可扩展和易于使用适用于不同平台和系统的集成。
4. 描述一下http的缓存机制
HTTP的缓存机制是为了提高网页加载速度减轻服务器和网络的负载。具体过程如下 客户端发起HTTP请求时服务器会在响应头部的Cache-Control字段或Expires字段中设置缓存策略。常见的缓存策略有no-cache不缓存, no-store不缓存和存储, public可公开缓存, private仅个人缓存等。 客户端收到服务端的响应后将响应内容以及缓存策略保存到本地缓存中。 客户端下一次请求相同资源时先检查本地缓存如果缓存有效则直接从本地缓存中读取响应内容不再发送请求到服务器。 当缓存过期或者被标记为无效时客户端会发送一个条件请求到服务器其中会包含一个If-Modified-Since或者If-None-Match字段用于告诉服务器上次缓存的响应的最后修改时间或者ETag。 服务器收到条件请求后会根据请求中的If-Modified-Since或者If-None-Match字段与资源的最后修改时间或者ETag进行比较。如果资源没有更新则返回状态码304 Not Modified客户端可以继续使用本地缓存如果资源已经更新则返回新的响应内容。 当服务器返回新的响应内容时客户端会将新的响应内容和缓存策略更新到本地缓存中以备下一次使用。
需要注意的是客户端和服务器之间的缓存是相互独立的服务器可以通过在响应头中设置Cache-Control字段或Expires字段来控制客户端的缓存策略而客户端也可以通过设置请求头中的Cache-Control字段来控制服务器的缓存策略。
HTTP的缓存机制可以用以下图示来描述 ┌───────┐ ┌───────┐┌────►│ Client│◄──────────┤ Server││ └───────┘ └───────┘│ ↑ │├───────────┘ ││ │▼ ▼┌─────────────┐ ┌───────────────────┐│ Cache │ │ Origin ││ Store │◄─────►Cache-Control: max-age │└─────────────┘ └───────────────────┘▲ ▲│ │├───────────┐ │ Cache Miss│ ▼ ││ ┌───────┐ ┌───────┐└─────│ Client│◄──────────┤ Server│└───────┘ └───────┘Cache Hit在这个图示中
Client发起HTTP请求请求会经过缓存Cache。如果缓存中没有对应的资源缓存会将请求发送给Server。Server响应请求并在响应头中携带Cache-Control指令例如max-age指定缓存的有效时间。缓存将来自Server的响应存储在Cache Store中并将响应返回给Client。当Client再次请求相同的资源时请求会首先发送到缓存。如果缓存中存在对应资源且仍在有效期内未过期则缓存命中缓存将直接返回该资源给Client。如果缓存中不存在对应资源或已过期缓存会重新向Server发起请求重复上述过程。
这种缓存机制可以减少对服务器的请求提高响应速度减轻服务器负载。
5. https
HTTPSHypertext Transfer Protocol Secure是HTTP协议的安全版本用于保护网络通信的安全性。HTTPS通过使用SSLSecure Sockets Layer或TLSTransport Layer Security协议来加密HTTP通信内容从而防止数据被窃听、篡改或伪造。
在HTTPS通信中客户端与服务器之间建立安全的加密通道确保数据的隐私和完整性。它使用SSL或TLS协议进行加密以保护数据传输过程中的机密信息例如用户敏感数据、登录凭证、付款信息等。
HTTPS的工作原理大致如下
客户端发起HTTPS请求时服务器会将自己的数字证书发送给客户端。客户端收到服务器的数字证书后会验证证书的合法性和可信任性。若验证通过则生成一个随机的对称密钥并使用服务器的公钥对该密钥进行加密。客户端将加密后的对称密钥发送给服务器。服务器收到加密的对称密钥后使用自己的私钥进行解密得到对称密钥。客户端和服务器之间使用对称密钥进行加密和解密通信内容。
HTTPS可以提供以下安全保护
数据加密通过SSL/TLS协议将通信内容加密防止数据被窃听。数据完整性验证使用数字签名保证数据的完整性防止数据被篡改。身份验证通过数字证书验证服务器的身份防止伪造的服务器进行攻击。
使用HTTPS可以有效提高网络通信的安全性特别是在涉及敏感信息传输的场景如在线支付、个人信息提交等。
