【Javaweb】【Js】【Servlet】Js与Servlet交互 - Js请求Servlet与响应Servlet

[原生JS][POST]请求和响应（一）

虽然效率有点低，但是作为初学者，可以先看看这个，然后再去看后面用Json处理。

XMLHttpRequest介绍

XMLHttpRequest 对象用于在后台与服务器交换数据。

特点

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

XMLHttpRequest使用

创建 XMLHttpRequest 对象

xmlhttp=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

建立连接

xmlhttp.open(提交方式,目标页面,是否为异步方式,[可选参数]用户名,[可选参数]密码)

xmlhttp.open(method, url, async, username, password);

xmlhttp.open("post","/Login",true)

第一个参数[method]：HTTP 请求方法，必须参数，值包括 POST、GET 和 HEAD，大小写不敏感。

第二个参数[url]：请求的 URL 字符串，必须参数，大部分浏览器仅支持同源请求。

第三个参数[async]：指定请求是否为异步方式，默认为 true。如果为 false，当状态改变时会立即调用 onreadystatechange 属性指定的回调函数。

第四个参数[username]：可选参数，如果服务器需要验证，该参数指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。

第五个参数[password]：可选参数，验证信息中的密码部分，如果用户名为空，则该值将被忽略。

设置请求头

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

POST 必须设置

发送请求（Post）

let name = document.forms['LoginForm']['username'].value;
let pwd = document.forms['LoginForm']['userpwd'].value;
let params="username="+encodeURIComponent(name)+"&userpwd="+encodeURIComponent(pwd);

xmlhttp.send(params);

1.你也可以不使用let，而是使用var

2.使用encodeURIComponent()避免在传参过程中出现中文乱码问题

3.如果使用get方式，则参数写在url里，然后xmlhttp.send(null)

例子

<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
 window.onload = function () {  //页面初始化
     var b = document.getElementsByTagName("input")[0];
     b.onclick = function () {
         var url = "server.php?callback=functionName"；  //设置查询字符串
         var xhr = createXHR();  //实例化XMLHttpRequest 对象
         xhr.open("GET", url, false);  //建立连接，要求同步响应
         xhr.send(null);  //发送请求
         console.log(xhr.responseText);  //接收数据
     }
 }
</script>

响应

xmlhttp.onreadystatechange = function () {
                if(xmlhttp.readyState===4) alert(xmlhttp.responseText);
            }

当状态码改变时执行

如果.readyState等于4

则弹出窗口，显示内容为响应文本

Servlet

  	request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String name = request.getParameter("username");
        String pwd = request.getParameter("userpwd");
        response.getWriter().write(Duser.userLoginCheck(name,pwd)+"");

response.getWriter().write() 的文本，在js里面使用xmlhttp.responseText接收

萌狼蓝天写的一个例子

前端

<!--Form-->
<form name="LoginForm" class="box_info" id="LoginForm"  method="post" enctype="application/x-www-form-urlencoded" action="${pageContext.request.contextPath}/Login">
    <!--Profile-->
    <div class="box_profile">
        <img src="res/img/pic.jpg" class="set_profile" alt="Profile"/>
    </div>

    <div class="box_name">
        <label for="username">User Email </label>&nbsp;&nbsp;|&nbsp;&nbsp;<span class="wrong1"></span><br/>
        <input type="text" name="username" id="username">
    </div>

    <div class="box_pwd">
        <label for="userpwd">Password </label>&nbsp;&nbsp;|&nbsp;&nbsp;<span class="wrong2"></span><br/>
        <input type="password" name="userpwd" id="userpwd">
    </div>

    <div class="box_btn">
        <!--        <button id="btn_login" onclick="formCheck()"  >Login</button>-->
        <input type="button" id="btn_login" onclick="formCheck()" value="Login" />
    </div>
    <div class="box_other">
        <span class="register">
            <a href="register.jsp">Register</a>
        </span>
        <span class="forget">
            <a href="#">Forget Password</a>
        </span>
    </div>
    <br/>
    <div align="center">
        <div style="display:inline-block;margin:10px;width: 10px;height: 10px;background: #0981f6" onclick="colorSet_Blue()"></div>
        <div style="display:inline-block;margin:10px;width: 10px;height: 10px;background: #d9212b" onclick="colorSet_Red()"></div>
        <div style="display:inline-block;margin:10px;width: 10px;height: 10px;background:#23A393" onclick="colorSet_Green()"></div>
    </div>
</form>

关于这个前端样式，如果你喜欢的话可以访问下面这篇博客了解，然后进入gitee下载

【Web前端】【开源分享】H5登陆界面 - 2021年12月24日

JS

// 登陆用
function formCheck()
{
    let name = document.forms['LoginForm']['username'].value;
    let pwd = document.forms['LoginForm']['userpwd'].value;
    let params="username="+encodeURIComponent(name)+"&userpwd="+encodeURIComponent(pwd);
    if(name==null || name ===""){
        document.getElementsByClassName('wrong1')[0].innerHTML="请输入用户名";
    }else{
        document.getElementsByClassName('wrong1')[0].innerHTML="";
        if(pwd==null || pwd ===""){
            document.getElementsByClassName('wrong2')[0].innerHTML="请输入密码";
        }else{
            document.getElementsByClassName('wrong2')[0].innerHTML="";
            //提交数据
            var myrequest  = new XMLHttpRequest();
            myrequest.open("post","/Login",true)

            myrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            myrequest.send(params);


            myrequest.onreadystatechange = function () {
                if(myrequest.readyState===4) alert(myrequest.responseText);
            }
        }
    }
}

Servlet

@WebServlet(name = "Login", value = "/Login")
public class Login extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("VCVxWorks");
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String name = request.getParameter("username");
        String pwd = request.getParameter("userpwd");
        response.getWriter().write(Duser.userLoginCheck(name,pwd)+"");

    }
}

存在的问题

响应太慢了，前台等很久才显示结果，老师建议我使用Json进行数据传输。

引用资料

C语言中文网 - JS XMLHttpRequest入门教程

w3school - AJAX - 服务器响应

w3school - XML DOM - XMLHttpRequest 对象