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


Posted in Javascript onMarch 18, 2018

对于很多人来说应该很简单。不过还是写写,方便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不刷新无跳转,即时响应。

二、基本思想

由于是Servlet3.0,可以采用注解的方式写Servlet,web.xml不用写任何东西,直接让Eclipse生成

里面只需留下如下内容:

<?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的必修课吧?
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使前台的代码变得更加简短的。

Javascript 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
asm.js使用示例代码
Nov 28 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
js禁止表单重复提交
Aug 29 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
小程序实现侧滑删除功能
Jun 25 Javascript
jQuery替换节点元素的操作方法
Mar 18 #jQuery
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 #Javascript
分析javascript原型及原型链
Mar 18 #Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
jQuery中each方法的使用详解
Mar 18 #jQuery
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 #Javascript
js中DOM事件绑定分析
Mar 18 #Javascript
You might like
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
php函数式编程简单示例
2019/08/08 PHP
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
python的re模块应用实例
2014/09/26 Python
Python爬取读者并制作成PDF
2015/03/10 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
六年级学生评语
2014/04/22 职场文书
python中subplot大小的设置步骤
2021/06/28 Python
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
尝试使用Python爬取城市租房信息
2022/04/12 Python