ip协议和http协议

最新推荐文章于 2024-09-13 10:28:26 发布

YUVAL_

最新推荐文章于 2024-09-13 10:28:26 发布

阅读量977

点赞数 26

分类专栏：全栈开发文章标签： tcp/ip http 网络协议

本文链接：https://blog.csdn.net/2302_80485795/article/details/142187264

版权

全栈开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇文章不会讲ip协议和http协议的原理，流程等细节，只会讲我们在web开发时怎么运用这两个协议

ip协议

互联网上以ip地址标识每个设备的身份，所以当你要与某个设备进行沟通时，就要用ip协议来找到它

这就是ip协议需要我们掌握的最重要的用途：“找人”

我们可以看看自己的电脑的ip地址，Windows系统使用下面的命令来查看

ipconfig

一个设备可以拥有多个ip地址，因为一个设备可以同时处在不同的局域网中

这里的192.168.239.144是我的PC在校园网中的ip地址，此时同时处于校园网内的其他设备，就可以通过192.168.239.144 访问我的PC

上面的172.17.240.1 是我的PC在 wsl 局域网中的ip地址，此时我安装的 wsl，就可以通过172.17.240.1 来访问我的PC（wsl 不了解的话我们在后续将会提到）

我们购买的服务器位于公网，其ip也被称为公网ip，我的PC位于内网，上面的两个ip地址是内网ip。也就是说，我的PC可以ping通我的服务器，但我的服务器却ping不通我的PC

在cmd中输入以下命令即可查看是否ping通：

ping {你的公网ip}

http协议

http协议是互联网极其常用的协议，其传递信息的形式基于http报文，一个简单的http请求报文（Request）一般是这样的形式：

下面是详解：（如果有不懂的可以根据关键词搜索，这里不再赘述）

除了请求报文之外，还有http响应报文，一个简单的http响应报文（Response）一般是这样的形式

下面是详解：

还有两个比较重要的概念：请求方法 和 http状态码

请求方法有非常多，我们甚至可以自定义请求方法，一般来说，常用的请求方法有GET 和 POST

GET方法是http协议中默认的请求方法，你在浏览器中随便输入一个url地址，就会通过GET方法来访问，该方法用于向服务器获取信息

POST方法用于向服务器提交信息，提交的内容放在请求体中。请求体支持不同的格式，常用的格式有：纯文本（txt）、json、XML、表单等等

请求体的格式通过Content-Type请求头进行指定

这里重点讲解 表单格式 和 json格式

一个使用表单格式的POST请求一般像这样：

表单使用键值对的方式来表示信息，以 & 符号分隔不同的键值对，和GET请求是一样的

一个使用json格式的POST请求一般像这样：

json格式表示信息的方法和python的字典、js的对象很像，由于其属于通用格式，在大多数编程语言中都能使用，所以在web领域广泛应用

要具体了解json格式：JSON教程

其他请求方法可以参考：HTTP请求方法

接下来我们来讲http状态码，它的数量也很多，我们没必要全部记住，比较重要的状态码有

200 OK ：请求成功，一切正常

302 Found ：资源重定向

403 Forbidden ：一切正常，但是服务器拒绝处理该请求

404 not found ：服务器无法根据客户端的请求找到资源，一般是url地址错了

500 Internal Server Error ：服务器内部错误，一般是后端代码错了

根据不同的状态码，我们可以知道http 请求的处理情况，在debug时非常有用

想要了解其他状态码请参考：HTTP状态码

Cookie 技术

Cookie 以键值对的方式存储在本地浏览器中，在发送请求报文时，将会把Cookie添加到请求头中

Cookie一般用于身份的校验

使用fetch

fetch是JavaScript用于发送http请求和处理http响应的API，在不同的编程语言中，其提供的API也不尽相同，例如python的requests库、Vue框架的axios，如果你使用了其他语言/框架，就必须要使用其提供的API来发送报文。

前端与后端的沟通就要靠fetch来发送报文，下面是一些使用案例：

fetch("http://example.com/api?a=1",{
    //设置请求方法
    method: "POST",
    //设置请求头
    headers: {
        //没有这个请求头后端不认json
        "Content-Type": "application/json",
    },
    //设置请求体
    body: JSON.stringify({
        username: "admin",
        password: "admin123",
}),
})
.then((resp) => resp.json()) //当响应为json格式时的解析方法
.then((data) => console.log(data))

//定义异步函数（使用关键字 async）
async function send_form(url, form_id){
    //获取表单内容
    const form = new FormData(document.getElementById(form_id));
    //等待fetch完成（使用关键字await）
    const resp = await fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "x-www-form-urlencoded",
},
        body: form, //表单内容放置在请求体中
})；
    return resp;
}

其他fetch API的用法请自行搜索