【Servlet】Servlet3.0与纯javascript通过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不刷新无跳转,即时响应。

二、基本思想

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

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

里面只需留下如下内容:

<?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>

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变量读取出来。

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

四、总结

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

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

时间: 05-07

【Servlet】Servlet3.0与纯javascript通过Ajax交互的相关文章

servlet与jsp篇(一)$.ajax交互

servlet其实是利用java类编写的服务器端应用程序,他的生命周期可以分为三个阶段:初始化阶段.运行阶段和消亡阶段; jsp页面实质上是一个HTML页面,但他包含了用户产生动态网页内容的java代码. 他们之间的联系千丝万缕,今天就跟大家分享一下最近的学习心得:通过JQuery的$.ajax()实现两者的交互. 1.servlet代码:servlet1.java package servlet1; import iface.RemoteServer; import iface.Thrift_

【Servlet】利用Servlet3.0标准与JSTL表达式实现文件上传系统,支持图片上传后显示

伴随着JDK1.6一起出现的Servlet3.0标准,使得JSP的文件上传系统不再艰难,此前在JSP的文件上传系统需要<[Jsp]使用jspsmartupload完成简单的文件上传系统>(点击打开链接)类似这样的插件才能完成的文件上传系统,还不支持中文,使得各位程序猿掏空心思才能解决这个问题.现在Servlet3.0对文件上传的方法进行封装,无须分块就可以实现.而且Servlet3.0还不用类似<[Servlet]最简单的Servlet JavaWeb程序>(点击打开链接)在web

利用servlet3.0上传,纯原生上传,不依赖任何第三方包

tomcat7里面自带的servlet3.0.jar,支持很多新特性,例如,annotation配置servlet,上传,异步等等.... 如果你的tomcat版本低于7的话,单独在项目中引入servlet3.0.jar的话,有可能会出错,具体没研究过,可能是不兼容吧.所以要使用servlet3.0新特性的话,尽量使用tomcat7 不多说了,贴上代码 @WebServlet(name = "uploadServlet", urlPatterns = "/uploadServ

servlet3.0 JQuary Ajax基本使用

servlet3.0 没有web.xml文件,需要使用注解进行配置. js: $(document).ready(function(){ $("#btn").click(function(){ $.ajax({ type:'post', url:'/testAjax/testAjax1', data:{'name':'postmethod'}, success: function (data) { alert(data); }, }); }) }); java代码如下: // @Web

Servlet3.0学习总结(一)——使用注解标注Servlet

一.Servlet3.0介绍 Servlet3.0是Java EE6规范的一部分,Servlet3.0提供了注解(annotation),使得不再需要在web.xml文件中进行Servlet的部署描述,简化开发流程. 二.开发Servlet3.0程序的所需要的环境 开发Servlet3.0的程序需要一定的环境支持.MyEclipse10和Tomcat7都提供了对Java EE6规范的支持.Tomcat需要Tomcat7才支持Java EE6,Tomcat7需要使用JDK1.6以上的版本. 所以开

java web学习总结(二十一) -------------------模拟Servlet3.0使用注解的方式配置Servlet

一.Servlet的传统配置方式 在JavaWeb开发中, 每次编写一个Servlet都需要在web.xml文件中进行配置,如下所示: 1 <servlet> 2 <servlet-name>ActionServlet</servlet-name> 3 <servlet-class>me.gacl.web.controller.ActionServlet</servlet-class> 4 </servlet> 5 6 <ser

关于servlet3.0中的异步servlet

刚看了一下维基百科上的介绍,servlet3.0是2009年随着JavaEE6.0发布的: 到现在已经有六七年的时间了,在我第一次接触java的时候(2011年),servlet3.0就已经出现很久了,但是到现在,里边的一些东西还是没有能够好好地了解一下 最近在研究java的长连接,在了解jetty中的continuations机制的时候也重新了解了一下servlet3.0中的异步servlet机制,通过看几个博客,加上自己的一些测试,算是搞明白了一些,在这里记录一下: 在服务器的并发请求数量比

Servlet3.0中Servlet的使用

目录 1.注解配置 2.异步调用 3.文件上传 相对于之前的版本,Servlet3.0中的Servlet有以下改进: l  支持注解配置. l  支持异步调用. l  直接有对文件上传的支持. 在这篇文章中我将主要讲这三方面的应用示例. 1.注解配置 在以往我们的Servlet都需要在web.xml文件中进行配置(Servlet3.0同样支持),但是在Servlet3.0中引入了注解,我们只需要在对应的Servlet类上使用@WebServlet注解进行标记,我们的应用启动之后就可以访问到该Se

注解方式配置Servlet(Servlet3.0)

注解方式配置Servlet(Servlet3.0) Servlet3.0 主页http://download.oracle.com/otndocs/jcp/servlet-3.0-fr-eval-oth-JSpec/ 1.简单的servlet配置 @WebServlet(”/myservlet”) @WebServlet(name=”MyServlet”, urlPatterns={"/myservlet", "/bar"}) xxx/myservlet就可用执行该