欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Servlet3.0與純javascript通過Ajax交互的實例詳解

 更新時間：2018年03月18日 17:54:06   投稿：wdc  
Servlet與純javascript通過Ajax交互,對于很多人來說應(yīng)該很簡單。不過還是寫寫，方便Ajax學(xué)習(xí)的后來者

對于很多人來說應(yīng)該很簡單。不過還是寫寫，方便Ajax學(xué)習(xí)的后來者。

雖然js.html是一個純靜態(tài)的頁面，但是以下的程序必須掛在Tomcat服務(wù)器上，才能做到Ajax交互，否則看不出效果的。

Eclipse for javaee注意把做好的工程掛在Tomcat上，才運行Tomcat。

本工程除了JSP必須的Servlet包以外，無須引入其它東西。其實想直接用一個JSP頁面完成這個工程的，但是現(xiàn)在搞JSP的，基本上沒有人直接在.jsp文件中寫東西了吧？后臺動作都扔到.java里面了。

一、基本目標

把前臺js.html輸入框輸入的東西，傳遞到后臺名稱為ajaxRequest，地址/ajaxRequest的Servlet.java。Servlet.java后臺再返回相應(yīng)的信息給前臺js.html，js.html不刷新無跳轉(zhuǎn)，即時響應(yīng)。

二、基本思想

由于是Servlet3.0，可以采用注解的方式寫Servlet，web.xml不用寫任何東西，直接讓Eclipse生成

里面只需留下如下內(nèi)容：

<?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布局部分很簡單，甚至表單都沒有，僅有兩個輸入框。

然后創(chuàng)建Ajax對象XMLHttpRequest的時候，注意不要使用XMLHttpRequest這個關(guān)鍵字，作為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> 
  //創(chuàng)建Ajax對象，不同瀏覽器有不同的創(chuàng)建方法，其實本函數(shù)就是一個簡單的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就是用戶在輸入框的兩個參數(shù) 
    var param1=document.getElementById("param1").value; 
    var param2=document.getElementById("param2").value; 
    var XMLHttpRequest1 = createXMLHttpRequest(); 
    //指明相應(yīng)頁面  
    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); 
    //對于返回結(jié)果怎么處理的問題  
    XMLHttpRequest1.onreadystatechange = function() { 
      //這個4代表已經(jīng)發(fā)送完畢之后  
      if (XMLHttpRequest1.readyState == 4) { 
        //200代表正確收到了返回結(jié)果  
        if (XMLHttpRequest1.status == 200) { 
          //彈出返回結(jié)果  
          alert(XMLHttpRequest1.responseText); 
        } else { 
          //如果不能正常接受結(jié)果，你肯定是斷網(wǎng)，或者我的服務(wù)器關(guān)掉了。  
          alert("網(wǎng)絡(luò)連接中斷！"); 
        } 
      } 
    }; 
  } 
</script>

2、之后是Servlet.java，其實doGet與doPost都是在頁面上打印東西，但是采取了這種不同的形式。PrintStream是以前JDK的輸出流，PrintWriter貌似是JDK1.4之后的輸出流。不過這部分太簡單了，輸入輸出流，都是Java的必修課吧？
js.html傳param1與param2給此Servlet.java之后，等待這個Servlet.java打印出相應(yīng)的東西，然后在前臺直接通過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中設(shè)置是一樣的  
@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("前臺傳來了參數(shù)：param1="+param1+"，param2="+param2); 
    pw.flush(); 
    pw.close(); 
  }  
}

四、總結(jié)
以上，采取了純粹的javascript完成Ajax。Servlet.java僅僅是傳遞了一個字符串給js.html而已！

其實可以利用jQuery使前臺的代碼變得更加簡短的。

相關(guān)文章

最新評論