[原生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，而是使用var2.使用
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> | <span class="wrong1"></span><br/> <input type="text" name="username" id="username"> </div> <div class="box_pwd"> <label for="userpwd">Password </label> | <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下载
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进行数据传输。
