前端 | 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);
})
相关推荐
姑苏洛言14 分钟前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手38 分钟前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言1 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友2 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手2 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿3 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜053 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau3 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123454 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js