JS初学之 AJAX请求方式

目录

一、请求方式

二、后端模拟接口

三、常用请求方式测试

---

一、请求方式

几种常用的请求方式

name	work
get	偏向获取数据
post	偏向提交数据
put	偏向更新数据（全部更新，会把之前的数据覆盖）
delete	偏向删除信息
patch	偏向部分更新

常用的请求方式

name	work
header	偏向获取服务器的头信息
options	偏向获取服务器的设备信息
connect	偏向保留请求方式

注释

为什么解释作用的时候会有偏向一说？

——其实请求方式更多是由后端决定的，比如get几乎可以做任何事，post在后端的配合下也能获取数据等等。

既然如此那为什么要分这么多不同的请求方式？

——不同的请求方式就像是前端和后端交流时的不同语气，我们可以根据不同的场景选择适当的语气，它们就像语气助词，能够更清晰的告诉后端你的选择、意图，但最终做出决定的还是后端。

很多公司写的时候都多用get、post，所以不是说非得按照某种方式去使用。

二、后端模拟接口介绍

学习请求方式，自然要用的接口，但为此去写接口是不现实的，也做不到，所以来学习搭建后端模拟接口。

首先

安装nodejs及进行环境配置，详细教程如下：nodejs安装及环境配置，一切就绪后如下：

第二步

配置json-server——npm install json-server -g

其作用是基于一个json文件就可以创建很多的后端模拟接口，安装方式如下：

第三步

使用并创建模拟接口，使用方式也很简单——在该文件下打开终端，输入json-server .\文件名.json，如下：

此时，后端模拟接口已经创建好了，可以打开看看，如下：

值得一提的是，json文件中的第一节的一个key值就相当于一个接口，有多少key值，就创建了几个接口，下面是我随便写的一个json文件：

三、常用请求方式测试

1、get 

 获取json文件中的所有数据并输出。

如果想获取某个数据，可以修改url，比如获得name=hello的数据，可以使用url：

xhr.open("GET","http://localhost:3000/users?name=hello")

这里的？注意不要忘写。而这也正是get请求方式不安全的一个原因。

        //GET 获取数据
        myget.onclick = function (){
            var xhr = new XMLHttpRequest()
            xhr.open("GET","http://localhost:3000/users")
            xhr.onload = function (){
                //先判断 status为200-299，防止路径错误或后端接口有问题
                //利用正则表达式进行条件判断
                if (/^2\d{2}$/.test(xhr.status)){
                    console.log(JSON.parse(xhr.responseText))
                }
            }
            //发送请求
            xhr.send()
        }

2、post 

提交新数据数据并将其输出。

//下面是post支持的传输数据的结构
//post name=kerwin&age=100 字符串
//post {"name": "kerwin"} JSON数据

//提前说明自己要传输的数据格式
//字符串格式
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")//name=kerwin&age=100
// xhr.send(`name=yuhua&password=23456`)
//josn格式
xhr.setRequestHeader("Content-Type","application/json")

下面以json格式为例：

 //POST 提交数据
        mypost.onclick = function (){
            var xhr = new XMLHttpRequest()
            xhr.open("POST","http://localhost:3000/users")
            xhr.onload = function (){
                if (/^2\d{2}$/.test(xhr.status)){
                    console.log(JSON.parse(xhr.responseText))
                }
            }
            //josn格式
            xhr.setRequestHeader("Content-Type","application/json")
            xhr.send(JSON.stringify({  //将一个对象转为JSON格式传过去
                id: "4",
                name: "yuhua",
                password: "123456"
                }
            ))

        }

看一下json文件中有没有接收到提交的数据：

3、put

更新id为1数据（如果不指出更新哪一条，会覆盖更新全部）并输出。

        //PUT 更新所有数据
        myput.onclick = function (){
            var xhr = new XMLHttpRequest()
            xhr.open("PUT","http://localhost:3000/users/1") //告诉后端你想修改id为1的数据
            xhr.onload = function (){
                if (/^2\d{2}$/.test(xhr.status)){
                    console.log(JSON.parse(xhr.responseText))
                }
            }
            xhr.setRequestHeader("Content-Type","application/json")
            xhr.send(JSON.stringify({
                name: "buhello"
            })) //此时如果只传name,数据更新后会将原本的内容全部覆盖，对象中只有name，password就没了
        }

看一下json文件中数据是否被修改：

同时发现，操作之后password的确被覆盖掉了。

4、patch

更新部分内容（id为2的数据）并输出。

        //PATCH 更新部分数据
        mypatch.onclick = function () {
            var xhr = new XMLHttpRequest()
            xhr.open("PATCH", "http://localhost:3000/users/2") //告诉后端你想修改id为2的数据
            xhr.onload = function () {
                if (/^2\d{2}$/.test(xhr.status)) {
                    console.log(JSON.parse(xhr.responseText))
                }
            }
            xhr.setRequestHeader("Content-Type", "application/json")
            xhr.send(JSON.stringify({
                name: "王德法"
                //password: "7777"
            }))  //如果只更新name，原先的密码也会保留


        }

看一下结果：

id为2的数据中name如愿被修改，而password也得到了保留。

5、delete

删除数id为4的数据并输出。

        //DELETE 删除数据
        mydelete.onclick = function () {
            var xhr = new XMLHttpRequest()
            xhr.open("DELETE", "http://localhost:3000/users/4") //告诉后端你想删除id为4的数据
            xhr.onload = function () {
                if (/^2\d{2}$/.test(xhr.status)) {
                    console.log(JSON.parse(xhr.responseText))
                }
            }
            xhr.setRequestHeader("Content-Type", "application/json")
            xhr.send()
        }

看一下结果：

id为4的数据成功被删除。

注意nodejs后台要打开，否则服务器就自动关闭了。