关于Ajax异步响应处理的应用已经非常广泛了,而为了提高开发涉及Ajax技术程序的效率,当然就很有必要对使用Ajax的通用流程和常用逻辑进行一下代码方面的总结:
函数一:创建XMLHTTP对象
function createXMLHttpRequest()
{
/* 兼容性判断 */
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType)
{
xmlHttp.overrideMimeType("text/xml");
}
}
}
函数二:发送请求
* method 请求方式:POST、GET、HEAD等
* action 请求目标页面
* isA 是否异步
* pageType 页头类型
* resultType 结果处理类型
* formId form控件ID名
* objId 显示回发内容的控件ID名
function startRquest(method, action, isA, pageType, resultType, formId, objId)
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = function()
{
handleStateChange(resultType, objId);
}
xmlHttp.open(method, action, isA);
/* 判断页头类型 */
switch(pageType)
{
case "html":
xmlHttp.setRequestHeader("Content-Type", "text/html; charset=utf-8");
break;
case "xml":
xmlHttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
break;
case "form":
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
break;
default:
xmlHttp.setRequestHeader("Content-Type", "text/html; charset=utf-8");
break;
}
/* 开始发送 */
if (method == "GET")
{
xmlHttp.send(null);
}
else if (method == "POST")
{
var data = getData(formId) + "timeStamp=" + new Date().getTime();
xmlHttp.send(data);
}
}
函数三:根据请求状态值和HTTP状态值进行不同的处理
function handleStateChange(resultType, objId)
{
if (xmlHttp.readyState == 4) // 已收到响应
{
if (xmlHttp.status == 200) // 请求成功
{
recieveRequest(resultType, objId);
}
else if (xmlHttp.status == 404)
{
document.getElementById(objId).innerHTML = noteAjaxNotFound; // 没有找到目标页面
}
}
else
{
document.getElementById(objId).innerHTML = noteAjaxLoading; // 正在装载中
}
}
函数四:接收返回信息(根据不同的结果类型进行不同的处理)
function recieveRequest(resultType, objId)
{
if (resultType == 1) // 只获取发送内容
{
document.getElementById(objId).innerHTML = xmlHttp.responseText;
}
else if (resultType == 2)
{
// 其它不同的处理
}
}
函数五:获取发送数据
function getData(formId)
{
var data; // 要返回的数据结果
var curElement; // 当前元素
var type; // 元素类型
var name; // 元素名
var form = document.getElementById(formId); // form元素
var countOfElement = form.length; // form元素包含的元素总数
for (var i = 0; i < countOfElement; i++)
{
curElement = form.elements[i];
type = curElement.type;
name = curElement.name;
switch (type) // 如果类型为checkbox则应将得到的选中值放入hidden类型控件
{
case "text":
data += name + "=" + encodeURIComponent(curElement.value) + "&";
break;
case "password":
data += name + "=" + curElement.value + "&";
break;
case "hidden":
data += name + "=" + curElement.value + "&";
break;
case "select":
if (curElement.selectedIndex != -1)
data += name + "=" + curElement.options[curElement.selectedIndex].value + "&";
break;
case "radio":
if (curElement.checked)
data += name + "=" + curElement.value + "&";
break;
}
}
return data;
}
这里重点说明一下函数四,也就是接收返回信息:这个函数根据不同的resultType来作出不同的处理,举例来说,如果向请求目标页面发送请求后,只是显示回发的文本内容,则resultType=1可以胜任,这是情况1(不涉及请求后可能会跳转),其它情况可能有:1、在验证成功后涉及到跳转,比如说用户登陆;2、比如用户添加产品成功后,过几秒种后(过几秒钟是为了让用户能够看见成功添加产品的提示)即跳转页面(清空表单数据,以避免用户不停点击添加而造成大量记录)等等,所以在真正使用该函数时还需要对该函数进行适当地扩展,以适合不同的逻辑处理,这也是本文讲的功能块中唯一需要变动的地方。