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使前台的代码变得更加简短的。
上一篇： Redis 高可用--Sentinel
下一篇： php关联数组与索引数组及其显示方法