软件开发定制前后端数据交互——ajax（原生及jquery）

目录

---

 

——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.用法

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的数据交互方式 对比 传统的输入地址的交互方法 最大的优点是

  • 是不阻塞后续代码

  • 在等待响应数据的时间段内 会继续向下执行后续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("请求失败")
            }
        }
    }