手把手實現：JS原生程式碼與Servlet的前後互動實現
阿新 • • 發佈：2018-12-12
1.涉及到的知識
前端語言：javascript,html，如果可以的話，再來一個CSS用於設計樣式
後端語言：Java
前端技術：ajax（可以用JQ框架，簡單又高效。但是希望用原生程式碼來寫，容易搞懂原理）
後端技術：servlet
2.前端
2.1 首先寫一個HTML頁面
建議寫一個簡單頁面就可以了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登入系統設計</title> </head> <body> <center> <form id="forTest" style="top: 50%,left:50%"> <div>使用者名稱：<input type="text" id="user"></div><br> <div>密 碼：<input type="text" id="pwd"></div><br> <button onclick="ajax()">登入</button> </form> </center> </body> </html>
以上就是一個簡單的登入頁面，使用者名稱（id：user），密碼（id：pwd），點選登入按鈕的時候與ajax（）函式相連。
2.2 寫傳向後端的指令碼
<script type="text/javascript"> //建立Ajax物件，不同瀏覽器有不同的建立方法，其實本函式就是一個簡單的new語句而已。 function createXMLHttpRequest() { var XMLHttpRequest1; if (window.XMLHttpRequest) { XMLHttpRequest_test = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { XMLHttpRequest_test = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { XMLHttpRequest_test = new ActiveXObject("Microsoft.XMLHTTP"); } } return XMLHttpRequest_test; } function ajax() { //param1與param2就是使用者在輸入框的兩個引數 var userName=document.getElementById("user").value; var psw=document.getElementById("pwd").value; var XMLHttpRequest_test = createXMLHttpRequest(); //指明相應頁面 var url = "ajaxForCSDN"; XMLHttpRequest_test.open("POST", url, true); //請求頭，保證不亂碼 XMLHttpRequest_test.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //對於ajaxRequest，本js.html將會傳遞param1與param2給你。 XMLHttpRequest_test.send("userName1=" +userName+ "psw1=" + psw); //對於返回結果怎麼處理的問題 XMLHttpRequest_test.onreadystatechange = function() { //這個4代表已經發送完畢之後 if (XMLHttpRequest_test.readyState == 4) { //200代表正確收到了返回結果 if (XMLHttpRequest_test.status == 200) { //彈出返回結果 alert(XMLHttpRequest_test.responseText); } else { //如果不能正常接受結果，你肯定是斷網，或者我的伺服器關掉了。 alert("網路連線中斷！"); } } }; } </script>
以上指令碼實際上是網路上都有的，我只是稍微改了一點點東西而已。其中註釋已經講解的很詳細了，說白了就是：
1）new一個XMLHttpRequest例項物件
2）獲取指定DOM節點的引數
3）指定servlet的位置（url），並且設定好傳輸的方式（get或者post），用open內嵌函式來實現指定
4）將引數send出去
5）onreadystatechange 即是準備好接受後端傳回來的處理資料，並根據資料的狀態來向前端頁面展示不同的資訊。
（PS：（1）和（2）步可以交換順序）
2.3 前端整體的程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登入系統設計</title> </head> <body> <center> <form id="forTest" style="top: 50%,left:50%"> <div>使用者名稱：<input type="text" id="user"></div><br> <div>密 碼：<input type="text" id="pwd"></div><br> <button onclick="ajax()">登入</button> </form> </center> <script type="text/javascript"> //建立Ajax物件，不同瀏覽器有不同的建立方法，其實本函式就是一個簡單的new語句而已。 function createXMLHttpRequest() { var XMLHttpRequest1; if (window.XMLHttpRequest) { XMLHttpRequest_test = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { XMLHttpRequest_test = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { XMLHttpRequest_test = new ActiveXObject("Microsoft.XMLHTTP"); } } return XMLHttpRequest_test; } function ajax() { //param1與param2就是使用者在輸入框的兩個引數 var userName=document.getElementById("user").value; var psw=document.getElementById("pwd").value; var XMLHttpRequest_test = createXMLHttpRequest(); //指明相應頁面 var url = "ajaxForCSDN"; XMLHttpRequest_test.open("POST", url, true); //請求頭，保證不亂碼 XMLHttpRequest_test.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //對於ajaxRequest，本js.html將會傳遞param1與param2給你。 XMLHttpRequest_test.send("userName1=" +userName+ "psw1=" + psw); //對於返回結果怎麼處理的問題 XMLHttpRequest_test.onreadystatechange = function() { //這個4代表已經發送完畢之後 if (XMLHttpRequest_test.readyState == 4) { //200代表正確收到了返回結果 if (XMLHttpRequest_test.status == 200) { //彈出返回結果 alert(XMLHttpRequest_test.responseText); } else { //如果不能正常接受結果，你肯定是斷網，或者我的伺服器關掉了。 alert("網路連線中斷！"); } } }; } </script> </body> </html>
以上只是一個練習，平常還是需要以模組化思想來寫
3.後端
3.1 先搞一個Servers
window->preferences->Server->Server Runtime Environment->add
具體怎麼配置請自行百度！
3.2 建立一個工程
eclipse->File->new->Dynamic Web Project
這個自己設定好引數。如果不會就去百度吧。
注意！！
建好的Dynamic Web Project工程中，Java Resources用來存放所有的.java源程式（也就是你的servlet），WebContent資料夾裡存放你的靜態檔案（也就是你的前端頁面、js程式碼、css、imgae等）。新手（比如我）在這裡僅僅看百度其它地方的指導，幾乎都會在這裡出錯。所以我覺得我有必要重點畫圈。
3.3 開始寫一個servlet
首先在Java Resources的src資料夾建立好一個servlet檔案。注意！！！！servlet的檔名請務必於前端中url指定的名字保持一致，不然前端頁面永遠找不到他對應的servlet！
在這裡我用的是post方法，然後get方法就可以忽視。
package servletForMap;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ajaxForCSDN
*/
@WebServlet("/ajaxForCSDN")
public class ajaxForCSDN extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ajaxForCSDN() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String userName = request.getParameter("userName1");
String psw = request.getParameter("psw1");
System.out.println(userName);
System.out.println(psw);
//out.write(userName+psw);
if(userName=="shuaibingbing" && psw == "123")
out.write("登入成功！");
else
out.write("登入失敗！");
//out.flush();
out.close();
}
}3.4 把server跑起來~
在eclipse的WebContent資料夾中，找到test_CSDN.html檔案並右擊，RUN As->Run On Server。然後就：
這樣就實現了一個登陸系統的實現（偽），因為這裡並沒有涉及到連線資料庫的操作，僅僅是實現了前後端的互動。而且這裡還有很多沒有得到完善，比如登入頁面美化等方面。所以，任重而道遠，諸君也加油吧！