Servlet3.0與JS透過Ajax交互作用實例詳解

這次帶給大家Servlet3.0與JS透過Ajax互動實例詳解，Servlet3.0與JS透過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> 
</web-app>

#三、製作過程

##1、首先寫Servlet.java與js.html哪一個都沒所謂，反正Ajax互動中，這兩個是一體的，不可以割裂。

先看js.html，

HTML佈局部分很簡單，連表單都沒有，只有兩個輸入框。

然後建立Ajax物件XMLHttpRequest的時候，注意不要使用XMLHttpRequest這個關鍵字，作為Ajax物件XMLHttpRequest的命名，否則有些瀏覽器處理不了。

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
<meta> 
<title>Js</title> 
 
 
  <input> 
  <input> 
  <button>Go!</button> 
 
 
<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的必修課吧？

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(); 
  }  
}

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

nodejs express實作檔案上傳案例詳解

##webpack.config.js參數使用案例

以上是Servlet3.0與JS透過Ajax交互作用實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！