【JavaWeb】之AJAX详解

最新推荐文章于 2024-04-25 23:25:03 发布

卡特霖娜

最新推荐文章于 2024-04-25 23:25:03 发布

阅读量1.7k

点赞数

文章标签： java 前端服务器

本文链接：https://blog.csdn.net/DarlingReZero/article/details/123318585

版权

什么是AJAX

AJAX全称Asynchronous JavaScript and XML（异步的JavaScript和XML）

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

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

AJAX增强了B/S架构的体验性，开创了浏览器时代的新革命，这里补充一下什么是B/S架构方便大家理解：

C/S架构，全称是Client/Server，鉴名知意就是客户端和服务器，这里指的就是客户端和服务器之间交互数据。
B/S架构，全称是Browser/Server,鉴名知意就是浏览器和服务器，这里指的就是浏览器和服务器之间交互数据。

上面也提到了AJAX是不用刷新页面就可以异步刷新部分数据的Web技术，这里说一下最熟知的应用领域就是4399和7K7K，这里的游戏都是使用AJAX来进行渲染并实现游戏的呈现的，背后的数据交互模式就是B/S架构，所以B/S架构是未来发展的趋势，如果网速够快，你就能只需要通过一个浏览器，就可以使用那些需要安装到本地客户端的应用了，比较有对比性的就是QQ有本地安装的客户端版，还有网页的版本，两者都可以使用，这也就是B/S架构的发展趋势。

AJAX的使用

调用AJAX的格式

这里演示的是jquery封装的AJAX的调用格式

$.ajax({
            url:	
            data:	
            success:	
        })

AJAX中常用参数的含义
- url：前端数据发送请求的地址，同时也是处理前端请求并响应回数据的地址。
- data：通俗讲就是数据集合，这个数据集合可以是前端页面中文本框键入的数据，也可以是页面的数据。使用键值对的方式对应，值得一提的是键值对的键必须和请求地址中的某个函数方法的形参名一致，如果不一致，那么前端传来的数据，后端服务器是无法解析的。
- success：这个是AJAX的默认方法，称为默认回调方法。含义是如果请求成功，那么这个函数就会带回服务端处理的数据（服务端返回的数据）。

实现一个登录案例

编写处理请求的Java类

//有必要说一下，@开头的是有功能性的“注解”JAR包
@Contorller
@RequestMapping("/Ajax")
public class ControllerAjax {

    @RequestMapping("/a1")
    public String Login(String name,String pass){
        String flag = "";
        if(name != null){
            if("admin".equals(name)){
                flag = "success";
            }else{
                flag = "用户名错误";
            }
        }

        if(pass != null){
            if("131452".equals(pass)){
                flag = "success";
            }else{
                flag = "密码错误";
            }
        }

        return flag;
    }
}

编写嵌入在JSP页面中的Script代码块，调用Ajax功能

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    //引入jqrery依赖
    <script src="${pageContext.request.contextPath}/Unti/jquery-3.4.1.js" />
</head>
<body>

<script>

<%--函数块中调用了jquery封装的AJAX功能--%>
    function a1() {
        $.ajax({
        
            url:"${pageContext.request.contextPath}/ajax/a1",
            
            data:{"name":$("#user").val()},
            
            success:function (data) {
            
                $("#userinfo").html(data);
                
            }
        })
        
    }
<%--函数块中调用了jquery封装的AJAX功能--%>
    function a2() {
        $.ajax({
        
            url:"${pageContext.request.contextPath}/ajax/a1",
            
            data:{"pass":$("#pass").val()},
            
            success:function (data) {
            
                $("#passinfo").html(data);
                
            }
        })

    }
</script>

    
    <%--在这个标签中的type属性是定义成输入框,onblur属性是定义焦点消失事件发生时调用a1()函数--%>

用户：<input type="text" id="user" οnblur="a1()" /> <span id="userinfo"></span>
密码：<input type="text" id="pass" οnblur="a2()" /> <span id="passinfo"></span>

</body>
</html>