关于AJAX

最新推荐文章于 2024-08-22 19:04:28 发布

chénJH.

最新推荐文章于 2024-08-22 19:04:28 发布

阅读量105

点赞数 1

文章标签： ajax

本文链接：https://blog.csdn.net/m0_54636735/article/details/114453623

版权

1.什么是AJAX?能干什么?作用是什么?同步和异步的区别
异步的javaScript和XML
AJAX是通过和浏览器进行少量的数据交互,使网页实现异步更新,进行局部更新
少量数据交换,局部更新
同步:当客户端访问服务端,服务器处理的时候,不能做任何操作,直到操作完,才能继续操作
异步::当客户端访问服务端,服务器处理的时候,可以做其他操作,实现局部的刷新
2.jQuery的原生方式实现AJAX
核心语法:$get(url,[data],[callback],[type])
3.get/post实现AJAX
register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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.3.1.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>

	UserServlet

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");

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

        //模拟服务器处理请求需要5秒钟
        /*try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }*/

        //2.判断姓名是否已注册
        if("zhangsan".equals(username)) {
            resp.getWriter().write("<font color='red'>用户名已注册</font>");
        }else {
            resp.getWriter().write("<font color='green'>用户名可用</font>");
        }
    }

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

post方式只需要将get更换成post即可
4.jQuery的通用方式实现AJAX,是一个字面量对象
$.ajax({name:value
name:value
name:value…});
url:请求资源路径
Asanc:是否异步请求true/false
Data:发送到服务器的数据,可以是键值对形式
Type:请求方式get/post
dataType:预期返回的数据类型,取值可以是xml,html,json,text
success:请求成功时调用的回调函数
error:请求失败的回调函数
案例:判断用户名是否注册
register02.html

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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.3.1.min.js"></script>
<script>
    //jQuery通用方式实现ajax,定义字面量对象方式
    $.ajax({
        //请求资源路径
        url: "userServlet",
        //是否异步 不写默认为true
        async: true,
        //请求参数
        data: {username, userName},
        //请求方式 不写默认为get
        type: "GET",
        //数据形式
        dataType: "text",
        //请求成功后调用的回调函数
        success: function (data) {
            $("#uSpan").html(data);
        },
        //请求失败后的回调函数
        error: function () {
            alert("数据请求失败...")
        },
    });
</script>
</html>

当前端页面访问Servlet,会通过获取用户名,判断是否注册

package com.itheima;

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");

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

        //模拟服务器处理请求需要5秒钟
        /*try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }*/

        //2.判断姓名是否已注册
        if("zhangsan".equals(username)) {
            resp.getWriter().write("<font color='red'>用户名已注册</font>");
        }else {
            resp.getWriter().write("<font color='green'>用户名可用</font>");
        }
    }

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

5.JSON的处理
json:是一种轻量级的数据交换
创建格式:
对象类型:{name;value,name:value…};
数组/集合类型:[{name:value},{name:value…}]
混合类型:{name:[{name:value},{name:value}…]}
常用方法:
stringify(对象):将指定格式转换为json格式字符串
parse(字符串):将指定json格式字符串解析成对象
6.JSON转换工具的使用
JSON转换工具是通过JAVA封装好的JAR工具包
可以将java对象集合转换成JSON格式字符串,也可以将字符串转换成java对象
7.综合案例(搜索联想)
使用到的技术点:
html,jquery,ajax
tomcat,servlet
三层
mybatis
mysql
前端页面代码:

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户搜索</title>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 100px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button'] {
            width: 100px;
            height: 46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px
        }

        .show {
            position: absolute;
            width: 535px;
            height: 100px;
            border: 1px solid #999;
            border-top: 0;
            display: none;
        }
    </style>
</head>
<body>
<form autocomplete="off">
    <div class="content">
        <img src="img/logo.jpg">
        <br/><br/>
        <input type="text" id="username">
        <input type="button" value="搜索一下">
        <div id="show" class="show"></div>
    </div>
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //为用户名输入框绑定鼠标单击事件
    $("#username").mousedown(function () {
        //获取输入的用户名
        let username = $("#username").val();
        //判断用户名是否为空
        if (username == null || username == "") {
            //如果为空,将联想框隐藏
            $("#show").hide();
            return;
        }
        //如果不为空,发送AJAX请求,并将数据显示到联想框
        $.ajax({
            //请求资源路径
            url: "userServlet",
            //请求参数
            data: {"username": username},
            //请求方式
            type: "POST",
            //请求成功后的回调函数
            success: function (data) {
                //将返回的数据显示到show的div
                let names = "";
                for (let i = 0; i < data.length; i++) {
                    console.log(data[i]);
                    names += "<div>" + data[i].name + "<div>"
                }
                $("#show").html(names);
                $("#show").show();
            },
            dataType: "JSON"
        });
    });

</script>
</html>

为用户名框绑定单击事件,获取到用户名,判断用户名是否为空,如果为空,则隐藏联想提示框,如果不为空,则发送AJAX请求,并将响应数据显示到联想框
控制层

@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");
        //调用业务层的模糊查询方法得到数据
        UserService userService = new UserServiceImpl();
        List<User> users = userService.selectLike(username);
        //将数据转换成JSON,响应到客户端
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(users);
        resp.getWriter().write(json);
    }

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

获取请求参数,调用业务层的模糊查询方法,将返回的数据转成JSON,并相应给客户端

chénJH.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于AJAX

1.什么是AJAX?能干什么?作用是什么?同步和异步的区别异步的javaScript和XMLAJAX是通过和浏览器进行少量的数据交互,使网页实现异步更新,进行局部更新少量数据交换,局部更新同步:当客户端访问服务端,服务器处理的时候,不能做任何操作,直到操作完,才能继续操作异步::当客户端访问服务端,服务器处理的时候,可以做其他操作,实现局部的刷新2.jQuery的原生方式实现AJAX核心语法:$get(url,[data],[callback],[type])3.get/post实现AJAX
复制链接

扫一扫