XuGang

记录一个程序员的成长

 

AJAX 学习笔记[六] AJAX 轻量级框架介绍

 

一些开发人员将操作AJAX 的固定步骤封装成了一些框架，为后人提供了便利。

下面将要介绍两个AJAX 框架：AjaxLib  和 AjaxGold ；

 

AjaxLib  的介绍

它是一个小巧的Ajax 框架，在http://karaszewski.com/tools/ajaxlib 上下载其.js 文件即可。

客户端代码（9-7.html ）：

<html>
<head>
<title>ajaxlib</title>
<!-- 引用 ajaxlib.js 库 -->
<script language="javascript" src="ajaxlib.js"></script>
<script language="javascript">
function myTest(){
    /*
    loadXMLDoc(url, callback, boolean)是ajaxlib.js 库中的一个方法
       url:      异步请求地址；
       callback: 请求成功后的回调函数；
       boolean:  表示是否去掉XML 文档中的空格；(true 为去掉空格)
    */
    loadXMLDoc('9-7.aspx',decodeXML,false);
}
 
function decodeXML(){
    var oTemp = resultXML.getElementsByTagName("temp");
    document.getElementById("targetID").innerHTML = oTemp[0].firstChild.nodeValue;
}
</script>
</head>
 
<body>
<h3>Testing ajaxlib</h3>
<form>
    <input type="button" value="display" onclick="myTest();">
</form>
<div id="targetID">the fetched data will go here</div>
</body>
</html>

 

服务器端代码（9-7.aspx ）：

<%@ Page Language="C#" ContentType="text/xml" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    Response.ContentType = "text/xml";
    Response.CacheControl = "no-cache";
    Response.AddHeader("Pragma","no-cache");
   
    string xml = "<temp>test</temp>";
    Response.Write(xml);
%>

 

AjaxGold  的介绍

AjaxGold 是另外一款非常实用而精简的Ajax 框架。

 

AjaxGold 提供了4 个函数供开发者调用：

●  getDataReturnText( url, callback );

●  getDataReturnXML( url, callback );

●  postDataReturnText( url, data, callback );

●  postDataReturnXML( url, data, callback );

 

下面以postDataReturnText( url, data, callback ) 方法为例，介绍AjaxGold 框架的使用。

客户端代码（9-8.html ）：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<!-- 引用 ajaxgold.js 框架 -->
<script language="javascript" src="ajaxgold.js"></script>
<script language="javascript">
 
function myTest(){
    //postDataReturnText 为 ajaxgold.js框架的函数
    postDataReturnText('9-8.aspx','a=2&b=3',display);
}
 
function display(text){
    document.getElementById("targetID").innerHTML = text;
}
</script>
</head>
<body>
<form>
    <input type="button" value="get the message" onclick="myTest();">
</form>
<div id="targetID">The fetch data will go here</div>
</body>
</html>

 

服务器端代码（9-8.aspx ）：

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<%@ Import Namespace="System.IO" %>
<%
    Response.ContentType = "text/xml";
    Response.CacheControl = "no-cache";
    Response.AddHeader("Pragma","no-cache");
   
    int a = int.Parse(Request["a"]);
    int b = int.Parse(Request["b"]);
    Response.Write(a+b);
%>

 

AjaxLib 和 AjaxGold 框架文件下载

 

posted on 2010-08-07 15:45  钢钢  阅读(1493)  评论(0)  编辑  收藏  举报

导航