對于很多人來說應該很簡單。不過還是寫寫，方便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不刷新無跳轉，即時響應。
二、基本思想
由于是Servlet3.0，可以采用注解的方式寫Servlet，web.xml不用寫任何東西，直接讓Eclipse生成
里面只需留下如下內容：
<?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>
新聞熱點
疑難解答
圖片精選
