AJAX_前端知识库

先总结

const xhr = new XMLHttpRequest()
//xhr.open('请求的方式（不区分大小写）', '请求的地址', '一个布尔值')
xhr.open('get', 'http://localhost:8888/test/first', true)
//3.发送请求
xhr.send(null)
//4.接受响应
xhr.onload = function () {
  // console.log('现在后端已经给我们返回了 我们想要的数据')
  console.log(xhr.responseText)
}

异步同步

ajax是否异步第二部配置的第三个参数决定的。也就是那个布尔值

默认为true 代表的是开始起步,如果传递的是false 代表关闭异步启用同步

需要的是先接受响应再发送请求

get 请求方式

xhr.open('get', 'http://localhost:8888/test/first?key=value&key2=value2', true)

post 请求方式

post: 也是需要传递字符串, 只不过不在放在地址路径后, 而是放在请求体内书写(其实就是 xhr.send())

在传参的时候还需要配置一个请求头中的属性 content-type

content-type 赋值的时候, 还要区分我们传递的是普通字符串, 还是 json 格式的字符串

普通字符串: xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') |
json字符串: xhr.setRequestHeader('content-type', 'application/json')

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 需要提交到服务端的数据可以通过 send 方法的参数传递
// 格式：key1=value1&key2=value2
xhr.send('name=zhang&age=300')

快速实现

      //1.创建一个ajax对象

      const xhr = new XMLHttpRequest()


      //2.配置ajax对象
      //. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
      //xhr.open('请求的方式（不区分大小写）', '请求的地址', '一个布尔值')
      xhr.open('get', 'http://localhost:8888/test/first', true)


      //3.发送请求
      //通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
      xhr.send(null)
      // 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传

      //4.接受响应 新方法2.0
      xhr.onload = function () {
        // console.log('现在后端已经给我们返回了 我们想要的数据')
        console.log(xhr.responseText)
      }
      
      //第二种方法 老方法接受响应
      // 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作 
      xhr.onreadystatechange = function () { 
        // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成 
        if (this.readyState === 4) { 
        // 通过 xhr 的 responseText 获取到响应的响应体 
        console.log(this) 
        }

ajax异步问题

ajax是否异步第二部配置的第三个参数决定的。也就是那个布尔值

默认为true 代表的是开始起步,如果传递的是false 代表关闭异步启用同步

需要的是先接受响应再发送请求

同步和异步的差别

创建一个ajax 对象(同步代码)
配置对象 (同步代码，但是第三个参数决定)
发送请求 (根据上一步的配置们才能看出是否为异步)
接受响应 (同步代码)
如果传递的是true 或者没有传递，那么为异步，此时的运行流程

如果传递的是true或者没有传递那么为异步此时的运行流程

创建一个对象
配置对象
发送请求
接受响应
响应完成了

如果传递的是 false, 那么为同步, 此时的运行流程

#创建一个对象
配置对象
发送一个请求, 等待请求完成后, 开始执行后边的代码
接收响应 (前边三步已经把这个请求完全的运行结束了, 所以此时不可能再触发这个函数了)

如果传递的是 false, 那么为同步, 此时的运行流程 |

1. 创建一个对象
1. 配置对象
1. 接收响应, 等到请求完成的时候, 会触发
1. 发送一个请求, 等待请求完成后, 开始执行后边的代码

总结

如果传递是异步, 可以按照 1234的流程书写(1243也可以)
如果传递的是同步, 必须按照 1243 的流程书写
所以在开发的时候, 为了方便起见, 一般都会书写为 1243

http传输协议

/*

http 传输协议
   还有一个协议https 相对于http 安全一些

根据传输协议规定,必须是由前端向后端发送请求，发送请求的时候如果要携带一些参数，
必须是字符串格式
      
 1.建立链接
    浏览器和服务端 建立一个连接

2.发送请求
   要求前端必须以'请求报文'的形式发送
       请求首行
       请求首部

3.接收响应
    要求后端必须以'响应报文'的形式返回
    响应报文内有一个东西叫做响应状态码
        响应首行
        响应首部
        响应主体
    
4.断开连接
     浏览器和服务端的连接断开

        响应状态码
          100~199 表明链接还在继续
          200~299 表明连接各种成功  但现在只会返回一个200
          300~399 表示请求重定向
          400~499 表示请求失败   但现在只会看到一些403 404 401
          500~599 服务其错误 前端无关 后端问题

readyState AJAX状态码

由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次，所以我们有必要了解每一个状态值代表的含义：

标题	状态描述	说明
0	UNSENT	代理（XHR）被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用，建立了连接。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且已经可以获取状态行和响应头
3	LOADING	响应体下载中， responseText 属性可能已经包含部分数据
4	DONE	响应体下载完成，可以直接使用 responseText 。

      var xhr = new XMLHttpRequest()
      console.log(xhr.readyState)
      // => 0
      // 初始化 请求代理对象
      
      xhr.open('GET', 'time.php')
      console.log(xhr.readyState)
      // => 1    
      // open 方法已经调用，建立一个与服务端特定端口的连接
      
      xhr.send()
      xhr.addEventListener('readystatechange', function () {
        switch (this.readyState) {
          case 2:
            // => 2
            // 已经接受到了响应报文的响应头
            // 可以拿到头
            // console.log(this.getAllResponseHeaders())
            console.log(this.getResponseHeader('server'))
            // 但是还没有拿到体
            console.log(this.responseText)
            break

          case 3:
            // => 3
            // 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整
            // 在这里处理响应体不保险（不可靠）
            console.log(this.responseText)
            break

          case 4:
            // => 4
            // 一切 OK （整个响应报文已经完整下载下来了）
            // 这里处理响应体
            console.log(this.responseText)
            break
        }
      })

请求方法

get 偏向于获取的语义 (商品列表数据, 用户详情, 商品详情)

delete 偏向于获取的语义 (删除某一个内容)

post 偏向于修改的语义 (修改用户名, 修改密码)

put 偏向于修改的语义 (修改库存, 修改收藏数量)

等等.....

现在市面公司中常用的方式只有两个, get/post

GET 请求

通常在一次 GET 请求过程中，参数传递都是通过 URL 地址中的 ? 参数传递。

拼接在路径后即可

http://localhost:8888/test/first?key=value` http://localhost:8888/test/first?key=value&key2=value2

const xhr = new XMLHttpRequest()

//2 = 两边不要给空格
//// GET 请求传递参数通常使用的是问号传参 
// 这里可以在请求地址后面加上参数，从而传递数据到服务端
xhr.open('get', 'http://localhost:8888/test/third?name=zhang&age=12')

//3.发送请求
xhr.send(null)

//4.配置接收响应的函数

xhr.onload = function () {
    const res = JSON.parse(xhr.responseText)
console.log(res)
}

POST请求