异步交互技术Ajax

Ajax

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

同步与异步

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

原生Ajax(基本不用

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

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

写文章-CSDN创作中心



  
    
    
    
    Ajax 获取本地文件数据
  
  
    
    

运行后点击按钮 

 异步交互技术Ajax_第1张图片

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地址已经失效,在点击按钮无法实行最终效果,仅供参考)



  
    
    
    
    Ajax-Axios
    
    
  
  
    

    
  
  

Axios案例()

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

你可能感兴趣的:(Java,Web学习跟踪笔记,ajax,okhttp,前端)