這篇文章主要介紹Servlet3.0與純javascript通過Ajax交互的示例分析,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)建站從2013年創(chuàng)立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目網(wǎng)站制作、成都網(wǎng)站制作網(wǎng)站策劃,項目實(shí)施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元奉化做網(wǎng)站,已為上家服務(wù),為奉化各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575
雖然js.html是一個純靜態(tài)的頁面,但是以下的程序必須掛在Tomcat服務(wù)器上,才能做到Ajax交互,否則看不出效果的。
Eclipse for javaee注意把做好的工程掛在Tomcat上,才運(yùn)行Tomcat。
本工程除了JSP必須的Servlet包以外,無須引入其它東西。其實(shí)想直接用一個JSP頁面完成這個工程的,但是現(xiàn)在搞JSP的,基本上沒有人直接在.jsp文件中寫東西了吧?后臺動作都扔到.java里面了。
一、基本目標(biāo)
把前臺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)容:
三、制作過程
1、首先寫Servlet.java與js.html哪個都沒所謂,反正Ajax交互中,這兩個是一體的,不可以割裂。
先看js.html,HTML布局部分很簡單,甚至表單都沒有,僅有兩個輸入框。
然后創(chuàng)建Ajax對象XMLHttpRequest的時候,注意不要使用XMLHttpRequest這個關(guān)鍵字,作為Ajax對象XMLHttpRequest的命名,否則一些瀏覽器處理不了。
Js
2、之后是Servlet.java,其實(shí)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(); } }
以上是“Servlet3.0與純javascript通過Ajax交互的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!