Ajax（一）

一：Http协议概述

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

在http协议的约定下，客户端可以向服务器发送请求，服务器在接收到请求之后，给与客户端响应。（客户端向服务端发送请求，服务器会给浏览器一定的响应）

浏览器→服务器（浏览器向服务器请求index.html文件数据）

服务器←浏览器（服务器接到请求，把index.html文件响应给浏览器）

二：Http协议请求的常用方法

http协议常用的四种方法，用来完成数据的增、删、改、查操作。

get方法：获取数据

post方法：提交数据（添加数据）

put方法：修改数据

delete方法：删除数据

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

这些操作仅仅是一种约定（需要手动编写后台代码，不是说用get方法直接就能获取到数据），例如：我们用get请求配合服务器程序，可以获得数据，同样也可以添加、删除、修改数据，但是为了规范我们的程序，通常只用get方法来查询数据。

三、http协议状态码

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

1.100~199（信息性状态码）：HTTP/1.1向协议中引入了信息性状态码。

2.200~299（成功状态码）：客户端发送请求时，这些请求通常都是成功的。服务器有一组用来表示成功的状态码，分别对应于不同类型的请求。

3.300~399（重定向状态码）：重定向状态码要么告知客户端使用替代位置来访问他们所感兴趣的资源，要么就提供一个替代的响应而不是资源的内容。

4.400~499（客户端状态码）：有时客户端会发生一些服务器无法处理的东西。浏览网页时，我们都看到过臭名昭著的400 Not found错误码，这只是服务器在告诉我们，它对我们请求的资源一无所知。

5.500~599（服务器状态码）：有时客户端发送了一条有效请求，服务器自身却出错了。这些会返回5xx状态码。

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

200 OK：请求被正常处理

404 Not found：服务器找不到客户端请求的资源，也有可能是服务器不想让你访问二故意返回404

500 Internal Server Error：服务器内部错误（服务器中模板的语法写错，nunjucks模板加载出错了，都会引起500这个错误）

四、Postman（非常常用的工具，要会用）

postman可以模拟浏览器向服务器发送请求。

常用的按钮：create a request

在使用postman之前，我们需要先完成服务器端程序，来处理数据的增删改查。

示例代码如下：

let friutlist = ['香蕉','苹果','鸭梨'];

router.get('/fruits',async(ctx) => {

        ctx.body = friutlist;

})

router.post('/fruits',async(ctx) => {

    let fruit = ctx.request.body.fruit;

    friutlist.push(fruit);

    ctx.body = friutlist;

})

router.put('/fruits/:id',async(ctx) => {

    let id = ctx.params.id;（可以获取127.0.0.1:3000/fruits/1中的1）

    let fruit = ctx.request.body.fruit;

    friutlist.splice(id,1,fruit);

    ctx.body = friutlist;

})

router.delete('/fruits/:id',async(ctx) => {

    let id = ctx.params.id;

    friutlist.splice(id,1)

    ctx.body = friutlist;

})

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

array。splice（要删除元素的索引，删除几个元素，替换删除元素的元素）；

let friutlist = ['香蕉','苹果','鸭梨'];

friutlist.splice(0,1) //从索引为0的元素开始，删除一个元素，此案例会删除香蕉-删除功能。

friutlist.splice(1,0,'草莓')  //从索引为1的元素开始，删除0个元素，并在删除元素的位置插入'草莓'-添加功能。

friutlist.splice(1,1,'草莓')  //从索引为1的元素开始。删除1个元素，并在删除元素的位置插入'草莓'-修改功能。

五、Chrome调试工具

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

点击请求列表，可以看到请求的内容，头部信息和响应信息。