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 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
关于Vue中$refs的探索浅析
Nov 05 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
php join函数应用
2011/05/04 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
为你总结一些php信息函数
2015/10/21 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
SQL数据库笔试题
2016/03/08 面试题
C#怎么让一个窗口居中显示?
2015/10/20 面试题
长青弘远的面试题
2012/06/09 面试题
室内设计实习自我鉴定
2013/09/25 职场文书
工作评语大全
2014/04/26 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
七年级语文教学反思
2016/03/03 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript