JS-part16.8-ajax

ajax

+ 前后端交互的一种手段
  + 通过 JS 向服务端发起请求
    => 所有服务端返回的响应都不会直接显示在页面上
    => 而是返回给 JS 这个语言
  + 说明: JS 和服务端交互
    => 依赖于浏览器来发送请求
  + ajax
    => a: async
    => j: javascript
    => a: and
    => x: xml
  
使用方式
  1. 找到一个对象能帮我发送 ajax 请求
    => XMLHttpRequest() 内置构造函数
    => 专门创建实例化对象帮你发送 ajax 请求

  2. 对本次请求进行一些配置
    => open() 的方法
    => 语法: 实例化对象.open(请求方式, 请求地址, 是否异步)
      -> 请求方式: GET POST PUT ...(大小写无所谓)
      -> 请求地址: 你要请求哪一个后端位置
      -> 是否异步: 选填, 默认是 true, 可以选填 false, 表示同步

  3. 把请求发出去
    => send() 方法
    => 语法: 实例化对象.send()

  4. 接收响应
    => onload 事件
    => 实例化对象.onload = function(){}
    => 本次请求结束以后触发(响应成功了以后触发)
    => xhr 里面有一个属性叫做 responseText 就是响应体

<?php

    $arr = array(
        "username" => "Jack",
        "password" => 18
    );

    // 谁请求我, 我就输出给谁
    // echo 'hello world';

    // echo $arr;   
    // print_r($arr);  
    echo json_encode($arr);

?>

console.log('start')

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

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

// 3. 把这个请求发送出去
xhr.send()

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

console.log('end')

打印出来的 ajax 实例化对象

经过open() 方法配置和 send() 方法, 发送出去后, 如下图, 发送请求成功
但是, 此时页面里是没有显示 hello world的, 所以要接收响应

ajax 的异步问题

 1. open 的第三个参数可以配置
   => 默认是 true 表示异步
   => 可以选填 false 表示同步

分析四个步骤
  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)

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

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

console.log('end')

ajax 的兼容

+ ajax 不主动向下兼容
+ ajax 的兼容有两个部分
  1. 创建 ajax 对象
  2. 接收响应

创建 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
  + 你用的 IE 11 浏览器, 跑不起来
    => ajax 是基于内核的兼容

接收响应的兼容

小知识

ajax 状态码

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

0: 创建 ajax 对象成功
1: 配置请求信息完成
2: 请求发送出去了, 响应报文回到了浏览器
3: 浏览器正在解析响应报文
4: 浏览器解析响应报文成功, 已经可以正常使用 xhr.responseText  

const xhr = new XMLHttpRequest()
console.log(xhr.readyState)   // 0

xhr.open('GET','./server/get.php')
console.log(xhr.readyState)   // 1

ajax 的状态码改变事件

+ xhr.onreadystatechange = function(){}

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

xhr.send()

注: 一旦响应体数据太大, 3只能看到一部分,4看到的是全部的

响应状态码

+ 在 xhr 里面还有一个信息表示 响应状态码
+ xhr.status
+ 描述本次请求的状态

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

利用到前3点后完成兼容

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

可见, IE低版本里没有onload事件

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()

发送一个带有参数的 get 请求