当前位置: 代码迷 >> JavaScript >> 利用 XMLHttpRequest 在 JS 跟 Servlet 间通信
  详细解决方案

利用 XMLHttpRequest 在 JS 跟 Servlet 间通信

热度:883   发布时间:2012-11-22 00:16:41.0
利用 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格式的,各种各样,就看自己想怎么用了

?

?

  相关解决方案