Servlet與純javascript透過Ajax互動,對很多人來說應該很簡單。不過還是寫寫，方便Ajax學習的後來者
對很多人來說應該很簡單。不過還是寫寫，方便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>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();
}
}以上是Servlet3.0與純javascript透過Ajax互動的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
