Servlet3.0与纯javascript通过Ajax交互的实例详解

2023-09-15 07:24:05 68

对于很多人来说应该很简单。不过还是写写，方便Ajax学习的后来者。

虽然js.html是一个纯静态的页面，但是以下的程序必须挂在Tomcat服务器上，才能做到Ajax交互，否则看不出效果的。

Eclipseforjavaee注意把做好的工程挂在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生成

里面只需留下如下内容：

三、制作过程

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

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

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





Js





Go!

2、之后是Servlet.java，其实doGet与doPost都是在页面上打印东西，但是采取了这种不同的形式。PrintStream是以前JDK的输出流，PrintWriter貌似是JDK1.4之后的输出流。不过这部分太简单了，输入输出流，都是Java的必修课吧？
js.html传param1与param2给此Servlet.java之后，等待这个Servlet.java打印出相应的东西，然后在前台直接通过XMLHttpRequest1.responseText变量读取出来。

packagejsServletAjax;
importjava.io.*;
importjavax.servlet.*;
importjavax.servlet.http.*;
importjavax.servlet.annotation.*;

//说明这个Servlet是没有序列号的
@SuppressWarnings("serial")
//说明这个Servlet的名称是ajaxRequest，其地址是/ajaxRequest
//这与在web.xml中设置是一样的
@WebServlet(name="ajaxRequest",urlPatterns={"/ajaxRequest"})
publicclassServletextendsHttpServlet{
//放置用户之间通过直接在浏览器输入地址访问这个servlet
protectedvoiddoGet(HttpServletRequestrequest,
HttpServletResponseresponse)throwsServletException,IOException{
PrintStreamout=newPrintStream(response.getOutputStream());
response.setContentType("text/html;charSet=utf-8");
out.print("请正常打开此页");
}

protectedvoiddoPost(HttpServletRequestrequest,
HttpServletResponseresponse)throwsServletException,IOException{
response.setContentType("text/html;charset=utf-8");
PrintWriterpw=response.getWriter();
request.setCharacterEncoding("utf-8");
Stringparam1=request.getParameter("param1");
Stringparam2=request.getParameter("param2");
pw.print("前台传来了参数：param1="+param1+"，param2="+param2);
pw.flush();
pw.close();
}
}

四、总结
以上，采取了纯粹的javascript完成Ajax。Servlet.java仅仅是传递了一个字符串给js.html而已！

其实可以利用jQuery使前台的代码变得更加简短的。

Servlet3.0与纯javascript通过Ajax交互的实例详解

热门推荐

随机推荐