AJAX 练习

Posted 2022-01-21 peng19920430

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX 练习相关的知识，希望对你有一定的参考价值。

主要功能介绍：

检测用户输入的用户名是否为“zhongfucheng”，只要不是“zhongfucheng”就可以使用。

jsp 代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script>
        var httpRequest;
        function checkUsername()
            if(window.XMLHttpRequest)
                // 在 IE6 以上版本以及其他内核的浏览器（Mozilla）等
                httpRequest = new XMLHttpRequest();
             else if(window.ActiveXObject)
                // 在 IE6 以下的版本
                httpRequest = new ActiveXObject();
            

            // 创建http请求
            httpRequest.open("POST", "Servlet1", true);

            // post 提交方式需设置消息头
            httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            // 指定回调函数
            httpRequest.onreadystatechange = response22;

            // 得到文本框中的数据
            var name = document.getElementById("username").value;

            // 发送http请求,把要检测的用户名传递出去
            httpRequest.send("username=" + name);
        


        function response22()
            // 判断请求状态码是否为4[数据接收完成]
            if(httpRequest.readyState == 4)
                // 在判断状态码是否为200
                if(httpRequest.status == 200)
                    // 得到服务端返回的文本数据
                    var text = httpRequest.responseText;

                    // 把服务端返回的数据写到div上
                    var div = document.getElementById("result");
                    div.innerText = text;
                
            
        

    </script>
  </head>
  <body>
  <input type="text" id="username">
  <input type="button" onclick="checkUsername()" value="检测用户名是否合法">
  <div id="result"></div>
  </body>
</html>

后台 Servlet：

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("/Servlet1")
public class AjaxTest extends HttpServlet 


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

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException 
        req.setCharacterEncoding("UTF-8");
        String name = req.getParameter("username");
        if(name != null && name.length() != 0)
            if(name.equals("zhongfucheng"))
                String jsonArray = "you can‘t use this name";
                resp.getWriter().print(jsonArray);
             else 
                resp.getWriter().print("you can use this name");
            

        
    

    @Override
    public void init() throws ServletException 
        super.init();

最后：

参考了微信公众号“Java3y”的文章，感谢“Java3y”

以上是关于AJAX 练习的主要内容，如果未能解决你的问题，请参考以下文章