利用 XMLHttpRequest 在 JS 和 Servlet 间通信

在我的理解中，Ajax 就是在不刷新整个页面的情况下，将从服务器端的数据（从数据库，从xml文件，或者是自己Hard

Code在程序中的字符串等）拿到前端，在html页面上展现出来的一种技术。

那么在整个通讯过程中，会涉及到几点：

 

1.  JS

 

在js中如何去写代码并提交一个请求呢？一般来说，html页面如果有需要提交的数据都会定义一个form，然后

submit这个form, form所对应的action 就是需要采取action的某个页面可以是jsp,可以是asp,当然也可以是servlet. 但

是form并不是唯一的方法。

 

XMLHttpReqeust 对象是用来在后台与服务器交换数据的，所有的现代浏览器(IE7+、Firefox、Chrome、Safari

以及 Opera)都内建了这个对象。

 

 

var xmlHttpRequest = new XMLHttpRequest();

 

在 JS 中，可以用以下代码来发送一个请求（Post 或者 Get ）

 

function sendAjaxRequest(url,callback){
	url = "index.do";
	xmlHttpRequest.onreadystatechange = callback;  
  	xmlHttpRequest.open("POST", url, true);  
  	xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
        xmlHttpRequest.send("param=test");
}

 

或者 

 

function sendAjaxRequest(url,callback){
	url = "index.do";
	xmlHttpRequest.onreadystatechange = callback;  
  	xmlHttpRequest.open("GET", url + "?param=test", true);  
  	xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
        xmlHttpRequest.send(null);
}

 

url = "index.do" 在这里，是后台处理请求的一个servlet。

 

open 在这里只是初始化一些参数，比如Method（POST or GET），比如上面提到的url, 最后一个参数是async 参数, 表明是否要异步执行，设为true或者省略都是默认异步处理，这种情况下，通常要指定onreadystatechange的回调函数。

 

send 就是发送一个http请求了，如果是post，那么必须将想要传送的参数或者其它内容放在这里，而如果是Get请

求的话，这里一般就是忽略了的，可以直接设置为null。

 

而 callback就是一个回调函数，当XMLHttpRequest对象的state变化的时候，都会调用这个函数，并根据其实现

的逻辑去处理。

 

回调函数

function callback() {
	if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
		var rt = xmlHttpRequest.responseText;
		// do something with rt
	}
}

 

至于XMLHttpRequest.readyState 和 status 有多少种，可自行google,一般来说，只有当readyState == 4

并且status == 200 的时候才说明整个请求都处理好了，可以去处理返回来的数据（xmlHttpRequest.responseText）。

 

2.  Servlet 

 

我比较笨，所以一直想知道整个过程是怎么处理的，比如xmlHttpRequest.responseText是在哪里写进去的，我

知道是在Servlet写的，但是我又想知道是怎么写进去的，写进去之后又是怎么传回到前台的。

 

       当js发送了一个请求到一个servlet，如index.do（其实这些.do都是自己定义的，在每个web容器都可以自己定义并

进行拦截和解析），那么index.do所对应的servlet就会被触发，每一个请求都会被包装成含有HttpServletRequest 和

HttpServletResponse的对象，那么Request中就包含了你的参数，如上面在js所传的param参数了，而response则

可以写入你打算传回到前端的数据了

 

获取Param参数

 

String param = URLDecoder.decode(request.getParameter("param"),"UTF-8"); 

 

在中间可以做很多你想做的事情，然后再想想什么是你想传回前台的。

 

   设置response的返回值，就是上面xmlHttpRequest中的responseText

 

 

response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("UTF-8");	
String responseText = “返回的值”;
response.getWriter().write(responseText);

 

 

其实整个过程大概就是这样，至于在前端跟后台服务器传送的responseText就可以是多种形式了，可以是纯文本，可以是xml,可以是JSON格式的，各种各样，就看自己想怎么用了