后端理解ajax和axios

前言:

因为要学习后面的前端框架, 有必要了解一下ajax, 就简单学习一下, 因为应用的少, 可能会面有补充!

简介:

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

就和国内百度的搜索框一样!

传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。

使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

我们可以使用前端的一个标签来伪造一个ajax的样子。iframe标签编写一个 ajax-frame.html 使用 iframe 测试，感受下效果

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>ladidol伪造ajax</title>
</head>
<body><script type="text/javascript">window.onload = function(){var myDate = new Date();document.getElementById('currentTime').innerText = myDate;};function LoadPage(){/*这里拿到输入的url的值*/var targetUrl =  document.getElementById('url').value;console.log(targetUrl);/*这里个iframe的src赋值target*/document.getElementById("iframePosition").src = targetUrl;}</script><div><p>请输入要加载的地址：<span id="currentTime"></span></p><p><input id="url" type="text" value="https://ladfeng.top/"/><input type="button" value="提交" onclick="LoadPage()"></p>
</div><div><h3>加载页面位置：</h3><iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div></body>
</html>

可以看到在输入框就有异步请求:

利用AJAX可以做：

注册时，输入用户名自动检测用户是否已经存在。
登陆时，提示用户名密码错误
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
…等等

Ajax的工作原理:

jQuery.ajax

这里讲得主要是用的jquery来实现Ajax:

纯JS原生实现Ajax我们不去讲解这里，直接使用jquery提供的，方便学习和使用，避免重复造轮子，有兴趣的同学可以去了解下JS原生XMLHttpRequest ！

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery 不是生产者，而是大自然搬运工。

jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！

加箭头的是常用的:

jQuery.ajax(...)部分参数：--> url：请求地址type：请求方式，GET、POST（1.9.0之后用method）headers：请求头--> data：要发送的数据contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")async：是否异步timeout：设置请求超时时间（毫秒）beforeSend：发送请求前执行的函数(全局)complete：完成之后执行的回调函数(全局)--> success：成功之后执行的回调函数(全局)--> error：失败之后执行的回调函数(全局)accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型dataType：将服务器端返回的数据转换成指定类型"xml": 将服务器端返回的内容转换成xml格式"text": 将服务器端返回的内容转换成普通文本格式"html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。"script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式"json": 将服务器端返回的内容转换成相应的JavaScript对象"jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

这个是另外的源码中的相关解释:

源码:

if (xmlhttp.readyState==4 && xmlhttp.status==200)

对xmlhttp.readyState的相关解释:

对ajax源码想了解的戳这里

xmlhttp.readyState的值及解释：0：请求未初始化（还没有调用 open()）。1：请求已经建立，但是还没有发送（还没有调用 send()）。2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。4：响应已完成；您可以获取并使用服务器的响应了。xmlhttp.status的值及解释：100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本200——交易成功201——提示知道新文件的URL202——接受和处理、但处理未完成203——返回信息不确定或不完整204——请求收到，但返回信息为空205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件206——服务器已经完成了部分用户的GET请求300——请求的资源可在多处得到301——删除请求数据302——在其他地址发现了请求数据303——建议客户访问其他URL或访问方式304——客户端已经执行了GET，但文件未变化305——请求的资源必须从服务器指定的地址得到306——前一版本HTTP中使用的代码，现行版本中不再使用307——申明请求的资源临时性删除400——错误请求，如语法错误401——请求授权失败402——保留有效ChargeTo头响应403——请求不允许404——没有发现文件、查询或URl405——用户在Request-Line字段定义的方法不允许406——根据用户发送的Accept拖，请求资源不可访问407——类似401，用户必须首先在代理服务器上得到授权408——客户端没有在用户指定的饿时间内完成请求409——对当前资源状态，请求不能完成410——服务器上不再有此资源且无进一步的参考地址411——服务器拒绝用户定义的Content-Length属性请求412——一个或多个请求头字段在当前请求中错误413——请求的资源大于服务器允许的大小414——请求的资源URL长于服务器允许的长度415——请求资源不支持请求项目格式416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求合起来500——服务器产生内部错误501——服务器不支持请求的函数502——服务器暂时不可用，有时是为了防止发生系统过载503——服务器过载或暂停维修504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长505——服务器不支持或拒绝支请求头中指定的HTTP版本1xx:信息响应类，表示接收到请求并且继续处理2xx:处理成功响应类，表示动作被成功接收、理解和接受3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理4xx:客户端错误，客户请求包含语法错误或者是不能正确执行5xx:服务端错误，服务器不能正确执行一个正确的请求xmlhttp.readyState==4 && xmlhttp.status==200的解释：请求完成并且成功返回

