关键词：
一、原生Ajax
1.1ajax概述
Ajax 即“Asynchronous Javascript And XML”（
异步JavaScript和XML），是一种用于客户端与服务端进行数据交互的一种技术。
Ajax 能够创建交互式、快速动态网页应用，无需重新加载整个网页的情况下，能够更新部分网页。
Ajax 可以使网页实现异步更新,在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
1.2Ajax使用
传统的前后端异步数据交互，使用原生的JavaScript创建一个XMLHttpRequest实例对象来实现。
new XMLHttpRequest();
1.2.1主要方法
- open(method, url, asycn)
method: 请求的类型；GET 或 POST。url: 统一资源定位符（定位文件在服务器上的位置）。- `asycn: 是否异步；true 或 false。
- send(String)
**String**: 发送到服务器的数据（仅用于POST请求)
1.2.2请求方式
- GET
优点：与POST相比，GET轻巧快捷，并且在大部分情况下都能用。
缺点：
无法使用缓存文件（更新服务器上的文件或数据库）；
无法向服务器发送大量数据（POST没有数据量限制）；
发送包含未知字符的用户输入时，参数暴露在地址栏。
- POST
优点：
能够携带的数据大小没有限制；
隐藏请求的参数、数据体，相比GET更加安全，更稳定可靠；
能够发送文件流。
缺点：由于大多数情况下发送的数据量较大，响应时间会比GET稍慢。
1.3实例
创建XMLHttpRequest()实例
let xhr = new XMLHttpRequest();
1.3.1请求
- GET请求
- 无参请求
xhr.open("GET","index.html",true);
xhr.send();
- 带参请求
xhr.open("GET","user?method=view&id=1",true);
xhr.send();
- POST请求
- 无参请求
xhr.open("POST","index.html",true);
xhr.send();
- 带参请求
xhr.open("POST","user",true);
xhr.send("method=delete&id=1");
1.3.2响应
响应主体分为
xhr.responseText与xhr.responseXML两类。
- 当响应数据为XML时：
let xml_doc = xhr.responseXML;
- 当相应数据为Text时：
let text_doc = xhr.responseText;
1.4XHR属性与XHR方法
XMLHttpRequest简称：
XHR。
1.4.1XHR属性
| # | 属性名 | 描述 |
|---|---|---|
| 1 | readyState | 存储函数（或函数名），每当readyState的属性改变时，就会调用该函数。 |
| 2 | readyState | 存有的XMLHttpRequest的状态从0到4发生变化。0：请求未初始化;1：服务器连接已建立;2：请求已接收;3：请求处理中;4：请求已完成，且响应已就绪 |
| 3 | reponseText | 以文本形式返回响应。 |
| 4 | responseXML | 以XML格式返回响应 |
| 5 | status | 将状态返回为数字（例如，“Not Found”为404，“OK”为200） |
| 6 | statusText | 以字符串形式返回状态（例如，“Not Found”或“OK”） |
1.4.2XHR方法
| # | 属性名 | 描述 |
|---|---|---|
| 1 | abort() | 取消当前请求。 |
| 2 | getAllResponseHeaders() | 以字符串形式返回完整的HTTP标头集。 |
| 3 | getResponseHeader( headerName ) | 返回指定HTTP标头的值。 |
| 4 | void open（method，URL） | 打开指定获取或交的方法和URL的请求。 |
| 5 | void open（method，URL，async） | 与上面相同，但指定异步或同步。 |
| 6 | void open（method，URL，async，userName，password） | 与上面相同，但指定用户名和密码。 |
| 7 | void send（content） | 发送获取请求。 |
| 8 | setRequestHeader（ label，value） | 将标签/值对添加到要发送的HTTP标头。 |
二、Jquery封装的Ajax API
三、ES6+的Promise
四、Axios插件
五、ES7+新语法async/await
ajax前后端交互利器详解(代码片段)
✍Ajax前后端交互利器🔥Ajax前后端交互利器地址🔥Ajax前后端交互利器详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/120116296🔥Ajax前后端交互利器详解(二)https://blog.csdn.net/Augenstern_QXL/article/details/1 查看详情
vue之前后端交互(代码片段)
Vue之前后端交互一、前后端交互模式接口调用方式原生ajax基于jQuery的ajaxfetchaxios异步JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个... 查看详情
前后端交互(代码片段)
前端传JSON 此JSON有上下级关系每一个有孩子节点此节点有数据"standardspeciallistid":"10339","standardcostid":"0","costcode":"(A)","costcodelevel":"1","costcodename":"开发成本","costcodeparentid":"0","haschild":"","budgetvaria 查看详情
不懂前后端分离？这篇就够
参考技术A前后端分离前我们的开发协作模式一般是这样的：前端写好静态的HTML页面交付给后端开发。静态页面可以本地开发，也无需考虑业务逻辑只需要实现View即可。后端使用模板引擎去套模板，同时内嵌一些后端提供的模板... 查看详情
axios前后端交互工具学习(代码片段)
文章目录Axios前后端交互工具学习引言引入Axios介绍GET请求的方式then方法catch方法POST请求的方式PUT请求的方式Axios的基本配置Axios的拦截器Vue怎么和Axios配合呢？Axios前后端交互工具学习引言 Axios是一个异步请求技术，... 查看详情
axios前后端交互工具学习(代码片段)
文章目录Axios前后端交互工具学习引言引入Axios介绍GET请求的方式then方法catch方法POST请求的方式PUT请求的方式Axios的基本配置Axios的拦截器Vue怎么和Axios配合呢？Axios前后端交互工具学习引言 Axios是一个异步请求技术，... 查看详情
前后端交互(小白教学)(代码片段)
在我们的印象中什么是前后端交互呢?我们一个后端程序员为什么要去学习前端知识?前后端交互到底是靠什么而进行关联的呢?接下来我们带着这三个问题来阅读这边文章!!!1.前后端交互所谓前后端交互,即前后端交互为前端和后端... 查看详情
使用ajax简单实现前后端交互(代码片段)
实现效果：点击提交后：前端页面源码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Ajax前后端交互_通过Ajax进行</title></head> 查看详情
测开之・《前后端交互axios》(代码片段)
...node.js中使用，原生的js或者使用jquery来发生请求进行前后端数 查看详情
vue前后端交互(代码片段)
异步调用异步效果:事件函数Ajax定时任务多次异步调用依赖多次调用异步,结果顺序不确定,如果需要固定顺序,必须使用嵌套Promise概述Promise是异步编程的一种解决方案,从语法上讲Promise是一个对象,从它可以获取到异步操作的消息;... 查看详情
javascript入门:前后端交互基础(dom,json,ajax)(代码片段)
JavaScript入门(4):前后端交互基础(DOM,JSON,AJAX)参考教程图灵星球js入门教程文章目录JavaScript入门(4):前后端交互基础(DOM,JSON,AJAX)1.DOM引入简介DOM树JavaScript控制DOM主要方式：DOM的精彩解释2.JSON引入简介语法特征将JSON转换成JavaScrip... 查看详情
vue体验(前后端交互)(代码片段)
记录：263体验XMLHttpRequest、jquery、Promise、fetch、axios的异步方式调用后端接口。本例环境：后端：node.js、express。前端：Vue.js、HTML、CSS、jQuery、axios。方式：分别使用XMLHttpRequest、jquery、Promise、fetch、axios 查看详情
前后端交互流程(代码片段)
1.前后端交互:前后端交互，也可以理解为数据交互。前端需要获取（GET）的数据获取上传（POST）的数据，要通过请求来完成的，前端发送请求，后端接收到请求后，便进行对数据库的操作，... 查看详情
vue-resource的使用，前后端数据交互(代码片段)
vue-resource的使用，前后端数据交互1：导入vue与vue-resource的js js下载： https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUgFyQ 注意如果是springBoot项目需要在配置文件中排除静态文件的拦截： post方法：newVue(el:"#app", 查看详情
ssm框架前后端信息交互(代码片段)
一、从前端向后端传送数据常见的3种方式1、form表单的action：此方法可以提交form表单内的输入数据，也可同时提交某些隐藏但设置有默认值的<input>，如修改问题时，我们除了提交问题的相关信息，还需要将用户的编号提交... 查看详情
大事件--练习项目分享--实现前后端交互(代码片段)
项目介绍:实现的页面效果:前台页面:后台管理页面:以上的静态页面,通过HTML结构和CSS样式 实现 而页面的交互由JS来实现练习项目的目标:1.了解真实项目开发的架构设计（1）前端三层分离的编程思想（2）网络请求层单独... 查看详情
使用form表单的name属性简单实现前后端交互(代码片段)
实现效果：点击提交后：前端页面源码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Ajax前后端交互_通过name属性进行</title></head& 查看详情
前后端交互-进度丢失问题解决(代码片段)
今天在写项目的时候，遇到了一个问题，让我很是纳闷，就是数据库查询出来的id值（是通过雪花算法生成的一个19为随机数字） ，在传给前端的时候，前端同事用谷歌浏览器看的是Response返回的是后端的正确数据，但是previe... 查看详情