web开发之Ajax
作者： 时间：2022-05-04阅读数：人阅读
今天结合几个案例给大家分享一下Ajax技术的用处
先了解一下什么是Ajax
Ajax：只刷新局部页面的技术
Ajax的全称是Asynchronouns JavaScript and XML（异步的 JavaScript 和 XML ）
Ajax不是新的编程语言，而是一种使用现有标准的新方法
Ajax是一种在无需重新加载整个网页的情况下，能够与服务器交换数据并更新部分网页的技术
Ajax最大的优点是页面无刷新，用户的体验非常好。并且使用异步方式与服务器通信，具有更加迅速的响应能力
同步和异步的概念
简单来说可以这样理解（也可以自己去了解）：
- 同步：洗脸后 再去烧水
- 异步：洗脸的同时 喊一个人帮我去烧水
案例1：使用Ajax实现无刷新登录
无刷新：不刷新整个页面，只刷新局部
无刷新的好处 只更新部分页面，有效利用带宽，提高用户体验
后端代码：
/**
* 处理登录功能
**/
@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取表单数据
String account = req.getParameter("account");
String password = req.getParameter("password");
//调用biz去数据库做验证
PrintWriter out = resp.getWriter();
if("root".equals(account)&&"root123".equals(password)){
out.println("yes");
}else{
out.println("no");
}
}
}前端jsp代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://blog.csdn.net/yifei_345678/article/details/js/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<p><input id="account" name="account"></p>
<p><input id="password" name="password"></p>
<button onclick="login()">登录</button>
</div>
<script>
function login() {
//取到页面的值
let account = $("#account").val()
let password = $("#password").val()
//通过jquery来发送请求ajax去后台 login.do
//1.使用ajax方法：get，post都支持
$.ajax({
url:"login.do",//访问地址
data:{account,password},//携带的数据
dataType:"text",//希望后台给你什么样子的数据
type: "get",//什么请求类型
success(resp){
if (resp.trim() === "yes") {
alert("登陆成功")
location.href = "https://blog.csdn.net/yifei_345678/article/details/index.jsp"
} else {
alert("登陆失败")
}
},//成功
error(){
}//错误
})
//2，使用get请求（更方便），get请求同理
/**
$.get(
//请求地址
"login.do",
//携带过去的数据 直接放数据,名字就是数据的名字
{account, password},
//回调函数 请求之后会调用这个函数
//resp就是后台给我的值
function (resp) {
//trim 去空格
//contains 包含
if (resp.trim() === "yes") {
alert("登陆成功")
location.href = "https://blog.csdn.net/yifei_345678/article/details/index.jsp"
} else {
alert("登陆失败")
}
},
"text" //希望后台给我的是普通的文本
)
**/案例2：使用Ajax实现实时检查注册时用户名是否重复
后端代码：
@WebServlet("/find.do")
public class FindServlet extends HttpServlet {
//数据库中存在的名字
List<String> list = new ArrayList<String>();
{
list.add("小明");
list.add("小黄");
list.add("小黑");
list.add("小紫");
list.add("小绿");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//去数据库查询
String name = req.getParameter("name");
boolean f=false;
for (String n : list) {
if(n.equals(name)){
f=true;
break;
}
}
//需要把结果告诉前台
PrintWriter out = resp.getWriter();
out.println(f);
}
}前端jsp代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://blog.csdn.net/yifei_345678/article/details/js/jquery-3.3.1.js"></script>
<style>
#tip{
color: red;
}
</style>
</head>
<body>
<p><input id="name" onkeyup="yz()" type="text" placeholder="请输入你的用户名"><span id="tip"></span></p>
<button id="register">去注册</button>
<script>
function yz(){
//获取数据
let name=$("#name").val()
//发送请求
$.get("find.do",{name},(resp)=>{
if(resp.trim()==="true"){
$("#tip").text("用户名已经存在")
$("#register").prop("disabled",true)
}else{
$("#tip").text("")
$("#register").prop("disabled",false)
}
},"text")
}
</script>
</body>
</html>
案例3：使用Ajax实现搜索自动提示
后端代码：
@WebServlet("/search.do")
public class SearchServlet extends HttpServlet {
// 数据库中存在的商品名字
List<String> list = new ArrayList<String>();
{
list.add("嘿嘿");
list.add("嘿哈");
list.add("苹果");
list.add("平安");
list.add("安乐");
list.add("呵呵");
list.add("哈哈");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 去数据库查询 select * from goods where name like '%key%'
String keyWord = req.getParameter("keyWord");
// 新建一个集合
List<String> ns = new ArrayList<>();
for (String n : list) {
if (n.contains(keyWord)) {
ns.add(n);
}
}
// 设置响应的编码
resp.setCharacterEncoding("utf-8");
// 需要把结果告诉前台
PrintWriter out = resp.getWriter();
// 需要将集合变成json
// 1.需要获取转换对象
ObjectMapper mapper = new ObjectMapper();
// 2.调用方法
String str = mapper.writeValueAsString(ns);
out.println(str);
}
}前端jsp代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://blog.csdn.net/yifei_345678/article/details/js/jquery-3.3.1.js"></script>
</head>
<body>
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：licqi@yunshuaiweb.com
下一篇:文件上传（formData使用）
