异步交互技术Ajax

Ajax

• 概念：Asynchronous JavaScr And XML 异步的JavaScript和XML
• 作用：
  • 数据交换：通过Ajax可以给服务器发送请求，并获取服务响应的数据
  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想，用户是否可用的校验等

同步与异步

• 同步请求过程

  • 

  • 浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。
• 异步请求过程

  • 

  • 浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

原生Ajax（基本不用）

• 准备数据地址（本地数据或者链接数据）
• 创建XMLHttpRequest对象：用于和服务器交换数据
• 向服务器发送请求
• 获取服务器响应数据 

具体代码如下：（我访问的是本地数据，可能会出现无法获取的问题，请参照文章解决）

写文章-CSDN创作中心

  
    
    
    
    
  
  
    获取数据
    


    
  

运行后点击按钮 

 

Axios

• 介绍：Axios对原生的Ajax进行了封装，简化了书写，快速开发。
• 官网：​​​​Axios 
• Axios的使用
  • 1.引入Axios的js文件
  • 使用Axios发送请求，并获取响应结果
    • get请求
    • post请求
• 请求方式的别名
  • axios.get（url，[,config]）：发送get请求、[,config]表示其他的配置信息，[]中的内容可选
  • axios.delete（url，[,config]）：发送post请求，
  • axios.post(url,[data[,config]]):
  • axios.put(url,[,data[,config]]):

具体代码如下：（ps：由于提供的url地址已经失效，在点击按钮无法实行最终效果，仅供参考）

Axios案例（）

 提供的链接也失效了，展示意义不大，后面再来完善文章