JavaScript扩展知识点 01、前后端交互与HTTP协议

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: JavaScript扩展知识点 01、前后端交互与HTTP协议

一、前后端交互


1.1、前端三种方式与后端交互


1、使用浏览器访问网页:在浏览器上输入网址,回车。


2、HTML标签自动发送:浏览器在解析HTML标签的时候,遇到一些特殊标签会再次向服务器发送请求!


自动发送如:link、img、script、iframe。

另外一些标签浏览器解析时不会向服务器发送请求,但是用户可以使用他们向服务器发送请求如:a、form


3、Ajax和Fetch。


扩展:解析过程中来进行发送请求,chrome对于发送请求一般可以并发6个。对于自动发送的请求会进行异步请求,并不会直接等着请求响应后再向下进行解析。


一般对于图片放置在不同的服务器中,这样的话一个页面来发送请求得到不同的资源文件时就不会产生同时对一个服务器发送请求了!


二、HTTP


2.1、介绍HTTP


HTTP(HyperText Transfer Protocol):超文本传输协议。


HTML:超文本标记语言。


超文本定义:原先一个个单一的文本,通过超链接将其联系起来,由原先单一的文本变成可无限延伸、扩展的超级文本、立体文本。



2.2、浏览器与服务器完整的一次请求



1、首先浏览器在发送请求时会去看是否有缓存,有缓存的话直接就使用缓存。


2、没有缓存时就会先去DNS服务器根据域名得到IP地址。


3、得到IP地址之后向服务器发起TCP连接。


4、在进行三次握手成功之后接着发送HTTP请求到服务器。


5、服务器根据请求来发送HTTP响应。



2.3、HTTP报文


请求报文:浏览器向服务器端发送请求时,该请求本身就是信息就是请求报文。


响应报文:服务器向浏览器发送响应时传输的信息,叫响应报文。



报文格式


请求报文:请求、请求头(起始行+首部)、请求体。


GET请求:没有请求体,数据通过请求头携带。

POST请求:有请求头,数据通过请求体携带。

响应报文:响应、响应头(起始行+首部)、响应体。



2.4、HTTP方法


主要有GET、POST、PUT、DELETE(对应查增改删)


GET:获取数据,如获取资源(文件)。

POST:创建数据,如注册。

PUT:更新数据,如修改个人信息,修改密码。

DELETE:删除数据,如删除一条评论。

若是我们不采用RESTful风格来编写接口


通过用户ID获取个人信息,使用GET方法(查):https://www.imooc.com/api/http/getUser?id=1
注册新用户,使用POST方法(增):https://www.imooc.com/api/http/addUser
修改一个用户,使用POST方法(改):https://www.imooc.com/api/http/modifyUser
删除一个用户,使用POST方法(删):https://www.imooc.com/api/http/deleteUser


特征:我们可以看到不采用RESTFul风格写出来的api,查使用get请求,增删改都使用post请求,并且对于判断要让服务器执行什么操作需要使用如getUser、addUser、modifyUser,需要有很强的语义化对用户进行操作,这样子并不是很简洁。



采用RESTful风格编写接口(完美应用到了四个方法)


通过用户ID获取个人信息,使用GET方法(查):https://www.imooc.com/api/http/User?id=1
注册新用户,使用POST方法(增):https://www.imooc.com/api/http/User
修改一个用户,使用PUT方法(改):https://www.imooc.com/api/http/User
删除一个用户,使用Delete方法(删):https://www.imooc.com/api/http/User


好处:我们可以看到对于用户的相关请求仅仅使用/User就能够表示,怎么能够确定是什么含义呢?借助http方法来进行表名,后端可以根据http方法来进行识别要进行的操作。



2.5、GET与POST区别



2.6、HTTP状态码


状态码:定义服务器对请求的处理结果,是服务器返回的!


HTTP状态码语义:


100-199:代表请求已被接收,需要继续处理。
  101:websocket,像vscode就是使用的websocket来实现的实时更新浏览器页面状态,使用live server插件后,浏览器就会向服务器发送ws的文件,你可以在浏览器上查看到(火狐)。
