专栏首页学习猿地【融职培训】Web前端学习 第6章 jQuery Ajax 1 HTTP协议

【融职培训】Web前端学习 第6章 jQuery Ajax 1 HTTP协议

一、http协议概述

http协议全称超文本传输协议,大家只要把它理解成为一个服务器与客户端通信的协议即可。

在http协议的约定下,客户端可以向服务器发送请求,服务器在接收到请求之后,给予客户端响应。

二、http协议请求的常用方法

本节我们讲解http协议常用的四种方法,用来完成数据的增、删、改、查操作。

  • get方法:获取数据
  • post方法:提交数据
  • put方法:修改数据
  • delete方法:删除数据

对于初学者,这里需要注意的是,http请求本身并不会完成增删改查的基本操作,真正的操作仍然是由服务器完成。

这些操作仅仅是一种约定,例如:我们用get请求配合服务器程序,可以获取数据,同样也可以添加、删除、修改数据,但是为了规范我们的程序,通常只用get方法来查询数据。

三、http协议状态码

http的状态码被分为5大类,状态码为客户端提供一种理解事务处理结果的便捷方式,我们在network工具中可以看到响应头中的的状态码。

  1. 100~199(信息性状态码):HTTP/1.1向协议中引入了信息性状态码
  2. 200~299(成功状态码):客户端发起请求时,这些请求通常都是成功的。服务器有一组用来表示成功的状态码,分别对应于不同类型的请求
  3. 300~399(重定向状态码):重定向状态码要么告知客户端使用替代位置来访问他们所感兴趣的资源,要么就提供一个替代的响应而不是资源的内容
  4. 400~499(客户端状态码):有时客户端会发送一些服务器无法处理的东西。浏览网页时,我们都看到过臭名昭著的404 Not Found错误码,这只是服务器在告诉我们,它对我们请求的资源一无所知
  5. 500~599(服务器状态码):有时客户端发送了一条有效请求,服务器自身却出错了,这些会返回5xx状态码

下面三个常用的HTTP状态码使我们必须要记住的:

  • 200 OK :请求被正常处理
  • 404 Not Found:服务器找不到客户端请求的资源,也有可能是服务器不想 让你访问而故意返回404
  • 500 Internal Server Error:服务器内部错误

四、Postman

Postman可以模拟浏览器向服务器发送请求,首先我们需要到官网下载Postman。

下载地址

下载之后需要注册用户并登录

在使用Postman之前,我们需要先完成服务器端程序,来处理数据的增删改查,示例代码如下所示:

 1 //数据
 2 let dataList = ["香蕉","苹果","鸭梨"];
 3 
 4 //get查看
 5 router.get("/fruits", ctx => {
 6     ctx.body = dataList;
 7 })
 8 //post添加
 9 router.post("/fruits", ctx => {
10     let fruit = ctx.request.body.fruit;
11     dataList.push(fruit);
12     ctx.body = dataList;
13 })
14 
15 //put修改
16 router.put("/fruits/:id", ctx => {
17     let id = ctx.params.id;
18     let fruit = ctx.request.body.fruit;
19     dataList.splice(id,1,fruit);
20     ctx.body = dataList;
21 })
22 //delete删除
23 router.delete("/fruits/:id", ctx => {
24     let id = ctx.params.id;
25     dataList.splice(id,1);
26     ctx.body = dataList;
27 })

数组的splice可以实现数组元素的添加、删除、和修改。用法如下:

array.splice(要删除元素的索引,删除几个元素,替换删除元素的元素);

通过设置上面描述的三个参数,就可以实现数据的增删改查,实例代码如下所示:

1 let dataList = ["香蕉","苹果","鸭梨"];
2 dataList.splice(0,1) //从索引为0的元素开始,删除1个元素,此案例会删除香蕉-删除功能。
3 dataList.splice(1,0,"草莓") //从索引为1的元素开始,删除0个元素,并在删除元素的位置插入"草莓"-添加功能。
4 dataList.splice(1,1,"草莓") //从索引为1的元素开始,删除1个元素,并在删除元素的位置插入"草莓"-修改功能。

五、Chrome调试工具

Chrome浏览器的network工具可以很便捷地查看请求与响应的信息。

如上图所示,我们可以通过当前页面的请求列表、请求头信息、响应信息、cookie等内容。

六、课后练习

默认数据如下所示,

["香蕉","苹果","鸭梨"]

通过postman实现后台数据列表的增删改查,要求如下:

  1. get方法获取数据列表
  2. post添加数据,然后重新查询
  3. put修改数据,然后重新查询
  4. delete删除数据,然后重新查询

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Web前端学习 第6章 jQuery Ajax 1 HTTP协议

    http协议全称超文本传输协议,大家只要把它理解成为一个服务器与客户端通信的协议即可。

    学习猿地
  • 【融职培训】Web前端学习 第5章 node基础教程9 cookie与session

    在说cookie与session的概念之前,我们讨论一个问题,那就是如何保持用户的登录状态。

    学习猿地
  • Web前端学习 第5章 node基础教程9 cookie与session

    在说cookie与session的概念之前,我们讨论一个问题,那就是如何保持用户的登录状态。

    学习猿地
  • Web前端学习 第6章 jQuery Ajax 1 HTTP协议

    http协议全称超文本传输协议,大家只要把它理解成为一个服务器与客户端通信的协议即可。

    学习猿地
  • Ken的杂谈从ASP.NET Core 2.1迁移到3.1

    Ken的杂谈从2017年就开始采用 .NET Core作为开发框架,当时用的还是 .NET Core 2.0。 随后,.NET Core 2.1(LTS) 在2...

    KenTalk
  • nginx实操(3)内部变量说明

    内置变量存放在  ngx_http_core_module 模块中,变量的命名方式和apache 服务器变量是一致的。总而言之,这些变量代表着客户端请求头的内容...

    py3study
  • Pytorch--Dropout笔记

    dropout常常用于抑制过拟合,pytorch也提供了很方便的函数。但是经常不知道dropout的参数p是什么意思。在TensorFlow中p叫做keep_p...

    marsggbo
  • 30秒让图片变裸照,使用无门槛,这个软件比Deepfake杀伤力更大

    2017 年后,伪造逼真图像的 Deepfake 技术利用其将女性图片嫁接至色情图像内容引起很非议,用它恶意伪造的图像开始大规模在互联网上流传,也给人们辨别图像...

    AI科技大本营
  • 你必须了解的反射——反射来实现实体验证

    开发工作中,都会需要针对传入的参数进行验证,特别是针对实体进行验证,确保传入的参数格式正确。这里做了一个非常简单的组件进行验证。抛砖引玉,让大家深入思考下反射的...

    itmifen
  • 在HTTP响应标题中隐藏ASP.NET MVC的版本

    在默认情况下,ASP.NET MVC网站会在HTTP响应标题(Response Header)中动态添加目前使用的ASP.NET MVC版本编号。如果使用Fid...

    跟着阿笨一起玩NET

扫码关注云+社区

领取腾讯云代金券