投稿
  1. 首页
  2. java

【Java WEB】AJAX

code • 2022-4-30 • java • 阅读 34

【Java WEB】AJAX,第1张

🌟个人博客：www.hellocode.top🌟
⭐所有文章均在上方博客首发，其他平台同步更新
🔥本文专栏：《Java Web从入门到实战》
🌞如没有Java基础，请先前往《Java零基础指南》专栏学习相应知识
⚡如有问题，欢迎指正，一起学习~~

文章目录
      • 快速入门
      • JSON的处理
        • 基础介绍
        • 转换工具
        • 转换练习
      • 综合案例
        • 搜索联想

  • AJAX(Asynchronous JavaScript And XML)：异步的JavaScript和 XML
  • 本身不是一种新技术，而是多个技术的综合，用于快速创建动态网页的技术
  • 一般的网页如果需要更新内容，必须重新加载整个页面
  • 而AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新
快速入门

原生JavaScript 实现 AJAX

  • 核心对象：XMLHttpRequest
    用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新
  • 打开链接：open(method,url,async)
    method：请求的类型(GET 或 POST)
    url：请求资源的路径
    async：true（异步）或false（同步）
  • 发送请求：send(String params)
    params：请求的参数（POST专用）
  • 处理响应：onreadystatechange
    readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接受，3-请求处理中，4-请求已完成，且响应已就绪
    status：200-响应已全部OK
  • 获得相应数据形式
    responseText：获得字符串形式的响应数据
    responseXML：获得XML形式的响应数据
doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册title>
head>
<body>
    <form autocomplete="off">
        姓名:<input type="text" id="username">
        <span id="uSpan">span>
        <br>
        密码:<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    form>
body>
<script>
    // 为姓名绑定失去焦点事件
    document.getElementById("username").onblur = function (){
        // 创建XMLHttpRequest核心对象
        let xmlHttp = new XMLHttpRequest();

        // 打开链接
        let username = document.getElementById("username").value;
        xmlHttp.open("GET","/userServlet?username=" + username,true);

        // 发送请求
        xmlHttp.send();

        // 处理响应
        xmlHttp.onreadystatechange = function (){
            // 条件判断，请求和响应是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                // 将响应的数据显示到span标签里
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
            }
        }
    }
script>
html>

