手把手實現:JS原生程式碼與Servlet的前後互動實現
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。然後就:
這樣就實現了一個登陸系統的實現(偽),因為這裡並沒有涉及到連線資料庫的操作,僅僅是實現了前後端的互動。而且這裡還有很多沒有得到完善,比如登入頁面美化等方面。所以,任重而道遠,諸君也加油吧!