JavaWeb.24.Ajax

YY…

已于 2022-05-03 17:09:30 修改

阅读量1.1k

点赞数 5

分类专栏： Servlet javaWeb jQuery 文章标签： ajax javascript 服务器 web java

于 2022-05-03 17:09:17 首次发布

本文链接：https://blog.csdn.net/m0_64043477/article/details/124508031

版权

javaWeb 同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

Servlet

9 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

本文深入介绍了Ajax的核心概念，它是一种无需刷新整个页面即可更新局部内容的技术，提升了用户体验。文章通过三个实际案例——无刷新登录、实时检查用户名重复和搜索自动提示，详细展示了Ajax在前端开发中的应用。讲解了如何使用JavaScript、XMLHttpRequest对象和异步处理来实现这些功能。

摘要由CSDN通过智能技术生成

啥是Ajax？

什么是Ajax？

拓展？

Ajax的案例？

什么是Ajax？

Ajax ：全称是 Asynchronouns JavaScript and XML（异步的 JavaScript 和 XML）

Ajax 不是新的编程语言，而是一种使用现有标准的新方法

Ajax 是一种在无需重新加载整个网页的情况下，能够以服务器交换数据并更新部分网页的技术

Ajax 最大的优点就是页面无刷新，用户的体验会更好。并且使用异步方式与服务器通信，具有更加迅速的响应能力

Ajax ：只刷新局部页面的技术

拓展：

JavaScript：更新局部的网页

XML：一般用于请求数据和响应数据的封装

XMLHttpRequest对象：发送请求到服务器并获得返回结果

CSS：美化页面样式

异步：发送请求后不等返回结果，由回调函数处理结果

这里me要强调一下异步相比同步的这个概念：

简单来说就是：

* 同步：干饭干完后，再去烧水

* 异步：干饭的时候，叫一个人帮忙去烧水

Ajax的案例？

案例1.使用Ajax实现无刷新登录

无刷新：表示不刷新整个页面，只刷新局部

该方法的优势：只更新部分页面。有效利用带宽，提高用户体验

后端代码（LoginServlet.java）

/**
 *    处理登录功能
 **/
@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");
        }
    }
}

前端代码（login.jsp）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="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 = "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 = "index.jsp"
                } else {
                    alert("登陆失败")
                }
            },
            "text" //希望后台给我的是普通的文本
        )
         **/

案例2：使用Ajax实现实时检查注册时用户名是否重复

后端代码（FindServlet.java）

@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);
    }
 
}

前端代码（register.jsp）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="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实现搜索自动提示

后端代码（SearchServlet.java）

@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);
	}
}

前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
🔍<input id="keyWord" name="keyWord" onkeyup="search()">
<ul id="list">
 
</ul>
<script>
    function search(){
        //得到输入框的值
        let keyWord=$("#keyWord").val()
        //发送到负责检索商品名称的servlet
        $.get("search.do",{keyWord},(resp)=>{
            //清空原来的选项
            $("#list").empty()
            //resp现在是从字符串变成了数组
            for(let n of resp){//foreach
                $("#list").append("<li>"+n+"</li>")
            }
        },"json");
    }
    //json
    //对象的字符串格式,json有固定的格式
    //将对象变成json
    //将json还原为对象
</script>
</body>
</html>

感谢收看~

一键三连喔~