前后端分离之Ajax入门
前后端分离之Ajax入门
一、概念
Ajax（Asynchronous Javascript And XML），即是异步的JavaScript和XML，Ajax其实就是浏览器与服务器之间的一种异步通信方式。它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。
传统传统的Web应用模式和 ajax方式的比较：
传统的web应用：请求提交的时候,提交的是整个表单，服务端返回的时候，也是返回整个页面（刷新）
ajax方式：提交请求的时候只把某些数据提交（可以不用表单），服务端也只返回特定的数据Ajax 应用的特点
- 不刷新整个页面,在页面内与服务端通迅
- 使用异步方式和服务端通迅
- 大部分交互都在页面内完成
Ajax 技术组成
XMLHttpRequest：用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，发送和获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容，所有的现代浏览器都支持这个对象。
javascript：一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现的不再是简单的静态信息，而是实时的内容更新。
HTML：超文本标记语言，是一种用来结构化 Web 网页及其内容的标记语言。
json(曾经使用XML)：将结构化数据表示为 JavaScript 对象的标准格式，是一种轻量级数据交换格式，而XML较为复杂
二、XMLHttpRequest 实现ajax
准备好服务端程序（tomcat）
@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");//设置结果集
response.getWriter().print("这是服务端的数据:"+LocalDateTime.now());//向浏览器发送数据
}
}
客户端程序
步骤：
- 创建 XMLHttpRequest对象, 直接new就可以
- 要指定回调函数
- 调用它的open方法,指明提交方式,提交地址,及数据
- 调用它的send方法,发送请求
- 在回调函数中进行相应的处理
<script src="js/jquery-1.8.0.js"></script>
<script>
var xmlhttp;
function test(){
//创建 XMLHttpRequest对象
xmlhttp = new XMLHttpRequest(); //要指定回调函数
xmlhttp.onreadystatechange=mystatechange; //调用open方法
xmlhttp.open("get","UserServlet",null); //调用send
xmlhttp.send(null);
} function mystatechange(){
//alert(xmlhttp.readyState);
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
// alert(xmlhttp.responseText);
document.getElementById("lbl_msg").innerHTML=xmlhttp.responseText;
}
}
} </script>
<body>
<button onclick="test()">测试</button>
<label id="lbl_msg"></label>
</body>
三、使用jQuery实现ajax
六种实现方式：
- load()方法
- $.get()方法
- $.post()方法
- $.ajax()方法 - 常用
- $.getScript()方法
- $.getJSON()方法
load()：请求方式由是否传递参数决定。即传递参数，为GET方式;不传递参数，为POST方式。
<script src="js/jquery-1.8.0.js"></script>
<script>
//load(url,data,callback)
/*
url：异步请求的地址
data：异步请求的数据
如果省略请求数据的话，当前的请求方式为GET
如果发送请求数据的话，当前的请求方式为POST
callback - 异步请求成功后的回调函数
*/
$(function(){
function mystatechange(){
alert('异步请求成功')
} function test(){
$('button').load('UserServlet',mystatechange())
}
}) </script> <body>
<button onclick="test()">测试</button>
</body>$.get()：使用get方式向服务器端发送异步请求
<script src="js/jquery-1.8.0.js"></script> <script>
//get(url,data,callback,type)
/*
url：异步请求的地址
data：异步请求的数据
callback：异步请求成功后的回调函数
type：设置服务器满响应结果的格式；值为xml、html、script、json、text和default
*/
$(function(){
$("button").click(function(){
$.get("UserServlet",{userName:"admin",password:"123"}, function(data){
alert('异步请求成功');
});
});
});
</script> <body>
<button>测试</button>
</body>$.post()：使用POST方式向服务器端发送异步请求
<script src="js/jquery-1.8.0.js"></script> <script>
//post(url,data,callback,type)
/*
url：异步请求的地址
data：异步请求的数据
callback：异步请求成功后的回调函数
type：设置服务器满响应结果的格式；值为xml、html、script、json、text和default
*/
$(function(){
$("button").click(function(){
$.post("UserServlet",{userName:"admin",password:"123"}, function(data){
alert('异步请求成功');
});
});
});
</script> <body>
<button>测试</button>
</body>
$.ajax()：是jQuery中最为底层的Ajax方法
<script>
$(function(){
$("button").click(function(){
$.ajax({
type:"post",
url:"UserServlet",
data:{userName:"admin",password:"123"},
success: function(data){
alert('异步请求成功');
}
});
});
});
</script>
<body>
<button>测试</button>
</body>
四、$.ajax([options]) 详解
$(function(){
$("button").click(function(){
$.ajax({
type:"post", //请求的提交方式,可以是post和get, 大小写不敏感
url:"UserServlet", //请求的地址
data:{userName:"admin",password:"123"}, //提交的数据,前面的key可以用双引号引起来也可以不引
success: function(data){ //回调函数,data 代表服务端返回的数据,data这个名字不是固定的,叫什么都可以
alert(data);
}
});
});
});
注：当以post方式提交请求的时候,放在url后面的参数,是可以用的
比如下面的表单:
<form action="UserServlet?flag=add" method="post">
<input name="userName">
<input name="password">
<submit >
</form>
请求提交以后,服务端能收到 flag, userName,password
但当请求以get的方式提交的时候,放在url后面的参数会被表单中其他的数据覆盖
$.ajax() 其他参数：
- async
- cache
- dataType //服务端传回来的数据,是什么类型, 取值有 text,html, js,xml,josn, jsonp
- contentType //发给服务端的数据,是什么格式
- 回调函数
async 是否启用异步,默认是true
$(function(){
$("button").click(function(){
alert("a"); $.ajax({
type:"post",
url:"UserServlet",
data:{userName:"admin",password:"123"},
success: function(data){
alert("b");
}
}); alert("c");
});
});
/*
以上代码的执行顺序有可能是a, b, c；也有可能是a, c, b
原因：默认情况下，async的取值是true，即使用异步的方式提交
想要同步执行，需要设置：async : false
*/
cache 是否缓存
默认值：true，当dataType为script时，默认为false，设置为false将不会从浏览器缓存中加载请求信息
当cache 为true时，浏览器会优先从缓存中取数据，若缓存中存在则直接取出，若不存在会向服务端发送请求。
优点：从缓存中取数据，减少了服务器端的压力
缺点：无法实时更新。如需要获得请求服务器的次数时，客户端完成获取次数，服务器段完成更新次数，会从缓存中直接取数据，不会请求服务器执行增加次数操作
dataType 服务端传回来的数据,是什么类型
如：
- xml：返回XML文档。
- html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
- script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
- json：返回JSON数据。
- jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
- text：返回纯文本字符串。
contentType 发给服务端的数据,是什么格式
默认值：application/x-www-form-urlencoded。这种格式的特点：name/value 成为一组，每组之间用 & 联接，而 name与value 则是使用 = 连接。如：url?name=zhangsan&password=123
注：这种形式是没有办法将复杂的 JSON 组织成键值对形式。
回调函数
success 成功以后调用
error 出错的时候调用
complete 不管成功,失败,都调用
$(function(){
$("button").click(function(){
$.ajax({
type:"post",
url:"UserServlet?flag=visit",
success:function(data){
alert("success调用了");
},
error:function(e){
alert("error 调用了"+e);
},
complete:function(){
alert("complete 调用了");
}
/*
总结
success 在服务端正确返回的情况下调用
complete 总要调用
error 在出错的时候会调用
(1) 客户端请求写错了,会引起error的调用
(2) 服务端出错了,也会引起error的调用
*/
});
});
});
<body>
<button>测试</button>
</body
前后端分离之Ajax入门的更多相关文章
- 《Spring Boot 入门及前后端分离项目实践》系列介绍
课程计划 课程地址点这里 本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 个部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发 ...
- 从MVC到Ajax再到前后端分离的思考
前言 一位小妹去面试前端,前端leader问了"什么是ajax?",答:"接收后台的数据,然后然后自己填充和渲染样式":一位小哥去面试后台,技术经理问了&quo ...
- 一个Java程序猿眼中的前后端分离以及Vue.js入门
松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...
- 《Spring Boot 入门及前后端分离项目实践》目录
开篇词:SpringBoot入门及前后端分离项目实践导读 第02课:快速认识 Spring Boot 技术栈 第03课:开发环境搭建 第04课:快速构建 Spring Boot 应用 第05课:Spr ...
- SpringBoot 和Vue前后端分离入门教程(附源码)
作者:梁小生0101 juejin.im/post/5c622fb5e51d457f9f2c2381 推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计 ...
- 前后端分离-模拟数据之RAP2快速入门
是啥? RAP是一个可视化接口管理工具 通过分析接口结构,动态生成模拟数据,校验真实接口正确性, 围绕接口定义,通过一系列自动化工具提升我们的协作效率.我们的口号:提高效率,回家吃晚饭! 可视化编辑, ...
- 利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...
- 前后端分离构架 与 json ajax简介
前后端分离 传统开发方式 曾几何时,JSP和Servlet为Java带来了无限风光,一时间大红大紫,但随着互联网的不断发展,这样的开发方式逐渐显露其弊端,在移动互联网炙手可热的今天,应用程序对于后台服 ...
- spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据
1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十一 || AOP自定义筛选，Redis入门 11.1
代码已上传Github+Gitee,文末有地址 书说上文<从壹开始前后端分离[ .NET Core2.0 Api + Vue 2.0 + AOP + 分布式]框架之十 || AOP面向切面编程浅 ...
随机推荐
- ***.jar没有主清单属性
工具环境 idea centos7.9 现象 java -jar运行jar包提示没有主清单属性,如下图所示: 这个jar包,是通过idea打包的,打包方法:idea---File---Project ...
- 【C语言深度解剖】预定义章节经典面试题讲解(offsetof宏模拟实现)【超详细的解释和注释】
[C语言深度解剖]预定义章节经典面试题讲解(offsetof宏模拟实现)[超详细的解释和注释] 那么这里博主先安利一下一些干货满满的专栏啦! 作者: #西城s 这是我的主页:#西城s 在食用这篇博客之 ...
- delphi 里 多用TArray 而不是 array of
今天写代码发现个bug,是delphi 编译器 核心层面的: unit ddx.att; interface uses System.Generics.Collections, System.Rtti ...
- 文心一言 VS 讯飞星火 VS chatgpt （197）-- 算法导论14.3 5题
五.用go语言,对区间树 T 和一个区间 i ,请修改有关区间树的过程来支持新的操作 INTERVALSEARCH-EXACTLY(T,i) ,它返回一个指向 T 中结点 x 的指针,使得 x.int ...
- RabbitMQ 使用细节 → 优先级队列与ACK超时
开心一刻 今天坐在太阳下刷着手机 老妈走过来问我:这么好的天气,怎么没出去玩 我:我要是有钱,你都看不见我的影子 老妈:你就不知道带个碗,别要边玩? 我:...... 优先级队列 说到队列,相信大家一 ...
- CF327C Magic Five 题解
题目传送门 前置知识 等比数列求和公式 | 乘法逆元 解法 设 \(lena\) 表示 \(a\) 的长度. 首先,若一个数能被 \(5\) 整除,则该数的末尾一定为 \(0\) 或 \(5\).故考 ...
- 从零开始的react入门教程（六），一篇文章理解react组件生命周期
壹 ❀ 引 学习任何一门框架,无论是vue.react亦或是angular,我们除了需要熟练掌握框架语法外,了解框架自身的生命周期也是至关重要的.一方面生命周期在面试中多多少少总是会提及,其次了解框架 ...
- mysqlGTID主从同步出现1236错误问题
从主库xtrabackup备份,配置好gtid复制,从主库的从库复制.一直报错误 Last_IO_Error: Got fatal error 1236 from master when readin ...
- Spring Boot学生信息管理系统项目实战-3.专业管理
1.获取源码 源码是捐赠方式获取,详细请QQ联系我 :) 2.实现效果 3.项目源码 只挑重点讲,详细请看源码. 专业管理实现学校专业的增删改查,与学院管理相关联. 前端代码 <!--编辑表单- ...
- OpenAI 的视频生成大模型Sora的核心技术详解（一）：Diffusion模型原理和代码详解
标题党一下,顺便蹭一下 OpenAI Sora大模型的热点,主要也是回顾一下扩散模型的原理. 1. 简单理解扩散模型 简单理解,扩散模型如下图所示可以分成两部分,一个是 forward,另一个是 re ...