简单实现一下:

本项目主要用springboot和jquery实现

AjaxController.java:

package com.feng.controller;import com.feng.entity.User;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;/*** @projectName: springboot2* @package: com.feng.controller* @className: AjaxController* @author: Ladidol* @description:* @date: 2022/4/19 9:21* @version: 1.0*/
@RestController
@RequestMapping("/ajax")
public class AjaxController {@PostMapping ("/a1")public void ajax1(String name, HttpServletResponse response) throws IOException {System.out.println(name);if ("admin".equals(name)) {response.getWriter().print("yes");} else {response.getWriter().print("no");}}@RequestMapping("/a2")public List<User> ajax2() {List<User> list = new ArrayList<User>();list.add(new User("小小", 20, "男"));list.add(new User("ladidol", 20, "男"));list.add(new User("ladfeng", 20, "男"));return list; //由于@RestController注解，将list转成json格式返回}}

User.java

package com.feng.entity;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {private String name;private int age;private String sex;}

静态资源:

jQuery这里通过cdn引入!

<html>
<head><meta charset="utf-8"><title>Title</title>
</head>
<body>
<!--按钮-->
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center"><tr><td>姓名</td><td>年龄</td><td>性别</td></tr><tbody id="content"></tbody>
</table><!--<script type="text/javascript" src="../js/jquery.min.js"></script>-->
<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
<script>$(function () {$("#btn").click(function () {$.post("../ajax/a2",function (data) {console.log(data)var people="";for (var i = 0; i <data.length ; i++) {people+= "<tr>" +"<td>" + data[i].name + "</td>" +"<td>" + data[i].age + "</td>" +"<td>" + data[i].sex + "</td>" +"</tr>"}$("#content").html(people);});})})</script>
</body>
</html>

index.html

<html>
<head><meta charset="utf-8"><title>$Title$</title><script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
<!--    <script type="text/javascript" src="../js/jquery.min.js"></script>--><script>function a1() {$.post({url: "../ajax/a1",data: {'name': $("#txtName").val()},success: function (data) {if (data.toString()=='yes'){//核对信息$("#userInfo").css("color","green");}else{$("#userInfo").css("color", "red");}console.log(data);$("#userInfo").html(data);}});}</script>
</head>
<body>
<!--onblur：失去焦点触发事件-->
用户名:<input type="text" id="txtName" onblur="a1()"/>
<span id="userInfo"></span></body>
</html>

注意html文件中的url指向问题!

运行测试一下!

访问

http://localhost:8080/pages/index.html

输入了用户名, 将鼠标焦点移开,就会有实时反馈

http://localhost:8080/pages/ajax.html

对ajax的简单了解就到这里!
如果有没有反应, 可以打开浏览器(F12)的开发者界面, 看你移动鼠标焦点后有没有请求发送!

axios:

区别 axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 axios是ajax ajax不止axios。

axios基本使用:

这里就需要导入axios的包了:

<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>axios基本使用</title>
</head><body><input type="button" value="get请求" class="get"><input type="button" value="post请求" class="post"><!-- 官网提供的 axios 在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>/*接口1:随机笑话请求地址:https://autumnfish.cn/api/joke/list请求方法:get请求参数:num(笑话条数,数字)响应内容:随机笑话*/document.querySelector(".get").onclick = function () {axios.get("https://autumnfish.cn/api/joke/list?num=1")// axios.get("https://autumnfish.cn/api/joke/list1234?num=6").then(function (response) {console.log(response);},function(err){console.log(err);})}/*接口2:用户注册请求地址:https://autumnfish.cn/api/user/reg请求方法:post请求参数:username(用户名,字符串)响应内容:注册成功或失败*/document.querySelector(".post").onclick = function () {axios.post("https://autumnfish.cn/api/user/reg",{username:"兴趣使然的小小"}).then(function(response){console.log(response);console.log(this.skill);},function (err) {console.log(err);})}</script>
</body></html>

axios+vue:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>axios+vue</title>
</head><body><div id="app"><input type="button" value="获取笑话" @click="getJoke"><p> {{ joke }}</p></div><!-- 官网提供的 axios 在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>/*接口:随机获取一条笑话请求地址:https://autumnfish.cn/api/joke请求方法:get请求参数:无响应内容:随机笑话*/var app = new Vue({el:"#app",data:{joke:"很好笑的笑话"},methods: {getJoke:function(){// console.log(this.joke);var that = this;axios.get("https://autumnfish.cn/api/joke").then(function(response){// console.log(response)console.log(response.data);// console.log(this.joke);that.joke = response.data;},function (err) {  })}},})</script>
</body></html>

END:

参考链接:

狂神的视频

狂神说SpringMVC07：Ajax研究 (qq.com)

AJAX – 向服务器发送 | 菜鸟教程 (runoob.com)

AJAX 简介 (w3school.com.cn)

本文不是很完善, 如果可能后续会有相应补充!

后端理解ajax和axios相关推荐

前后端交互ajax和axios入门讲解，以及http与服务器基础
ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 文章目录 ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 前言一.Aj ...
axios与ajax对比,axios和ajax优缺点的理解
最近使用vue时候,被问道为什么用axios而不是ajax,百度一堆都很类似,又不能理解其中列出的内容,就自己查一查,方便理解和记忆首先看代码格式: ajax: $.ajax({ type: 'PO ...
尚硅谷 Ajax与Axios的使用与关键源码笔记
文章目录 Ajax概述原生Ajax尝试请求的发送与请求头配置 JSON支持 IE缓存问题请求的取消与重发 jQuery的Ajax 使用Axios发送Ajax[简易] 使用fetch发送请求 Aj ...
addeventlistener不支持ajax_十万个Web前端面试题之AJAX、axios、fetch的区别
来自灵魂的拷问你知道AJAX.axios.fetch的区别吗? 小白回答 AJAX用来请求数据的吧,另外axios和fetch是啥? 老鸟回答 AJAX Gmail开发人员发现IE里面有个XMLHT ...
ajax和axios封装
Ajax 1.ajax理解 ajax是async JavaScript and xml /异步的js和xml 主要用来实现页面的局部刷新在浏览器里内置了ajxa的核心对象的:XMLHttpRequ ...
前后端交互——Ajax
前后端交互Ajax Ajax jQuery中的ajax $.get() $.post() $.ajax() 案例:图书列表 Ajax Ajax 即"AsynchronousJavascrip ...
AJAX和axios的基本使用
首先要说明一点,学AJAX和axios 是前端向后端发送请求/接收后端的数据,so 如果你是前端爱好者, 试试学习node.js 开启一台服务器,然后自己练习. 1.同步请求和异步请求的概念和流程 1 ...
Ajax和Axios相关面试题总结
文章目录 Ajax和Axios 1.同步请求和异步请求 2.fetch.axios.jquery的ajax用法 3.JS跨域资源共享(CORS问题) 4.Ajax 解决浏览器缓存问题 5.ajax 返 ...
Ajax与Axios的区别
目录 1.Ajax与Axios的区别 2.mvvm模式下更适合这种数据 3.ajax书写形式 4.axios书写形式 5.vue 中使用的 axios 代码总结: 1.Ajax与Axios的区别 A ...
22-05-29 西安 javaweb(11) ajax、axios、gson/jackson/fastjson
ajax 异步的JavaScript和XML js中的一个技术,实现前后端分离,前后端分离就是分服务器部署,彻底舍弃了thymeleaf. ajax中必须使用响应浏览器数据,不能是请求转发和重定向 ...