[2016-09-11]【转】Servlet3.0与纯javascript通过Ajax交互

来源:互联网 发布:中美7.13南海对峙知乎 编辑:程序博客网 时间:2024/05/16 18:37

原博地址:http://blog.csdn.net/yongh701/article/details/45558681点击打开链接


这是一个老生常谈的问题,对于很多人来说应该很简单。不过还是写写,方便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不刷新无跳转,即时响应。



二、基本思想

本JavaWeb工程的目录结构如下。


由于是Servlet3.0,可以采用注解的方式写Servlet,web.xml不用写任何东西,直接让Eclipse生成,详见《【Javaweb】Eclipse for JavaEE新建的Web工程自动生成web.xml》(点击打开链接)

里面只需留下如下内容:

[html] view plain copy
 print?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  3.     xmlns="http://java.sun.com/xml/ns/javaee"  
  4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"  
  5.     version="3.0">  
  6. </web-app>  

三、制作过程

1、首先写Servlet.java与js.html哪个都没所谓,反正Ajax交互中,这两个是一体的,不可以割裂。

先看js.html,HTML布局部分很简单,甚至表单都没有,仅有两个输入框。

然后创建Ajax对象XMLHttpRequest的时候,注意不要使用XMLHttpRequest这个关键字,作为Ajax对象XMLHttpRequest的命名,否则一些浏览器处理不了。

[javascript] view plain copy
 print?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Js</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <input type="text" id="param1" />  
  10.     <input type="text" id="param2" />  
  11.     <button onclick="ajax()">Go!</button>  
  12. </body>  
  13. </html>  
  14. <script>  
  15.     //创建Ajax对象,不同浏览器有不同的创建方法,其实本函数就是一个简单的new语句而已。    
  16.     function createXMLHttpRequest() {  
  17.         var XMLHttpRequest1;  
  18.         if (window.XMLHttpRequest) {  
  19.             XMLHttpRequest1 = new XMLHttpRequest();  
  20.         } else if (window.ActiveXObject) {  
  21.             try {  
  22.                 XMLHttpRequest1 = new ActiveXObject("Msxml2.XMLHTTP");  
  23.             } catch (e) {  
  24.                 XMLHttpRequest1 = new ActiveXObject("Microsoft.XMLHTTP");  
  25.             }  
  26.         }  
  27.         return XMLHttpRequest1;  
  28.     }  
  29.     function ajax() {  
  30.         //param1与param2就是用户在输入框的两个参数  
  31.         var param1=document.getElementById("param1").value;  
  32.         var param2=document.getElementById("param2").value;  
  33.         var XMLHttpRequest1 = createXMLHttpRequest();  
  34.         //指明相应页面    
  35.         var url = "./ajaxRequest";  
  36.         XMLHttpRequest1.open("POST", url, true);  
  37.         //这里没法解释,你所有JavaScript的请求头都这样写就对了,不会乱码    
  38.         XMLHttpRequest1.setRequestHeader("Content-Type",  
  39.                 "application/x-www-form-urlencoded");  
  40.         //对于ajaxRequest,本js.html将会传递param1与param2给你。    
  41.         XMLHttpRequest1.send("param1=" + param1 + "¶m2=" + param2);  
  42.         //对于返回结果怎么处理的问题    
  43.         XMLHttpRequest1.onreadystatechange = function() {  
  44.             //这个4代表已经发送完毕之后    
  45.             if (XMLHttpRequest1.readyState == 4) {  
  46.                 //200代表正确收到了返回结果    
  47.                 if (XMLHttpRequest1.status == 200) {  
  48.                     //弹出返回结果    
  49.                     alert(XMLHttpRequest1.responseText);  
  50.                 } else {  
  51.                     //如果不能正常接受结果,你肯定是断网,或者我的服务器关掉了。    
  52.                     alert("网络连接中断!");  
  53.                 }  
  54.             }  
  55.         };  
  56.     }  
  57. </script>  
2、之后是Servlet.java,其实doGet与doPost都是在页面上打印东西,但是采取了这种不同的形式。PrintStream是以前JDK的输出流,PrintWriter貌似是JDK1.4之后的输出流。详情可以参考《【Java】打印流与缓冲区读者完成输入与输出到文件操作》(点击打开链接)与《【Java】输入与输出与JDK1.5之后的新型字符串StringBuilder》(点击打开链接)。不过这部分太简单了,输入输出流,都是Java的必修课吧?

js.html传param1与param2给此Servlet.java之后,等待这个Servlet.java打印出相应的东西,然后在前台直接通过XMLHttpRequest1.responseText变量读取出来。

[java] view plain copy
 print?
  1. package jsServletAjax;  
  2. import java.io.*;    
  3. import javax.servlet.*;    
  4. import javax.servlet.http.*;    
  5. import javax.servlet.annotation.*;    
  6.     
  7. //说明这个Servlet是没有序列号的    
  8. @SuppressWarnings("serial")    
  9. //说明这个Servlet的名称是ajaxRequest,其地址是/ajaxRequest  
  10. //这与在web.xml中设置是一样的    
  11. @WebServlet(name = "ajaxRequest", urlPatterns = { "/ajaxRequest" })    
  12. public class Servlet extends HttpServlet {    
  13.     //放置用户之间通过直接在浏览器输入地址访问这个servlet    
  14.     protected void doGet(HttpServletRequest request,    
  15.             HttpServletResponse response) throws ServletException, IOException {    
  16.         PrintStream out = new PrintStream(response.getOutputStream());    
  17.         response.setContentType("text/html;charSet=utf-8");    
  18.         out.print("请正常打开此页");  
  19.     }    
  20.     
  21.     protected void doPost(HttpServletRequest request,    
  22.             HttpServletResponse response) throws ServletException, IOException {  
  23.         response.setContentType("text/html; charset=utf-8");  
  24.         PrintWriter pw = response.getWriter();  
  25.         request.setCharacterEncoding("utf-8");  
  26.         String param1=request.getParameter("param1");  
  27.         String param2=request.getParameter("param2");         
  28.         pw.print("前台传来了参数:param1="+param1+",param2="+param2);  
  29.         pw.flush();  
  30.         pw.close();  
  31.     }    
  32. }    

四、总结

以上,采取了纯粹的javascript完成Ajax。Servlet.java仅仅是传递了一个字符串给js.html而已!

其实可以利用jQuery使前台的代码变得更加简短的,具体见《【Servlet】在Servlet3.0中利用json+ajax把数据库查询出来的数据推向前台显示,无额外的json解析包》(点击打开链接),如果使用SSH,则可以参考《【Struts2】利用JQuery实现Struts2的Ajax功能》(点击打开链接)


0 0