ajax补充

ajax

• 前后端交互的一种的手段

• 通过JS向服务端发起请求

  • 所有服务端返回的响应都不会直接显示在页面上
  • 而是返回给js这个语言

• 说明：JS和服务端交互

  • 依赖于浏览器来发送请求

• ajax

  • async 异步
  • javascript
  • and
  • xml：更严格的html格式

使用方法

1. 找到一个对象能帮我发送ajax请求
   • XMLHttpRequest()内置构造函数
   • 专门创建实例化对象帮你发送ajax请求
2. 对本次请求进行一些配置
   • open()的方法
   • 语法：xhr.open(请求方式，请求地址，是否异步)
     • 请求方式 ：GET POST PUT…(大小写无所谓)
     • 请求地址：你要请求哪一个后端
     • 是否异步：选填，默认是true，可以选填false,表示同步
3. 把请求发出去
   • send()方法
   • 语法：xhr.send()
4. 接收响应
   • onload事件
   • 语法：xhr.οnlοad=function(){}
   • 本次请求结束以后出发(响应成功了以后触发)
   • xhr里面有一个属性叫做responText就是响应体

ajax的异步问题

• 分析四个步骤

  1. 创建ajax对象。同步代码
  2. 配置请求信息，同步代码
  3. 发送请求，异步代码，当代码执行到这句话的时候，先把请求发出去
     • 等待响应的过程是异步
  4. 事件 会在满足条件的时候触发
     • 条件：响应回来

• 异步执行的时候

  • console.log(‘start’)
  • 1.创建ajax对象
  • 2.配置请求信息
  • 3-1.把请求发出去
  • 4.绑定事件，请求完成的事件
  • console.log(‘end’)
  • 3-2响应回到客户端，触发事件
  • console.log(‘响应体’)

• 同步步执行的时候

  • console.log(‘start’)
  • 1.创建ajax对象
  • 2.配置请求信息
  • 3-1.把请求发出去(同步)，等到响应回来再继续执行代码
  • 3-2响应回到客户端，不会触发事件，因为事件还没有绑定
  • 4.绑定事件, 事件再也不会触发了
  • console.log(‘end’)
  • 如果想接收到响应, 需要再 send 之前绑定事件

• 结论

  • 同步的时候, 事件必须写在 send 之前
  • 异步的时候, 事件写在前面后面无所谓
  • 书写 ajax 的时候, 都要按照 1 2 4 3 的步骤写

  console.log('start')

    // 1. 创建一个 ajax 实例化对象
    const xhr = new XMLHttpRequest()

    // 2. 配置本次请求的信息
    xhr.open('GET', './server/get.php', false)

    // 4. 接收结果
    xhr.onload = function () {
      console.log(JSON.parse(xhr.responseText))
    }

    // 3. 把这个请求发送出去
    xhr.send() // 发出去, 接收回来响应

    console.log('end')

ajax的兼容

ajax不主动向下兼容

• ajax 的兼容有两个部分
  • 创建ajax对象
  • 接收响应

创建 ajax 对象的兼容

   1. new XMLHttpRequest()   标准浏览器使用
   2.  new ActiveXObject('Msxml.XMLHTTP')   IE 7 8 9
   3. new ActiveXObject('Msxml2.XMLHTTP')  IE 6
   4. new ActiveXObject('Microsoft.XMLHTTP') IE 5.5+
   5. 再向下的 IE 不支持 ajax
   6. 你用的 IE 11 浏览器, 跑不起来
   7. ajax 是基于内核的兼容

接收响应的兼容

• 在IE低版本没有 onload 事件
• 在IE 低版本只能使用 onreadystatechange 事件来接收响应
  • 在事件里面进行判断
  • xhr.status 再 200 ~ 299 之间
  • xhr.readyState === 4 的时候 正常使用响应体

    var xhr = new XMLHttpRequest()
    console.log(xhr)
    xhr.open('GET', './server/get.php')
    xhr.onreadystatechange = function () {
      if (xhr.status >= 200 && xhr.status < 300 && xhr.readyState === 4) {
        console.log(xhr.responseText)
      }
    }
    xhr.send()

ajax 状态码

• 状态码
  • 响应状态码: 描述本次请求的状态
  • ajax状态码: 描述 ajax 进行到哪一个步骤了
• 语法: xhr.readyState

0：创建Ajax成功

1：配置请求成功

2：请求发出去了，响应报文回到了浏览器

3：浏览器正在解析响应报文

4：浏览器解析响应报文成功，已经可以正常使用xhr.responseTest

 // 绑定一个状态码改变事件
    xhr.onreadystatechange = function () {
      console.log(xhr.readyState)
      if (xhr.readyState === 2) {
        console.log('2 响应体 ' , xhr.responseText)
      }
      if (xhr.readyState === 3) {
        console.log('3 响应体 ' , xhr.responseText)
      }
      if (xhr.readyState === 4) {
        console.log('4 响应体 ', xhr.responseText)
      }
    }
    xhr.send()

• 响应状态码
  • 在xhr里面还有一个信息表示响应状态码
  • xhr.statue
  • 描述本次请求
  • 200为成功

 var xhr = new XMLHttpRequest()
    xhr.open('GET', './server/get.php')
    xhr.onload = function () {
      console.log(xhr)
    }
    xhr.send()

GET

• 发送一个带有参数的get请求
  • get请求就是直接在地址栏后面拼接queryString方式携带参数
  • open的第二个参数就是请求地址
  • 我们把要携带给后端的内容通过open的第二个参数携带过去

var xhr = new XMLHttpRequest()
    xhr.open('GET', './server/get.php?a=100&b=200')
    xhr.onload = function () {
      console.log(JSON.parse(xhr.responseText))
    }
    xhr.send()

POST

• 发送一个带有参数的post请求
  • post携带参数是在请求体，不需要在地址栏拼接
    • 数据格式无所谓，但是要和content-type配套
  • send()的括号里面就是请求体
  • 因为你没有设置content-type，所以后端不能正常按照$_POST的方式解析
    • 设置一下请求头，content-type 设置为application/x-www-form-urlencoded
    • 语法：xhr.setRequestHeader(key,value)

var xhr = new XMLHttpRequest()
    xhr.open('POST', './server/post.php')
    xhr.onload = function () {
      console.log(JSON.parse(xhr.responseText))
    }
     // post 请求需要再请求之前设置请求头
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    xhr.send('a=100&b=200')

前后端交互的报错

JSON解析报错

• 分析原因
  • 报错：JSON.parse(xxx) 出错了
  • xxx：哪来的，响应体，后端给的
  • 百分百：后端给的到底是什么
  • 检查：看后端给的到底是什么
    • 把json.parse去掉，直接打印 xhr.responseText
    • 打开浏览器 -> network -> 找到你的这个请求 -> 点击 response

 const xhr = new XMLHttpRequest()
    xhr.open('GET', './server/get.php?a=100&username=guoxiang')
    xhr.onload = function () {
      console.log(JSON.parse(xhr.responseText))
    }
    xhr.send()

• 前后端分离式的开发模式

  • 前端负责和用户沟通(拿到你输入的用户名密码)

  • 前端负责把用户名和密码发给后端

  • 后端负责接收前端的信息

  • 后端负责去数据库操作

  • 后端把结果返回给前端(不做任何客户端的操作)

  • 前端接收到后端给的结果以后反馈给用户

• 前后端不分离

  • 大部分的前端操作，由后端来控制