JS初学之 AJAX请求方式

目录

一、请求方式

二、后端模拟接口

三、常用请求方式测试


一、请求方式

几种常用的请求方式

namework
get偏向获取数据
post

偏向提交数据

put偏向更新数据(全部更新,会把之前的数据覆盖)

delete

偏向删除信息

patch偏向部分更新

常用的请求方式

namework
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后台要打开,否则服务器就自动关闭了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值