Ajax操作的核心对象：xmlreq = new XMLHttpRequest();
第一步：在dictionaryIndex.jsp中添加：
<script type="text/javascript" src="${pageContext.request.contextPath }/script/pub.js"></script>
第二步：调用js的代码：实现：
Pub.submitActionWithForm:
* 参数一：表单Form2的名称
* 参数二：表示URL连接
* 参数三：表单Form1的名称
ajax的封装：
：在dictionaryIndex.jsp中存在2个表单Form1和Form2
：使用ajax传递表单Form1中的元素作为参数，在服务器端进行处理，将处理后的结果放置dictionaryEdit.jsp中
：将dictionaryEdit.jsp中的全部内容放置dictionaryIndex.jsp页面的Form2中
效果：异步效果，一个页面表单Form1中的内容不发生变化，Form2中的内容发生变化
Pub.submitActionWithForm('Form2','${pageContext.request.contextPath }/system/elecSystemDDLAction_edit.do','Form1');
第三步：在pub.js中定义：
步骤一：（Pub.submitActionWithForm）
/***
* domId：表单Form2的名称
* action：表示URL连接
* sForm：表单Form1的名称
*/
Pub.submitActionWithForm=function(domId,action,sForm){
/**第一步：创建Ajax引擎对象*/
var req = Pub.newXMLHttpRequest();
/**第二步：req.onreadystatechange表示事件处理函数（相当于一个监听），用来监听客户端与服务器端的连接状态*/
var handlerFunction = Pub.getReadyStateHandler(req, domId,Pub.handleResponse);
req.onreadystatechange = handlerFunction;
/**第三步：打开一个连接，要求：如果是POST请求，需要设置一个头部信息，否则此时不能使用req.send()方法向服务器发送数据*/
req.open("POST", action, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
/**第四步：向服务器发送数据，格式：name=张三&age=28*/
var str = Pub.getParams2Str(sForm);
//传递表单Form1中的元素作为参数给服务器
req.send(str);
}
步骤二：创建ajax引擎（Pub.newXMLHttpRequest）
/**
* 创建ajax引擎
*/
Pub.newXMLHttpRequest=function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) { try { xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) { try { xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) { alert(e2);
}
}
}
return xmlreq;
}
步骤三：传递表单Form1中的元素作为参数（Pub.getParams2Str）
/**
*
* @param sForm：传递表单Form1的名称
* @returns {String}：使用ajax返回服务器端的参数，传递的就是表单Form1中元素的参数
*/
Pub.getParams2Str=function getParams2Str(sForm){ var strDiv=""; try {
var objForm=document.forms[sForm];
if (!objForm)
return strDiv;
var elt,sName,sValue;
for (var fld = ; fld < objForm.elements.length; fld++) {
elt = objForm.elements[fld];
sName=elt.name;
sValue=""+elt.value;
if(fld==objForm.elements.length-)
strDiv=strDiv + sName+"="+sValue+"";
else
strDiv=strDiv + sName+"="+sValue+"&";
}
}
catch (ex) {
return strDiv;
} return strDiv;
}
步骤四：接收服务器端返回的结果（Pub.getReadyStateHandler）
/**
*
* @param req:引擎对象
* @param eleid：表单Form2的名称
* @param responseXmlHandler：Pub.handleResponse（函数体）
* @returns {Function}
*/
Pub.getReadyStateHandler =function getReadyStateHandler(req, eleid,responseXmlHandler) { return function () {
/**
* req.readyState:用来监听客户端与服务器端的连接状态
* 0：表示此时客户端没有调用open()方法
* 1：表示客户端执行open方法，但是send方法没有执行
* 2：open方法执行，send方法也执行
* 3：服务器开始处理数据，并返回数据
* 4：返回数据成功，只有4这个状态，才能获取服务器端返回的结果
*/
if (req.readyState == ) {
/**
* req.status：表示java的状态码
* 404：路径错误
* 500：服务器异常
* 200：表示没有异常，正常访问数据，只有200这个状态的时候，才能获取服务器端返回的结果
*/
if (req.status == ) {
/**
* req.responseText:获取服务器端返回的结果，返回的是文本的结果（包括：字符串，json数据）
* req.responseXML:获取服务器端返回的结果，返回的是XML数据的结果
*/
responseXmlHandler(req.responseText,eleid); } else {
alert("HTTP error: "+req.status);
return false;
}
}
}
步骤五：将返回的结果dictionaryEdit.jsp，并放置到dictionaryIndex.jsp的Form2中（Pub.handleResponse）
/**
* @param data：服务器返回的结果
* @param eleid：表单Form2的名称
*/
Pub.handleResponse= function handleResponse(data,eleid){
//获取表单Form2的对象
var ele =document.getElementById(eleid);
//将返回的结果放置到表单Form2的元素中
ele.innerHTML = data; }
对应的页面dictionaryEdit.jsp
查询方法写完，但是页面上还是没有显示出来 。