ajax

ajax

前后端交互的一种手段

        通过 JS 向服务端发起请求

          所有服务端返回的响应都不会直接显示再页面上

          而是返回给 js 这个语言

          依赖于浏览器来发送请求

        ajax

          a: async

          j: javascript

          a: and

        x: xml

这里要简单说一下 session

      存在于 服务器 端的存储空间

      当他打开的那一瞬间, 就会生成一个 "密码"

      这个密码会自动存储到 cookie 里面

      等到返回前端的时候, 会自动把"密码"带回去

      只要向 session 空间里面存储内容或者获取内容

        必须要先开启, 后使用

开启 session 空间

session_start();

存储一些数据

PHP 有一个内置的 关联型数组就叫做 $_SESSION

  session_start();// 2. 存储  $_SESSION['login'] = 1;  echo $_SESSION['login'];

 使用方式

        1. 找到一个对象能帮我发送 ajax 请求

          XMLHttpRequest() 内置构造函数

          专门创建实例化对象帮你发送 ajax 请求

    const xhr = new XMLHttpRequest()；

2. 对本次请求进行一些配置

          open() 的方法

          使用方法: xhr.open(请求方式, 请求地址, 是否异步)

            请求方式: GET POST PUT ...(大小写无所谓)

            请求地址: 你要请求哪一个后端位置

            是否异步: 选填, 默认是 true, 可以选填 false, 表示同步

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

    3. 把请求发出去

          send() 方法

          使用方法: xhr.send()

  4. 接收响应

          onload 事件

          使用方法: xhr.onload = function () {}

          本次请求结束以后触发(响应成功了以后触发)

          xhr 里面有个属性叫做 responseText 就是响应体

 xhr.onload = function () {      console.log(JSON.parse(xhr.responseText))；    }console.log('end')；

下面是 get.php 的代码部分

<?php  // 报错信息同样是 php 的输出  // $username = $_GET['username'];  // 组装一个数组  $arr = array(    "message" => "接收 GET 请求成功, 参数原样带回",    "data" => $_GET  );  echo json_encode($arr);?>

 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', './get.php', false)；// 4. 接收结果    xhr.onload = function () {      console.log(JSON.parse(xhr.responseText))；    }// 3. 把这个请求发送出去    xhr.send()；// 发出去, 接收回来响应    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 是基于内核的兼容

 接收响应的兼容

        IE 低版本里面没有 onload 事件

        IE 低版本只能使用 onreadystatechange 事件来接收响应

          事件里面进行判断

          xhr.status 再 200 ~ 299 之间

      xhr.readyState === 4 的时候

          正常使用响应体

var xhr = new XMLHttpRequest()；    console.log(xhr)；    xhr.open('GET', './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.responseText

 const xhr = new XMLHttpRequest()    console.log(xhr.readyState)
     xhr.open('GET', './server/get.php')     console.log(xhr.readyState)
    // 绑定一个状态码改变事件     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.status

        描述本次请求的状态

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