HTTP & ajax | 青训营笔记

Sanfer
64 阅读6分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

HTTP & ajax

HTTP

TCP与HTTP简介

  1. TCP

屏幕截图 2023-01-20 225954.png

  1. HTTP

    • Hyper Text Transfer Protocol超文本传输协议

    • 应用层协议，基于TCP协议

    • 发送请求报文和响应报文

    • 简单可扩展

    • 无状态：没有记忆能力，每个请求都是独立的

      image.png

    • 统一资源定位符URL

    image.png

    HTTP端口号：80

    HTTPS端口号：443

报文格式

  1. 请求报文

image.png

常用请求头
Accept接收类型，表示浏览器支持的MIME类型(对标服务端返回的Content-Type)
Content-Type客户端发送出去实体内容的类型
Cache-Control指定请求和响应遵循的缓存机制，如no-cache
lf-Modified-Since对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内
Expires缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间
Max-age代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存
lf-None-Match对应服务端的ETag，用来匹配文件内容是否改变（非常精确)
Cookie有cookie并且同域访问时会自动带上
Referer该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址, csrf拦截常用到这个字段)
Origin最初的请求是从哪里发起的(只会精确到端口) ，Origin比Referer更尊重隐私
User-Agent用户客户端的一些必要信息，如UA头部等
  1. 响应报文

image.png

常用响应头
Content-Type服务端返回的实体内容的类型
Cache-Control指定请求和响应遵循的缓存机制，如no-cache
Last-Modified请求资源的最后修改时间
Expires应该在什么时候认为文档已经过期，从而不再缓存它
Max-age客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效
ETag资源的特定版本的标识符， Etags类似于指纹
Set-Cookie设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端
Server服务器的一些相关信息
Access-Control-Allow-Origin服务器端允许的请求Origin头部（譬如为*)
  • 常见状态码 status

    1. 200 请求成功

    2. 301 资源（网页等）被永久转移到其他URL

    3. 404 请求的资源（网页等）不存在

    4. 500 内部服务器错误

    HTTP协议 -- 学习Java Web之前你必须精读的知识 - Mr.Yan

  1. Cookie & 缓存

    • Cookie

      Cookie提供了一种机制使得万维网服务器能够“记住”用户，而无需用户主动提供用户标识信息，即 Cookie是一种对无状态的HTTP进行状态化的技术。

      Set-Cookie - response
      Name=value各种cookie的名称和值
      Expires=DateCookie的有效期，缺省时Cookie仅在浏览器关闭之前有效。
      Path=Path限制指定Cookie的发送范围的文件目录，默认为当前
      Domain=domain限制cookie生效的域名，默认为创建cookie的服务域名
      secure仅在HTTPS安全连接时，才可以发送Cookie
      HttpOnlyJavaScript脚本无法获得Cookie

    | SameSite=[None |Strict| Lax] | None同站、跨站请求都可发送
    Strict仅在同站发送
    允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送 |

image.png

  • 缓存

    1. Web缓存把最近的一些请求和响应暂存在本地磁盘中。当新请求到达时，若发现这个请求与暂时存放的请求相同，就返回暂存的响应，而不需要按URL的地址再次去因特网访问该资源。

    2. 强缓存

    • Expires：时间戳

      • Cache-Control：缓存机制

        • 可缓存性

          no-cache：协商缓存验证

          no-store：不使用任何缓存

        • 到期

          max-age：单位是秒,存储的最大周期,相对于请求的时间

        • 重新验证*重新加载

          must-revalidate：一旦资源过期,在成功向原始服务器验证之前,不能使用

      1. 协商缓存

        • Etag/lf-None-Match：资源的特定版本的标识符,类似于指纹

        • Last-Modified/lf-Modified-Since：最后修改时间

      2. 缓存处理流程

image.png

HTTPS

HTTPS在HTTP的基础上通过TSL/SSL加密保证了传输过程的安全性。

