[2016-09-11]【转】Servlet3.0与纯javascript通过Ajax交互
来源:互联网 发布:中美7.13南海对峙知乎 编辑:程序博客网 时间:2024/05/25 19:59
原博地址: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》(点击打开链接)
里面只需留下如下内容:
三、制作过程
1、首先写Servlet.java与js.html哪个都没所谓,反正Ajax交互中,这两个是一体的,不可以割裂。
先看js.html,HTML布局部分很简单,甚至表单都没有,仅有两个输入框。
然后创建Ajax对象XMLHttpRequest的时候,注意不要使用XMLHttpRequest这个关键字,作为Ajax对象XMLHttpRequest的命名,否则一些浏览器处理不了。
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变量读取出来。
四、总结
以上,采取了纯粹的javascript完成Ajax。Servlet.java仅仅是传递了一个字符串给js.html而已!
其实可以利用jQuery使前台的代码变得更加简短的,具体见《【Servlet】在Servlet3.0中利用json+ajax把数据库查询出来的数据推向前台显示,无额外的json解析包》(点击打开链接),如果使用SSH,则可以参考《【Struts2】利用JQuery实现Struts2的Ajax功能》(点击打开链接)
- [2016-09-11]【转】Servlet3.0与纯javascript通过Ajax交互
- 【Servlet】Servlet3.0与纯javascript通过Ajax交互
- Ajax与Java通过POST方式交互
- 后台函数与Javascript交互(非AJAX)
- C#通过webbrowser控件与javascript交互
- C#通过webbrowser控件与javascript交互
- UIViewController与UIWebView通过JavaScript进行交互
- Android通过javascript与flash动画交互
- Native通过Javascript与Html5交互
- Native通过Javascript与Html5交互
- 通过AJAX与Servlet进行交互:通过JSON传递数据
- 纯JavaScript实现Ajax
- 【JavaScript】(7)——JavaScript与Ajax交互
- [Js笔记]Ajax通过GET方式与PHP进行交互
- Ajax学习(二),通过XML与服务器进行交互
- 1、Ajax与Java通过GET方式交互
- 2、Ajax与Java通过POST方式交互
- 5、jQuery的Ajax与Java通过GET方式交互
- window8.1系统下装ubuntu 双系统遇到问题记录
- VMware中的Ubuntu连接本地主机Win7
- 【给将来学神的算法详解--高精】(8)“高级”高精度函数
- 斐波那契的算法
- 超过2TB磁盘的分区和快速格式化
- [2016-09-11]【转】Servlet3.0与纯javascript通过Ajax交互
- 【Leetcode】397. Integer Replacement
- 数据库系统概论之第一章绪论
- EventBus简单使用
- 图片无限轮播
- Code Review:代码审查工具大阅兵
- linux同步机制
- XML
- HDU1398-Square Coins