Servlet3.0与纯javascript通过Ajax交互的实例详解
对于很多人来说应该很简单。不过还是写写，方便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使前台的代码变得更加简短的。
相关推荐
-
jquery请求servlet实现ajax异步请求的示例
ajax可以发送异步请求实现无刷新效果,但是使用javascript比较麻烦,就query提供了一些封装的方法 ,可以使得操作更为简单: $.ajax()方法: function sendRequest() { $.ajax({ url: "Hello", type: "GET", dataType: "txt", data: "name=zhangsan", complete: function(result){ alert
-
实例解读Ajax与servlet交互的方法
本文以实例形式剖析了Ajax与servlet的交互,并且代码中有较为详细的注释,以帮助大家阅读理解.具体的实现方法如下: 1.JavaScript部分 var req; /*通过异步传输XMLHTTP发送参数到ajaxServlet,返回符合条件的XML文档*/ var url; function getResult() { var f=document.getElementById("form_pub"); var key=f.s.options[f.s.selectedIndex]
-
浅谈ajax在jquery中的请求和servlet中的响应
在jsp中,首先,你需要导入jquery的架包: 获取可返回站点的根路径: <% String path = request.getContextPath(); %> 在jquery中写ajax请求: <script type="text/javascript"> $(function(){ $(".B").click(function(){ $.ajax({ type: "GET", //对应servlet中的方法 ur
-
AJAX+Servlet实现的数据处理显示功能示例
本文实例讲述了AJAX+Servlet实现的数据处理显示功能.分享给大家供大家参考,具体如下: 实现功能:在输入框中输入字符,用AJAX传到后台Servlet处理后加上随机数,并返回到前台显示. 一.写前台jsp页面index.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-
-
Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法
本文实例讲述了Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法.分享给大家供大家参考,具体如下: HTTP请求中,如果是get请求,那么表单参数以name=value&name1=value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以name=value&name1=value1的形式在请求体中.通过chrome的开发者工具可以看到如下(这里是可读的形式,不是真正的HTTP请求协议的请求格式)
-
使用jquery 的ajax 与 Java servlet的交互代码实例
这篇文章主要介绍了使用jquery 的ajax 与 Java servlet的交互代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 由于是使用jquery的 所以别忘记导入jq 下面是jsp文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!
-
Servlet3.0与纯javascript通过Ajax交互的实例详解
对于很多人来说应该很简单.不过还是写写,方便Ajax学习的后来者. 虽然js.html是一个纯静态的页面,但是以下的程序必须挂在Tomcat服务器上,才能做到Ajax交互,否则看不出效果的. Eclipse for javaee注意把做好的工程挂在Tomcat上,才运行Tomcat. 本工程除了JSP必须的Servlet包以外,无须引入其它东西.其实想直接用一个JSP页面完成这个工程的,但是现在搞JSP的,基本上没有人直接在.jsp文件中写东西了吧?后台动作都扔到.java里面了. 一.基本目标
-
jQuery中ajax - get() 方法实例详解
在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul
-
原生js中ajax访问的实例详解
原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (
-
JavaScript“尽快失败”的原则实例详解
我第一次听说编码原则中有"尽快失败"这一条时,觉得很奇怪,为什么代码要失败?应该成功才对呀.但事实上,当代码在遇到错误的时候应该尽快的终止.为了检测各种状态,我们需要频繁的创建if语句与条件分支,而这些条件检测的结果不是成功就是失败(true&&false).之所以会有这么多的条件检测语句,是因为如果不在构建过程中植入这些监测点(checkpoint),那么浏览器内核会执行很多无用的代码,并占用许多宝贵的CPU性能和处理时间,拖慢网站加载速度. 根据那些判断结果为fal
-
JavaScript数组reduce()方法使用实例详解
目录 前言 1.累加和累积乘法 2.获取一个数组的最大值和最小值 3.计算数组中元素出现的频率 4.多个数组的展平 总结 前言 今天请让我详细介绍一下这个方法,希望对你有帮助. 这是 reduce 的基本用法: var arr = [1, 2, 3]; function reducer(parmar1, parmar2){ } arr.reduce(reducer) reduce是数组原型对象上的一个方法,可以帮助我们操作数组.它将另一个函数作为其参数,可以称为reducer. reducer
-
JavaScript中push(),join() 函数 实例详解
定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选
-
Javascript的无new构建实例详解
看jquery源代码第一步的时候,对于jquery对象的创建就看的云里雾里,琢磨半天终于有点感觉了,在此记录下 第一种方式: var A = function(){ return A.prototype.init(); } A.prototype = { init:function(){ this.age = 50; console.log(this); return this; }, age:100 } console.log(A() === new A()); 1.分析下结果为什么为true
-
JavaScript 中调用 Kotlin 方法实例详解
JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =
-
php ajax confirm 删除实例详解
本文主要介绍了php ajax confirm 删除实例,分享给大家,也给自己留个笔记,具体如下: <button name="del" type="button" class="btn btn-primary btn-xs" id="del">删除</button> $("button[name=del]").click(function(){ var statu = confir
-
C++与Lua交互原理实例详解
首先,不同语言交互,我们一般把这种编程方式称为混合编程.开发中为什么要多语言混合使用,只用c++不行吗?答案是因为脚本语言语法糖多使用方便.沙盒式安全机制使系统更稳定.简单易学降低开发成本等,那么,只用脚本不行吗?那也是不合理的,因为与系统api的接口.计算密集性模块的性能要求等是脚本语言不擅长的,这一部份仍然需要c/c++来完成.因此,为了综合各自的优势,就出现了混合编程的需要. 那么,在一个程序的生命周期里,具体哪些部份c++写,哪些部份是脚本写?它们的交互接口又在哪里?一般与系统紧密相关的