对称加密：加密和解密都是使用同一个密钥 非对称加密：加密和解密需要使用两个不同的密钥——公钥(public key)、私钥(private key)

img

跨域

浏览器的同源策略：

同源策略SOP是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

同源指的是 “协议+域名+端口” 三者相同，只要有一个不同就会导致跨域问题

ajax

ajax的作用

页面不刷新获取数据

数据格式

  1. json

    • 语法规定属性名必须要用双引号引起来
    • json转成js对象：JSON.parse();
    • js对象转json：JSON.stringify();

  2. xml

检查接口是否ok

  • postman软件

请求报文

  1. 请求行
    • 请求方式：GET、POST等

      • GET请求

        发送的数据拼接在URL中(密码输入不安全)

        请求行：异步对象名.open("get","URL?参数1=值&参数2=值");

        可以省略请求头

        发送：异步对象名.send(null);

        发送数据写在.open中

      • POST请求

        发送的数据不会拼接在URL中

        请求行：异步对象名.open("post","URL");

        不发数据可以省略请求头

        发送：

        （1）有请求数据：异步对象名.send(参数1=值&参数2=值);

        （2）无请求数据：异步对象名.send(null);

        发送数据写在.send中，必须要写请求头

    • URL路径
  2. 请求头

    • 格式

      名字: 值

    • 内容

      请求方法

      请求路径（URL）

      请求协议版本

      浏览器的各种信息

      (POST/GET)参数

      …………

  3. 空行
  4. 请求体

响应报文

  1. 状态行
    • HTTP协议版本
    • 响应状态码 200 404
    • 响应状态字符串 OK Not Found
  2. 响应头
    • 格式 名字: 值
    • 内容 服务器的响应讯息
  3. 空行
  4. 响应体

步骤

  1. 创建异步对象 XMLHttpRequest

    const 异步对象名 = new XMLHttpRequest();

  2. 设置请求行 .open

    异步对象名.open("请求方式", "请求地址");

  3. 设置请求头 .setRequestHeader get请求可以省略，post请求不发数据也可以省略

    异步对象名.setRequestHeader("键名","值");
// 举个例子
异步对象名.setRequestHeader("Content-type","application/x-www-form-urlencoded");

  4. 注册回调函数 .onload 或者 .onreadystatechange (请求响应回来之后发送)

    // （1）.onload方法，兼容性不好
异步对象名.onload = function()    
{
   //获取 请求数据：异步对象名.responseText
} 
// （2）.onreadystatechange方法，兼容性好
异步对象名.onreadystatechange = function()  
{
   if(异步对象名.readystate === 4)
   {
       if(异步对象名.status >= 200 && 异步对象名.status < 300)
       {
           //函数内容
       }
   }
}

  5. 请求主体 + 发送.send

    • 请求主体
    • 发送.send 
      // 没有请求数据
异步对象名.send();
// 有请求数据（post请求）
异步对象名.send(参数1=值&参数2=值);

  6. 完整过程

    // 1.创建异步对象
const 异步对象名 = new XMLHttpRequest();
// 2.设置请求行
异步对象名.open("请求方式", "请求地址");
// 3.设置请求头（get请求可以省略，post请求不发数据也可以省略）
异步对象名.setRequestHeader("键名","值");
// 4.注册回调函数
异步对象名.onreadystatechange = function() {
    if(异步对象名.readystate === 4){
        if(异步对象名.status >= 200 && 异步对象名.status < 300){
            // 请求成功后的操作
            // 异步对象名.response：响应结果
        } 
        else{
            // 请求失败后的操作
        }
    }
}
// 5.发送请求：get不传参，post传参
异步对象名.send(参数1=值&参数2=值);

jQuery发送Ajax请求的方法

  1. $.get();
  2. $.post();
  3. $.ajax(); [默认get请求]
avatar
文章
阅读
粉丝