標籤：ajax javascript servlet javaweb jsp
這是一個老生常談的問題，對於很多人來說應該很簡單。不過還是寫寫，方便Ajax學習的後來者。雖然js.html是一個純靜態頁面，但是以下的程式必須掛在Tomcat伺服器上，才能做到Ajax互動，否則看不出效果的。Eclipse for javaee注意把做好的工程掛在Tomcat上，才運行Tomcat。本工程除了JSP必須的Servlet包以外，無須引入其它東西。其實想直接用一個JSP頁面完成這個工程的，但是現在搞JSP的，基本上沒有人直接在.jsp檔案中寫東西了吧？後台動作都扔到.java裡面了。
一、基本目標
把前台js.html輸入框輸入的東西，傳遞到後台名稱為ajaxRequest，地址/ajaxRequest的Servlet.java。Servlet.java後台再返回相應的資訊給前台js.html，js.html不重新整理無跳轉，即時響應。
二、基本思想
本JavaWeb工程的目錄結構如下。
由於是Servlet3.0，可以採用註解的方式寫Servlet，web.xml不用寫任何東西，直接讓Eclipse產生，詳見《【Javaweb】Eclipse for JavaEE建立的Web工程自動產生web.xml》（點擊開啟連結）
裡面只需留下如下內容：
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://java.sun.com/xml/ns/javaee"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"version="3.0"></web-app>
三、製作過程
1、首先寫Servlet.java與js.html哪個都沒所謂，反正Ajax互動中，這兩個是一體的，不可以割裂。
先看js.html，HTML布局部分很簡單，甚至表單都沒有，僅有兩個輸入框。
然後建立Ajax對象XMLHttpRequest的時候，注意不要使用XMLHttpRequest這個關鍵字，作為Ajax對象XMLHttpRequest的命名，否則一些瀏覽器處理不了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Js</title></head><body><input type="text" id="param1" /><input type="text" id="param2" /><button onclick="ajax()">Go!</button></body></html><script>//建立Ajax對象，不同瀏覽器有不同的建立方法，其實本函數就是一個簡單的new語句而已。 function createXMLHttpRequest() {var XMLHttpRequest1;if (window.XMLHttpRequest) {XMLHttpRequest1 = new XMLHttpRequest();} else if (window.ActiveXObject) {try {XMLHttpRequest1 = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {XMLHttpRequest1 = new ActiveXObject("Microsoft.XMLHTTP");}}return XMLHttpRequest1;}function ajax() {//param1與param2就是使用者在輸入框的兩個參數var param1=document.getElementById("param1").value;var param2=document.getElementById("param2").value;var XMLHttpRequest1 = createXMLHttpRequest();//指明相應頁面 var url = "./ajaxRequest";XMLHttpRequest1.open("POST", url, true);//這裡沒法解釋，你所有JavaScript的要求標頭都這樣寫就對了，不會亂碼 XMLHttpRequest1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//對於ajaxRequest，本js.html將會傳遞param1與param2給你。 XMLHttpRequest1.send("param1=" + param1 + "¶m2=" + param2);//對於返回結果怎麼處理的問題 XMLHttpRequest1.onreadystatechange = function() {//這個4代表已經發送完畢之後 if (XMLHttpRequest1.readyState == 4) {//200代表正確收到了返回結果 if (XMLHttpRequest1.status == 200) {//彈出返回結果 alert(XMLHttpRequest1.responseText);} else {//如果不能正常接受結果，你肯定是斷網，或者我的伺服器關掉了。 alert("網路連接中斷！");}}};}</script>2、之後是Servlet.java，其實doGet與doPost都是在頁面上列印東西，但是採取了這種不同的形式。PrintStream是以前JDK的輸出資料流，PrintWriter貌似是JDK1.4之後的輸出資料流。詳情可以參考《【Java】列印流與緩衝區讀者完成輸入與輸出到檔案操作》（點擊開啟連結）與《【Java】輸入與輸出與JDK1.5之後的新型字串StringBuilder》（點擊開啟連結）。不過這部分太簡單了，輸入輸出資料流，都是Java的必修課吧？
js.html傳param1與param2給此Servlet.java之後，等待這個Servlet.java列印出相應的東西，然後在前台直接通過XMLHttpRequest1.responseText變數讀取出來。
package jsServletAjax;import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; //說明這個Servlet是沒有序號的 @SuppressWarnings("serial") //說明這個Servlet的名稱是ajaxRequest，其地址是/ajaxRequest//這與在web.xml中設定是一樣的 @WebServlet(name = "ajaxRequest", urlPatterns = { "/ajaxRequest" }) public class Servlet extends HttpServlet { //放置使用者之間通過直接在瀏覽器輸入地址訪問這個servlet protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintStream out = new PrintStream(response.getOutputStream()); response.setContentType("text/html;charSet=utf-8"); out.print("請正常開啟此頁"); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html; charset=utf-8"); PrintWriter pw = response.getWriter(); request.setCharacterEncoding("utf-8"); String param1=request.getParameter("param1"); String param2=request.getParameter("param2"); pw.print("前台傳來了參數：param1="+param1+"，param2="+param2);pw.flush();pw.close(); } }
以上，採取了純粹的javascript完成Ajax。Servlet.java僅僅是傳遞了一個字串給js.html而已！
其實可以利用jQuery使前台的代碼變得更加簡短的，具體見《【Servlet】在Servlet3.0中利用json+ajax把資料庫查詢出來的資料推向前台顯示，無額外的json解析包》（點擊開啟連結），如果使用SSH，則可以參考《【Struts2】利用JQuery實現Struts2的Ajax功能》（點擊開啟連結）
【Servlet】Servlet3.0與純javascript通過Ajax互動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
