一个比较简单的Ajax框架

原创 2006年06月14日 15:05:00

对于做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="#" onclick="javascript:test('http://127.0.0.1/test.html', function (req) { replaceDivContents(req, 'collectElementId'); });"> 这里测试 </a></div></td>
  </tr>
</table>
</body>
</html>

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

测试成功

看看有什么反映。

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

《C程序设计语言》练习 4-3

练习 4-3 在有了基本框架后,对计算器程序进行扩充就比较简单了。在该程序中加入 取模(%)运算符,并注意考虑负数的情况。然而书上那个代码并不能用, 可能是因为我是windows系统的原因 ...
  • qq_33685612
  • qq_33685612
  • 2018年01月04日 09:52
  • 18

常用的JS(Ajax)框架

http://blog.csdn.net/lyonte/article/details/5875444 Ajax的全称是:AsynchronousJavaScript+XML  Ajax的...
  • oMingZi12345678
  • oMingZi12345678
  • 2016年11月13日 00:57
  • 1982

SpringMVC后台程序接收ajax异步提交数据的实例

在web开发过程中,有时需要在同一个页面进行较为频繁的操作,对于一些频率较高而涉及到的数据量较小的操作,如果总是进行与服务器的交互,这就会给服务器增加额外的负担,所以异步操作是个不错的选择。下面通过一...
  • Klbetter
  • Klbetter
  • 2016年08月01日 17:47
  • 3489

11.在play框架里使用Ajax

整套Play资料,从概念到具体事务,由浅入深的系统学习play。 经过本人整理和调整,希望能帮组到想要学习Play的小伙伴。持续更新中.........
  • chris_sen
  • chris_sen
  • 2017年04月21日 15:43
  • 389

Ajax之在SSM中的json用法

问题?Ajax之在SSM中的json用法 1.问题   这个问题是在总项目的时候遇到的问题,在SSM框架中使用json数据,和在S2SH中使用json大不相同,不能作为同一种来用,在S2SH中如何...
  • Mr_li13
  • Mr_li13
  • 2016年06月11日 15:18
  • 15876

【SSH三大框架】Struts2基础第八篇:Struts2用AJAX实现JSON插件的使用

AJAX的详细描述就不做介绍了,大家基本都懂这个。 下面我们会通过两个具体的案例,来做具体的实现: 案例一: 案例描述:输入用户名,把用户名通过AJAX异步传输的方式发送至后台,判断此用户名是否存在。...
  • u010800530
  • u010800530
  • 2014年08月30日 14:12
  • 2203

Web框架和前端框架以及Ajax的常用框架易混淆(混为一谈)

Web框架和前端框架以及Ajax的常用框架易混淆(混为一谈)       首先,要清楚web框架和前端框架的以及Ajax的常用框架区别!之前我认为人家说的框架就是一个项目的框架模式,是否是嵌套宽假...
  • xiyiyindie
  • xiyiyindie
  • 2017年01月04日 10:18
  • 3355

Ajax之搭建一个基本的Ajax框架(技术分析篇)

搭建一个基本的Ajax框架
  • h15882065951
  • h15882065951
  • 2017年06月17日 14:25
  • 309

前端验证的Ajax框架——myAjax.js

Ajax框架
  • AlvinNoending
  • AlvinNoending
  • 2015年01月04日 11:36
  • 1577

ci框架ajax分页

1.ci的分页类
  • hjt321658
  • hjt321658
  • 2014年11月01日 11:22
  • 882
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个比较简单的Ajax框架
举报原因:
原因补充:

(最多只允许输入30个字)