目录

前后端数据交互——ajax

1. 介绍

2.原生ajax用法

3.jquery的ajax

4.ajax原理说明

---

 

前后端数据交互——ajax

1. 介绍

1.1 定义

• Ajax(Asynchronous Javascript And XML) 是一种在无需重新加载整个网页的情况下，能够更新部分 网页的技术。

• 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。 这意味着可以在不重新加载整个网

1.2 传统请求的问题

• 浏览器地址栏发送请求，是同步的（阻塞代码运行），当服务器很忙碌的时候会卡顿（等待），就造成 了资源浪费

1.3 Ajax请求与传统请求的区别：

• ajax数据交互的优点是 在请求数据的时候 不会阻塞后续js代码的执行

• 带有ajax代码的js代码的执行顺序

  • 1.从上到下执行

  • 2.遇到ajax代码后 先发送请求

  • 3.在等待服务器响应数据的时间段内 继续向下执行其他js代码

  • 4.等到服务器数据响应回来 再执行渲染数据的代码

1.4 应用场景：

• 但凡遇到动态渲染的效果 我们都应该使用ajax

2.原生ajax用法

2.1ajax的基础语法

• 本质上ajax其实是es5中提供的一个构造函数——XMLHttpRequest

• ajax实现前后端数据交互的步骤如下

• //1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
  let ajax = new XMLHttpRequest();
  //2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接
  ajax.open("请求方式"，"服务器url地址");
  //3.发送请求 ajax对象有一个方法 send 调用即可发送请求
  ajax.send();
  //4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
  ajax.onreadystatechange = ()=>{
      //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
      if(ajax.readyState==4){
          if(ajax.status==200||ajax.status==304){
              console.log(ajax.responseText)
          }
          else{
              console.log("请求失败")
          }
      }
  }

• ajax 的 通信状态码/生命周期

  • ajax的通信状态码/生命周期有五个 代表的含义 各不相同

  • 分别是

    • 0：请求未初始化（ajax对象还没有声明出来）

    • 1：已建立连接（ajax对象调用了open）

    • 2：已发送请求（ajax对象调用了send）

    • 3：服务器接收到请求并正在处理

    • 4：服务器已响应数据

  • 随着ajax数据交互的一步步推荐 通信状态码/生命周期 会自动发生变化

  • 每当通信状态码/生命周期 发生变化 就会触发一次onreadystatechange事件

• 在ajax中 我们可以通过ajax对象的一个属性 readyState 来获取通信状态码/生命周期

  • ajax对象.readyState

• 我们也可以通过ajax对象的一个属性 responseText 来获取响应数据

  • ajax对象.responseText

• 我们还可以通过ajax对象的一个属性 status 来获取响应状态码

  • ajax对象.status

2.2ajax提交数据

• 在不同的请求方式下 请求提交数据的写法 也不同 我们主要了解一下 get 和 post两种请求方式的提交数据的写法

get

• get请求提交数据 是在地址后面 添加 "?键名=键值&键名=键值&..."

• //1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
  let ajax = new XMLHttpRequest();
  //2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接  
  ​
  //get请求提交数据 提交在地址后面
  ajax.open("get"，"服务器url地址?键名=键值&键名=键值&...");
  //3.发送请求 ajax对象有一个方法 send 调用即可发送请求
  ajax.send();
  //4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
  ajax.onreadystatechange = ()=>{
      //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
      if(ajax.readyState==4){
          if(ajax.status==200||ajax.status==304){
              console.log(ajax.responseText)
          }
          else{
              console.log("请求失败")
          }
      }
  }

post

• post请求提交数据 是写在 send方法中 将要提交的数据作为send方法的实参 传入

• post请求在提交之前 需要单独设置请求头 使用ajax对象的setRequestHeader方法 就可以设置请求头了