200-299:成功,最常见的就是200。
300-399:重定向
  301:Moved Permanently永久性移动,重定向请求缓存在浏览器本地,之后都会直接向服务器发送重定向地址的请求获取到数据。弊端就是有时候服务器重定向仅仅只是暂时的,由于使用了该状态码后客户端每次就会直接向重定向地址发送请求了,造成不可控的情况!
  302 :Moved Temporarily暂时性移动,浏览器下次加载该资源时会先发送请求来得到资源而不是从缓存中获取。
  304 Not Modified:客户端向服务器发送请求时得到304,表示未修改,此时客户端就会收到通知表示服务器端的资源并没有修改那么就会继续使用本地缓存的资源。
400-499:请求错误(浏览器有误)
  404:找不到指定的资源文件,路径有误。
500-599:服务器错误
  500:Internet Server Error。


相关文章
|
2月前
|
缓存 应用服务中间件 网络安全
Nginx中配置HTTP2协议的方法
Nginx中配置HTTP2协议的方法
125 7
|
13天前
|
域名解析 缓存 网络协议
Web基础与HTTP协议
通过掌握这些基础知识和技术,开发者可以更加高效地构建和优化Web应用,提供更好的用户体验和系统性能。
64 15
|
8天前
|
前端开发 网络协议 安全
【网络原理】——HTTP协议、fiddler抓包
HTTP超文本传输,HTML,fiddler抓包,URL,urlencode,HTTP首行方法,GET方法,POST方法
|
10天前
|
缓存 网络协议 算法
从零开始掌握HTTP协议
本文介绍HTTP协议的演变,从HTTP1.0到HTTP2.0。HTTP1.0为无状态连接,每次请求独立;HTTP1.1引入持久连接、管道化请求和更多状态码;HTTP2.0采用二进制分帧、多路复用、头部压缩及服务器主动推送,大幅提升性能与用户体验。了解这些区别有助于开发者优化应用和服务。
|
11天前
|
网络协议 安全 网络安全
探索网络模型与协议:从OSI到HTTPs的原理解析
OSI七层网络模型和TCP/IP四层模型是理解和设计计算机网络的框架。OSI模型包括物理层、数据链路层、网络层、传输层、会话层、表示层和应用层,而TCP/IP模型则简化为链路层、网络层、传输层和 HTTPS协议基于HTTP并通过TLS/SSL加密数据,确保安全传输。其连接过程涉及TCP三次握手、SSL证书验证、对称密钥交换等步骤,以保障通信的安全性和完整性。数字信封技术使用非对称加密和数字证书确保数据的机密性和身份认证。 浏览器通过Https访问网站的过程包括输入网址、DNS解析、建立TCP连接、发送HTTPS请求、接收响应、验证证书和解析网页内容等步骤,确保用户与服务器之间的安全通信。
57 1
|
2月前
|
Dubbo 安全 应用服务中间件
Apache Dubbo 正式发布 HTTP/3 版本 RPC 协议,弱网效率提升 6 倍
在 Apache Dubbo 3.3.0 版本之后,官方推出了全新升级的 Triple X 协议,全面支持 HTTP/1、HTTP/2 和 HTTP/3 协议。本文将围绕 Triple 协议对 HTTP/3 的支持进行详细阐述,包括其设计目标、实际应用案例、性能测试结果以及源码架构分析等内容。
|
2月前
|
安全 搜索推荐 网络安全
HTTPS协议是**一种通过计算机网络进行安全通信的传输协议
HTTPS协议是**一种通过计算机网络进行安全通信的传输协议
70 11
|
2月前
|
缓存 安全 网络协议
HTTPS协议的历史发展
HTTPS协议的历史发展
48 8
|
2月前
|
安全 应用服务中间件 Linux
判断一个网站是否使用HTTPS协议
判断一个网站是否使用HTTPS协议
81 4
|
2月前
|
算法 网络协议 安全
HTTP/2 协议的缺点是什么?
HTTP/2 协议的缺点是什么?
102 13