重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍Servlet3.0与纯javascript通过Ajax交互的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联建站从2013年创立,是专业互联网技术服务公司,拥有项目网站制作、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元奉化做网站,已为上家服务,为奉化各地企业和个人服务,联系电话:18980820575
虽然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不刷新无跳转,即时响应。
二、基本思想
由于是Servlet3.0,可以采用注解的方式写Servlet,web.xml不用写任何东西,直接让Eclipse生成
里面只需留下如下内容:
三、制作过程
1、首先写Servlet.java与js.html哪个都没所谓,反正Ajax交互中,这两个是一体的,不可以割裂。
先看js.html,HTML布局部分很简单,甚至表单都没有,仅有两个输入框。
然后创建Ajax对象XMLHttpRequest的时候,注意不要使用XMLHttpRequest这个关键字,作为Ajax对象XMLHttpRequest的命名,否则一些浏览器处理不了。
Js
2、之后是Servlet.java,其实doGet与doPost都是在页面上打印东西,但是采取了这种不同的形式。PrintStream是以前JDK的输出流,PrintWriter貌似是JDK1.4之后的输出流。不过这部分太简单了,输入输出流,都是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(); } }
以上是“Servlet3.0与纯javascript通过Ajax交互的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!