• //1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
  let ajax = new XMLHttpRequest();
  //2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接  
  ​
  //get请求提交数据 提交在地址后面
  ajax.open("post"，"服务器url地址?键名=键值&键名=键值&...");
  ​
  //设置请求头
  ajax.setRequestHeader("content-type"，"application/x-www-form-urlencoded"/"application/json")
  ​
  //3.发送请求 ajax对象有一个方法 send 调用即可发送请求
  //将要提交的数据 作为实参 传入send方法中
  ajax.send("键名=键值&键名=键值&..."/JSON.stringify({}));
  //注意：如果设置为 application/json 提交的数据 必须是一个对象格式的json字符串
            
  //4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
  ajax.onreadystatechange = ()=>{
      //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
      if(ajax.readyState==4){
          if(ajax.status==200||ajax.status==304){
              console.log(ajax.responseText)
          }
          else{
              console.log("请求失败")
          }
      }
  }

• 在不提交数据的时候的 post请求 即使不设置请求头 也不会出问题 但是我们一般为了语义和提高容错率，都会选择设置请求头。

3.jquery的ajax

3.1基本用法

• jquery的ajax 是 $的一个方法——ajax 调用这个方法 并传参 即可实现ajax数据交互

• $(()=>{
      //调用ajax方法 实现数据交互
      $.ajax({
          url:"服务器url地址"，//必传项
          type:"请求方式",//可选项 默认值为get
          dataType:"数据交互的格式"//可选项 默认值为json 另外还可以选择 xml text jsonp
          data:{},//请求提交的数据 可选项 默认不提交数据  如果想提交 在对象中 写入属性即可提交
          timeout:数字，//超时时间 可选项 默认为无限 如果设置了具体的超时时间 则会在请求发送后 超过超时                     时间还没接收到响应数据的时候  停止请求 并报错404   单位为ms
          beforeSend(){
              //这个方法函数 会在ajax发送请求前 执行
          }，
          success(res){
              //这个方法函数 会在ajax发送请求 并成功接收到响应数据的时候 执行 形参会接收到响应数据
          }，
          error(err){
              //这个方法函数 会在ajax接收响应数据失败的时候执行 形参会接收到 失败信息
          }，
          complete(){
              //这个方法函数 会在ajax交互完成的时候 执行
          }
      })
  })

• 注意：在实参对象中 四个方法 理论上都可以不传 但是success在实际开发中必传 因为success是用来接收响应数据的

3.2jquery的ajax交互简化方法

• get

  • 用法：$.get("url地址?键值对&键值对...",(res)=>{ res形参用来接收响应数据 })

• post

  • 用法：$.post(url地址,{要提交的数据},(res)=>{ res形参用来接收响应数据 })

4.ajax原理说明

• ajax的数据交互方式 对比 传统的输入地址的交互方法 最大的优点是

  • 是不阻塞后续代码

  • 在等待响应数据的时间段内 会继续向下执行后续js代码

• 这个优点的原理 来源于 js的同步异步代码的区分和执行顺序

• js同步异步代码的执行顺序

  • js代码从上到下执行

  • 如果遇到同步代码 就直接执行

  • 如果遇到异步代码 会先存入 任务队列 之后继续向下执行

  • 直到所有同步代码 都执行完了 再去任务队列中 将异步代码 按照顺序 依次取出并执行

  • js中同步代码和异步代码的分类

    • 异步代码：事件、定时器、ajax

    • 同步代码：除了异步之外 都是同步

  •  ajax代码 为什么能不阻塞后续js代码的执行

  • //1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
    let ajax = new XMLHttpRequest();//同步代码
    //2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接
    ajax.open("请求方式"，"服务器url地址");//同步代码
    //3.发送请求 ajax对象有一个方法 send 调用即可发送请求
    ajax.send();//同步代码
    //4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
    ajax.onreadystatechange = ()=>{//ajax的异步 体现在事件上 事件是异步代码
        //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
        if(ajax.readyState==4){
            if(ajax.status==200||ajax.status==304){
                console.log(ajax.responseText)
            }
            else{
                console.log("请求失败")
            }
        }
    }