学步园

      关于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、比如用户添加产品成功后，过几秒种后（过几秒钟是为了让用户能够看见成功添加产品的提示）即跳转页面（清空表单数据，以避免用户不停点击添加而造成大量记录）等等，所以在真正使用该函数时还需要对该函数进行适当地扩展，以适合不同的逻辑处理，这也是本文讲的功能块中唯一需要变动的地方。