一个比较简单的Ajax框架

对于做web2.0应用的开发,ajax是必不可少的，现在我们看到的ajax的框价有很多,应用比较广泛又比较有特色主要有目前两个：

1.prototype.js ， 2.dwr

prototype.js是由Sam Stephenson写的一个javascript类.

dwr 则提供了更为强大的功能, 详细请看介绍.最大的特色是可以通过dwr的framework,通过配置文件把 java 类的方法直接暴露出来.

今天要介绍的是一个相对简单的 ajax应用可以满足大多数的应用. 整个 ajax.js 代码如下面, 这个是著名的 www.youtube.com 网站简单的ajax应用时所使用的框架. 

// 取得 xmlhttprequest 对象 可以适应大多数浏览器(IE, Firefox)
function getXmlHttpRequest()
{
 var httpRequest = null;
 try
 {
  httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
  try
  {
   httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch (e)
  {
   httpRequest = null;
  }
 }
 
 if (!httpRequest && typeof XMLHttpRequest != "undefined")
 {
  httpRequest = new XMLHttpRequest();
 }
 
 return httpRequest;
}

// get 方式请求一url
function getUrlSync(url)
{ 
 return getUrl(url, false, null);
}

// get 方式请求一url handleStateChange 状态改变发生事件 handle
function getUrlAsync(url, handleStateChange)
{ 
 return getUrl(url, true, handleStateChange);
}

// get 方式请求 async 是否异步 handleStateChange 状态改变发生事件handle
function getUrl(url, async, handleStateChange) {
 var xmlHttpReq = getXmlHttpRequest();

 if (!xmlHttpReq)
  return;
 
 if (handleStateChange)
 { 
  xmlHttpReq.onreadystatechange = function()
   {
    handleStateChange(xmlHttpReq);
   };
 }
 else
 {
  xmlHttpReq.onreadystatechange = function() {;}
 }

 xmlHttpReq.open("GET", url, async);
 xmlHttpReq.send(null);
}

// post 方式请求 data 其他需要post的数据 async 是否异步 stateChangeCallback 状态改变时做的事情
function postUrl(url, data, async, stateChangeCallback)
{
 var xmlHttpReq = getXmlHttpRequest();

 if (!xmlHttpReq)
  return;

 xmlHttpReq.open("POST", url, async);
 xmlHttpReq.onreadystatechange = function()
  {
   stateChangeCallback(xmlHttpReq);
  };
 xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 xmlHttpReq.send(data);
 //alert ('url: ' + url + '/ndata: ' + data);
}

// url encode 编码后汉字可通过url传播
function urlEncodeDict(dict)
{
 var result = "";
 for (var i=0; i<dict.length; i++) {
  result += "&" + encodeURIComponent(dict[i].name) + "=" + encodeURIComponent(dict[i].value);
 }
 return result;
}

// 只在请求完成返回完结果后执行 stateChangeCallback 请求完执行的函数
function execOnSuccess(stateChangeCallback)
{
 return function(xmlHttpReq)
  {
   if (xmlHttpReq.readyState == 4 &&
     xmlHttpReq.status == 200)
    stateChangeCallback(xmlHttpReq);
   //alert(xmlHttpReq + " " + xmlHttpReq.readyState + " " + xmlHttpReq.status);
  };
}

// post 一个Form async 是否异步 successCallback 请求完成后做的函数
function postFormByForm(form, async, successCallback) {
 var formVars = new Array();
 for (var i = 0; i < form.elements.length; i++)
 {
  var formElement = form.elements[i];
  
  // Special handling for checkboxes (we need an array of selected checkboxes..)!
  if(formElement.type=='checkbox' && !formElement.checked) {
   continue;
  }
  var v=new Object;
  v.name=formElement.name;
  v.value=formElement.value;
  formVars.push(v);  
 }
 postUrl(form.action, urlEncodeDict(formVars), async, execOnSuccess(successCallback));
}

// post a form by form name
function postForm(formName, async, successCallback)
{
 var form = document.forms[formName];
 return postFormByForm(form, async, successCallback);
}

// 用请求的结果内容 替换dstDivId的内容
function replaceDivContents(xmlHttpRequest, dstDivId)
{
 var dstDiv = document.getElementById(dstDivId);
 dstDiv.innerHTML = xmlHttpRequest.responseText; 
}

// 请求一个xml格式的文档, 注意返回的信息必须是xml response 的header里 type也必须是xml
function getUrlXMLResponseCallback(xmlHttpReq) {
 if(xmlHttpReq.responseXML == null) {
  alert("Error while processing your request.");
  return;
 }
 var root_node = getRootNode(xmlHttpReq);
 var return_code = getNodeValue(root_node, 'return_code');
 //alert("return code " + return_code);

 if(return_code == 0) {
  redirect_val = getNodeValue(root_node, 'redirect_on_success');
  if(redirect_val != null) {
   window.location=redirect_val;
  } else {
   success_message = getNodeValue(root_node, 'success_message');
   if (success_message != null) {
    alert(success_message);
   }
   if(this.successCallback != null) {
    this.successCallback(xmlHttpReq);
   }
  }
 } else {
  var error_msg = getNodeValue(root_node, 'error_message');
  if (error_msg == null || error_msg.length == 0) {
   if(return_code==2) {
    error_msg = "You must be logged in to perform this operation.";
   } else {
    error_msg = "An error occured while performing this operation.";
   }
  }
  alert(error_msg)
 }
}
// get xml documnet node value
function getNodeValue(obj,tag)
{
 node=obj.getElementsByTagName(tag);
 if(node!=null && node.length>0) {
  return node[0].firstChild.nodeValue;
 } else {
  return null;
 }
}
// get xml documnet root node
function getRootNode(xmlHttpReq) {
 return xmlHttpReq.responseXML.getElementsByTagName('root')[0];
}

// get url return xml response
function getUrlXMLResponse(url, successCallback) {
 this.successCallback = successCallback;
 this.urlResponseCallback = getUrlXMLResponseCallback;
 getUrl(url, true, execOnSuccess(this.urlResponseCallback))
}
// post url return xml
function postUrlXMLResponse(url, data, successCallback) {
 this.successCallback = successCallback;
 this.urlResponseCallback = getUrlXMLResponseCallback;
 postUrl(url, data, true, execOnSuccess(this.urlResponseCallback))
}
// post form by name return xml
function postFormXMLResponse(formName, successCallback) {
 this.successCallback = successCallback;
 postForm(formName, true, execOnSuccess(getUrlXMLResponseCallback))
}

以上是其完整的ajax框架代码，代码非常简短明了，感觉是开始学习ajax的一个不错的代码。

举例简单说明:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="AJAX.js"></script>

<script language="javascript" type="text/javascript">
  function test(url, successCallback)
  {
   //alert(url);
   getUrlAsync(url, execOnSuccess(successCallback));
  }
 </script>
<body>
 <table>
  <tr>
    <td><div id=collectElementId><a href="#" οnclick="javascript:test('http://127.0.0.1/test.html', function (req) { replaceDivContents(req, 'collectElementId'); });"> 这里测试 </a></div></td>
  </tr>
</table>
</body>
</html>

文件 test.html 非常简单就一行文字 ：

测试成功

看看有什么反映。

这里测试 是不是变成了 测试成功。