JavaWeb中Ajax使用

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

AE_

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

阅读量444

点赞数 8

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/qq_64468032/article/details/135917322

版权

1、JS实现

1.1、js文件

js中实现了一个方法用来实现Ajax，以及被html中标签调用。

get和post相比，后者更安全，携带的信息在浏览器看不见。

代码为post请求，注释里面又get请求方法。

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Hello World</title>
    <script type="text/javascript">
        function checkname() {
            // 1、获取用户名
            var uname=document.getElementById("uname").value;
            // 2、异步发送到服务器
            // 2.1、创建异步对象
            var xmlHttp;
            if(window.XMLHttpRequest) {
                // 非IE
                xmlHttp = new XMLHttpRequest();
            } else if(window.ActiveXObject) {
                // IE
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2.2、指定方法
            // xmlHttp.open("get", "/checkuname?username="+uname, true);
            xmlHttp.open("post", "/checkuname", true);
            // 2.3、指定回调函数
            xmlHttp.onreadystatechange = function () {
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    // 接收服务器返回的内容
                    var txt = xmlHttp.responseText;
                    document.getElementById("rs").innerHTML = txt;
                }
            }
            // 2.4、发送请求
            // xmlHttp.send(null);
            // post
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
            xmlHttp.send("username="+uname)

        }
    </script>
</head>
<body>

<h1>注册</h1>
username:<input type="text" id="uname" onblur="checkname()"><span id="rs" style="color: red"></span>
</html>

1.2、java

写一个Servlet类，实现一下get和post方法类。

服务端接收js传来的信息以及返回信息给前端。

package com.web004;


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;
import java.io.PrintWriter;

@WebServlet(urlPatterns = {"/checkuname"})
public class CheckNameServlet 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 {
        // 1、接收参数
        String username = req.getParameter("username");
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();

        // 2、逻辑代码
        if("admin".equals(username)) {
            // 表示已被占用
            writer.println("用户名已被占用");
        } else {
            // 表示可用
            writer.println("用户名可用");
        }
    }
}

2、Jquery实现

服务端是一样的，js文件不太一样。jquery相比于js实现会比较简洁，因为已经封装好了，直接拿来用，填好参数就行。

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Hello World</title>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#uname").blur(function () {
                // 1、接收输入的信息
                var uname = $(this).val();
                // 2、发送Ajax
                //这个是通过type来规定是get请求还是post请求
                // $.ajax({
                //     url: "/checkuname",
                //     type: "post",
                //     data:{
                //         username: uname
                //     },
                //     dataType: "text",
                //     success: function (rs) {
                //         $("#rs").html(rs);
                //     }
                // })
                // 下面两个分别是get请求和post请求
                // $.get("/checkuname", "username=" + uname,function (rs) {
                //     $("#rs").html(rs);
                // })
                
                // $.post("/checkuname", "username=" + uname,function (rs) {
                //     $("#rs").html(rs);
                // })
            })
        })
    </script>
</head>
<body>

<h1>注册</h1>
username:<input type="text" id="uname""><span id="rs" style="color: red"></span>
</html>