前端 | Ajax&Axios模块

文章目录

      • [1. Ajax](#1. Ajax)
        • [1.1 Ajax介绍](#1.1 Ajax介绍)
        • [1.2 Ajax作用](#1.2 Ajax作用)
        • [1.3 同步异步](#1.3 同步异步)
        • [1.4 原生Ajax](#1.4 原生Ajax)
      • [2. Axios](#2. Axios)
        • [2.1 Axios下载](#2.1 Axios下载)
        • [2.2 Axios基本使用](#2.2 Axios基本使用)
        • [2.3 Axios方法](#2.3 Axios方法)

1. Ajax

1.1 Ajax介绍

Ajax: 全称(Asynchronous JavaScript And XML),异步的JavaScript和XML。

1.2 Ajax作用
  • 与服务器进行数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
  • 异步交互:可以在不重新加载整个页面 的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
1.3 同步异步
  • 同步请求发送过程如下图所示:

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

  • 异步请求发送过程如下图所示:

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

1.4 原生Ajax
javascript 复制代码
//1. 创建XMLHttpRequest 
var xmlHttpRequest  = new XMLHttpRequest();

//2. 发送异步请求
xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
xmlHttpRequest.send();//发送请求

//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
    //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应, 200表示这是一个正确的Http请求,没有错误
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
    }
}

2. Axios

2.1 Axios下载
javascript 复制代码
npm install -g Axios@0.18.0
2.2 Axios基本使用
  • 引入 Axios 文件
javascript 复制代码
<script src="js/axios-0.18.0.js"></script>
  • 框架
javascript 复制代码
// 发送 post 请求
axios({
    method:"post",	// method:请求方式
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"	// url:链接
    data:"username=zhangsan"
}).then(result => {
     console.log(result.data);
})

// 发送 get 请求
axios({
    method:"get",	// method:请求方式
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"	// url:链接
    data:"username=zhangsan"
}).then(result => {
     console.log(result.data);
})
2.3 Axios方法
  • Axios 还针对不同的请求,提供了别名方式的api
方法 描述
axios.get(url [, config]) 发送get请求
axios.delete(url [, config]) 发送delete请求
axios.post(url [, data[, config]]) 发送post请求
axios.put(url [, data[, config]]) 发送put请求
  • 框架
javascript 复制代码
// 发送 post 请求
axios.post("URL","DATA").then(result => {
    console.log(result.data);
})

// 发送 get 请求
axios.get("URL").then(result => {
    console.log(result.data);
})
相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法