用Eclipse与AJAX技术在JSP中实现动态加载列表框

用Eclipse与AJAX技术在JSP中实现动态加载列表框

文/曹坤

?

首先介绍一下什么是Eclipse与AJAX，Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

AJAX技术即异步 JavaScript 和 XML(Asynchronous JavaScript with XML)，支持动态、异步的 Web 体验，却不需要页面刷新，是目前热炒的WEB2.0技术的核心。

一、??????????? 创建一个JSP页面，代码如下：

MyHtml.html

?

/*这里的onChange事件的函数getResult()需要在以下篇幅进行实现，该事件的含义是当列表框选择的内容被改变后即被触发*/

?

浙江省>

江苏省>

CITY

?

二、??????????? 在以上的JSP页面中添加以下javascript代码,需要在以上JSP页面的红色部分内进行添加：

1、创建AJAX对象，即XMLHttpRequest,添加以下JavaScript代码：

var xmlHttpRequest = false ;

function createXMLHttpRequest() {

if (window.XMLHttpRequest) {

xmlHttpRequest = new XMLHttpRequest();

}

else if (window.ActiveXObject) {

try {

xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");

}

catch(e) {

try {

xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e) {

xmlHttpRequest = false;

}

}

}

}

以上的代码能在不同类型的浏览器上创建XMLHttpRequest对象，用于实现异步 JavaScript。

2、增加getResult()函数，用于响应列表框的onchange事件：

?

function getResult(stateVal) {

/*通过java的servlet技术，取得列表框中需要动态更新的数据*/

var url = "servlet/SelectCityServlet?state="+stateVal;

?

/*创建xmlHttpRequest对象*/

createXMLHttpRequest()

if(xmlHttpRequest){

?

/* 在xmlHttpRequest对象的open方法中，第一个参数表示向服务器传递信息的方式，主要有两种，即“GET”和“POST”，第二个参数表示所调用资源的URL，第三个参数表示调用服务器资源是异步的还是同步的，默认为true即异步，如设置为false即同步,则失去了AJAX的意义 */

xmlHttpRequest.open("GET",url, true);

?

/*以下代码，xmlHttpRequest每一次状态改变都会触发该事件，它通常是一个javascript事件*/

xmlHttpRequest.onreadystatechange = complete;

?

/*以下代码，具体向服务器发送请求*/

xmlHttpRequest.send(null);

}

}