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

简介: 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月前
|
设计模式 JavaScript 前端开发
JavaScript进阶挑战:巩固核心知识点
以上内容涵盖了从基础到进阶水平所需掌握内容,在日常工作中需要持续实践和深入学习才能真正精通这些知译点。
152 12
|
6月前
|
JavaScript 前端开发 API
Node.js中发起HTTP请求的五种方式
以上五种方式,尽管只是冰山一角,但已经足以让编写Node.js HTTP请求的你,在连接世界的舞台上演奏出华丽的乐章。从原生的 `http`到现代的 `fetch`,每种方式都有独特的风格和表现力,让你的代码随着项目的节奏自由地舞动。
689 65
|
8月前
|
存储 前端开发 JavaScript
JavaScript的重要知识点
以上就是JavaScript的一些重要知识点。学习JavaScript需要理解和掌握这些知识点,才能编写出高效、可维护的代码。同时,还需要不断实践,通过编写项目来提高编程技能。
178 14
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
270 58
|
机器学习/深度学习 JavaScript Cloud Native
Node.js作为一种快速、可扩展的服务器端运行时环境
Node.js作为一种快速、可扩展的服务器端运行时环境
218 8
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
348 2
|
前端开发 JavaScript 应用服务中间件
Nginx 支持 JavaScript:前所未有的扩展
Nginx 是全球领先的高性能 Web 服务器,以其高效的反向代理和负载均衡功能著称。近期,Nginx 正式支持 JavaScript(通过 NJS 模块),基于 V8 引擎,允许在配置中嵌入 JS 代码,极大提升了灵活性和扩展性。开发者可以使用 JavaScript 实现动态请求处理、自定义认证、复杂响应处理、中间件编写及流量控制等功能,显著降低开发和维护难度,同时保持高性能。NJS 模块的引入为 Nginx 带来了前所未有的扩展能力,适应快速变化的业务需求。
364 0
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
127 5
|
存储 JSON JavaScript
JS知识点
JS知识点
142 3
|
前端开发 JavaScript
JavaScript 知识点总结
JavaScript 知识点总结
139 0

热门文章

最新文章