package study.ajax;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置请求和响应的乱码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        // 获取请求参数
        String username = req.getParameter("username");

        // 判断姓名是否已注册
        if("zhangsan".equals(username)){
            resp.getWriter().write("用户名已注册");
        }else{
            resp.getWriter().write("用户名可用");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

jQuery 的 GET 方式实现AJAX

  • 核心语法：$.get(url,[data],[callback],[type]);
    url：请求的资源路径
    data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
    callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码
    type：预期的返回数据类型，取值可以是xml，html，js，json，text等
doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册title>
head>
<body>
    <form autocomplete="off">
        姓名:<input type="text" id="username">
        <span id="uSpan">span>
        <br>
        密码:<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    form>
body>
<script src="js/jquery-3.6.0.min.js">script>
<script>
    // 为用户名绑定失去焦点事件
    $("#username").blur(function (){
        let username = $("#username").val();
        // jQuery的GET 方式实现 AJAX
        $.get(
            // 请求的资源路径
            "userServlet",
            // 请求的参数
            "username=" + username,
            // 回调函数
            function (data){
                // 将响应的数据显示到span标签上
                $("#uSpan").html(data);
            },
            // 响应数据形式
            "text"
        )
    });
script>
html>

对应的Java处理代码和JS原生的处理代码一致

jQuery的 POST 方式实现 AJAX

  • 核心语法：$.post(url,[data],[callback],[type]);
    url：请求的资源路径
    data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
    callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码
    type：预期的返回数据类型，取值可以是xml，html，js，json，text等
doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册title>
head>
<body>
    <form autocomplete="off">
        姓名:<input type="text" id="username">
        <span id="uSpan">span>
        <br>
        密码:<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    form>
body>
<script src="js/jquery-3.6.0.min.js">script>
<script>
    // 为用户名绑定失去焦点事件
    $("#username").blur(function (){
        let username = $("#username").val();
        // jQuery的POST 方式实现 AJAX
        $.post(
            // 请求的资源路径
            "userServlet",
            // 请求的参数
            "username=" + username,
            // 回调函数
            function (data){
                // 将响应的数据显示到span标签上
                $("#uSpan").html(data);
            },
            // 响应数据形式
            "text"
        )
    });
script>
html>

post和get方式只是$.post和$.get方法名不同，其他参数都一致

jQuery 的通用方式实现 AJAX

  • 核心语法：$.ajax({name:value,name:value,...});
    • url：请求的资源路径
    • async：是否异步请求，true-是，false-否（默认）
    • data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象
    • type：请求方式，POST 或 GET(默认是GET)
    • dataType：预期的返回数据类型，取值可以是xml，html，js，json，text等
    • success：请求成功时调用的回调函数
    • error：请求失败时调用的回调函数
doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册title>
head>
<body>
    <form autocomplete="off">
        姓名:<input type="text" id="username">
        <span id="uSpan">span>
        <br>
        密码:<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    form>
body>
<script src="js/jquery-3.6.0.min.js">script>
<script>
    // 为用户名绑定失去焦点事件
    $("#username").blur(function (){
        let username = $("#username").val();
        // jQuery的通用方式实现 AJAX
        $.ajax({
            // 请求资源路径
            url:"userServlet",
            // 是否异步
            async:true,
            // 请求参数
            data:"username="+username,
            // 请求方式
            type:"GET",
            // 返回响应数据形式
            dataType:"text",
            //请求成功后的回调函数
            success:function (data){
                $("#uSpan").html(data);
            },
            // 请求失败的回调函数
            error:function (){
                alert(" *** 作失败");
            }
        })
    });
script>
html>
JSON的处理 基础介绍
  • JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式
  • 它是基于ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
  • 简洁清晰的层次结构使得JSON成为理想的数据交换语言。易于人的阅读和编写，同时也易于计算及解析和生成，并有效的提升网络传输效率
  • 创建格式
    类型语法说明
    对象类型{name:value,name:value,…}name是字符串类型，value可以是任意类型
    数组/集合类型[{name:value,…},{name:value,…}]name是字符串类型，value可以是任意类型
    混合类型{name:
    [{name:value,…},{name:value,…}]
    }    		name是字符串类型，value可以是任意类型
  • 常用方法
    成员方法说明
    stringify(对象)将指定对象转换为json格式字符串
    parse(字符串)将指定json格式字符串解析成对象
转换工具
  • 除了在JavaScript中使用 JSON外，在Java中也可以使用JSON
  • JSON 的转换工具是通过Java 封装好的一些 jar 工具包
  • 可以将Java对象或集合转换为 JSON 格式的字符串，也可以将 JSON 格式的字符串转换成 Java对象
  • Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson

步骤

  1. 导入jar包
  2. 创建核心对象
  3. 调用方法完成转换

常用类

类名说明
ObjectMapper是Jackson工具包的核心类，它提供一些方法来实现 JSON 字符串和对象之间的转换
TypeReference对集合泛型的反序列化，使用TypeReference可以明确的指定反序列化的对象类型
  • ObjectMapper常用方法
    方法名说明
    String writeValueAsString(Object obj)将Java对象转换为JSON字符串
    T readValue(String json, Class valueType)将JSON字符串转换为Java对象
    T readValue(String json, TypeReference valueTypeRef)将JSON字符串转换为Java对象
转换练习
  1. 对象转 JSON，JSON 转对象
  2. Map转JSON，JSON 转Map
  3. Map转JSON，JSON 转Map
  4. List转 JSON，JSON转 List
  5. List转 JSON，JSON转 List
package study.ajax02;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class ObjectMapperTest {
    private ObjectMapper mapper = new ObjectMapper();

    // 对象转 JSON，JSON 转对象
    @Test
    public void test01() throws Exception {
        // User 转 json
        User user = new User("张三", 23);
        String json = mapper.writeValueAsString(user);
        System.out.println("json 字符串：" + json);

        // json 转 User
        User user2 = mapper.readValue(json, User.class);
        System.out.println("java对象：" + user2);
    }

    // Map 转 JSON， JSON 转 Map
    @Test
    public void test02() throws Exception {
        // Map 转 JSON
        HashMap<String, String> map = new HashMap<>();
        map.put("姓名", "张三");
        map.put("性别", "男");
        String json = mapper.writeValueAsString(map);
        System.out.println("json 字符串：" + json);

        // JSON 转 Map
        HashMap<String, String> map2 = mapper.readValue(json, HashMap.class);
        System.out.println("java对象：" + map2);
    }

    // Map转JSON，JSON 转Map
    @Test
    public void test03() throws Exception {
        // Map转JSON
        HashMap<String, User> map = new HashMap<>();
        map.put("一班", new User("张三", 23));
        map.put("二班", new User("李四", 24));
        String json = mapper.writeValueAsString(map);
        System.out.println("json 字符串：" + json);

        // JSON 转Map
        HashMap<String, User> map2 = mapper.readValue(json, new TypeReference<HashMap<String, User>>() {
        });
        System.out.println("java对象：" + map2);

    }

    // List转 JSON，JSON转 List
    @Test
    public void test04() throws Exception {
        // List转 JSON
        ArrayList<String> list = new ArrayList<>();
        list.add("张三");
        list.add("李四");
        String json = mapper.writeValueAsString(list);
        System.out.println("json 字符串：" + json);

        // JSON转 List
        ArrayList<String> list2 = mapper.readValue(json, ArrayList.class);
        System.out.println("java对象：" + list2);
    }

    // List转 JSON，JSON转 List
    @Test
    public void test05() throws Exception {
        // List转 JSON
        ArrayList<User> list = new ArrayList<>();
        list.add(new User("张三",23));
        list.add(new User("李四",24));
        String json = mapper.writeValueAsString(list);
        System.out.println("json 字符串：" + json);

        // JSON转 List
        ArrayList<User> list2 = mapper.readValue(json, new TypeReference<ArrayList<User>>() {
        });
        System.out.println("java对象：" + list2);

    }
}
综合案例 搜索联想
  • 数据准备
    CREATE TABLE USER(
	id INT PRIMARY KEY AUTO_INCREMENT,
	NAME VARCHAR(20),
	age INT,
	search_count INT	-- 搜索数量
);

INSERT INTO USER VALUES 
(NULL,"张三",23,25),(NULL,"李四",24,5),(NULL,"王五",25,3),
(NULL,"赵六",26,7),(NULL,"张三丰",93,20),(NULL,"张无忌",18,23),
(NULL,"张强",33,21),(NULL,"张果老",65,6);

    # config.properties

driver=com.mysql.jdbc.Driver
url=jdbc:mysql://192.168.23.129:3306/db13
username=root
password=密码

    # log4j.properties

# Global logging configuration
# 输出信息的显示。四个级别：ERROR、WARN、INFO、DEBUG
log4j.rootLogger=DEBUG, stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

    



DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">


<configuration>
    
    <properties resource="config.properties"/>
    
    <settings>
        <setting name="logImpl" value="log4j"/>
    settings>
    
    <environments default="mysql">
        
        <environment id="mysql">
            
            <transactionManager type="JDBC">transactionManager>
            
            <dataSource type="POOLED">
                
                <property name="driver" value="${driver}"/>
                <property name="url" value="${url}"/>
                <property name="username" value="${username}"/>
                <property name="password" value="${password}"/>
            dataSource>
        environment>
    environments>
    
    <mappers>
        
        <package name="study.ajax.mapper"/>
    mappers>
configuration>
  • 页面
    1. 为用户名输入框绑定鼠标点击事件
    2. 获取输入的用户名数据
    3. 判断用户名是否为空
    4. 如果为空，则将联想提示框隐藏
    5. 如果不为空，则发送AJAX请求，并将响应的数据显示到联想框
  • 服务器
    1. 获取请求参数
    2. 调用业务层的模糊查询方法
    3. 将返回的数据转成JSON，并响应给客户端

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/langs/755943.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
code code 管理员组
0 0
上一篇 2022-04-30
下一篇 2022-04-30

发表评论

登录后才能评论

评论列表（0条）

保存