BlogJava-☆蓝色梦想☆-随笔分类-AJAX

自动提示效果

☆蓝色梦想☆ — Wed, 16 Aug 2006 15:25:00 GMT

自动提示效果

☆蓝色梦想☆ 2006-08-16 23:25 发表评论

js写的Hashtable类

☆蓝色梦想☆ — Wed, 16 Aug 2006 15:22:00 GMT

< script language = " javascript " type = " text/javascript " >

function Hashtable()
{
     this ._hash         = new Object();
     this .add         = function (key,value){
                         if ( typeof (key) != " undefined " ){
                             if ( this .contains(key) == false ){
                                 this ._hash[key] = typeof (value) == " undefined " ? null :value;
                                 return true ;
                            } else {
                                 return false ;
                            }
                        } else {
                             return false ;
                        }
                    }
     this .remove         = function (key){ delete this ._hash[key];}
     this .count         = function (){ var i = 0 ; for ( var k in this ._hash){i ++ ;} return i;}
     this .items         = function (key){ return this ._hash[key];}
     this .contains     = function (key){ return typeof ( this ._hash[key]) != " undefined " ;}
     this .clear         = function (){ for ( var k in this ._hash){ delete this ._hash[k];}}

}

var a = new Hashtable();

a.add( " aa " );
a.add( " bb " , 2342 );
a.add( " bb " , 2342 );

a.remove( " aa " );

alert(a.count());

alert(a.contains( " bb " ));

alert(a.contains( " aa " ));

alert(a.items( " bb " ));

script >

☆蓝色梦想☆ 2006-08-16 23:22 发表评论

如何使用ajax开发web应用程序（3）

☆蓝色梦想☆ — Thu, 22 Dec 2005 07:59:00 GMT

在这个关于AJAX系列的第三部分中，我们将学习如何使用AJAX与服务端进行写作以及这些技术如何产生强大的web应用程序。如果你对学习如何构建类似GMail或者Google Maps的web程序感兴趣的话，这是一篇基础的入门（虽然那两个东东会比我们在这篇文章中提及的内容复杂的多）。在这篇文章中，我使用PHP作为服务端语言，但AJAX能够和任何服务端语言进行很好的兼容，所以你尽可以选择你所钟爱的任何语言！

　　我们还是从我们上一篇文章的代码（喏，就在上面）开始我们的学习，你可以去阅读它来作为参考。

　　这里就是这个HTML页面（带js）：
"http://www.w3.org/TR/html4/strict.dtd">

如何使用ajax开发web应用程序--示例

使用Ajax开发web应用程序

这个页面演示了AJAX技术如何通过动态读取一个远程文件来更新一个网页的内容－－不需要任何网页的重新加载。注意：这个例子对于禁止js的用户来说没有效果。

这个页面将演示如从取回并处理成组的XML数据。被取回的数据将会以表格形式输出到底下。
查看演示.

(sheneyan注：示例见http://sheneyan.com/html/article/ajax/example_3.html)
　　注意：这里唯一的变化就是我们将我们的ajaxRead()中的“data_2.xml”改成了“data_3.php”。这是因为我们将使用php来输出XML（如果你在你的浏览器里打开这个PHP文件，它会以一个XML文件的形式展现出来－－我们只是要在这个文件中进行操作而不只是一个简单的XML）。这个PHP文件的输出类似：

<猫 tasks="喂食, 饮水, 抓跳蚤" />
<狗 tasks="喂食, 饮水, 带出去遛遛" />
<鱼 tasks="喂食, 检查氧气，水的纯度，其它" />

(Sheneyan注：示例就不提供了，参考底下说明即可。)

　　这只是输出结果，我们准备从一个mysql数据库中获取这些信息。从现在起，我们可以直接在我们的数据库中修改数据而不是手动修改XML文件。用AJAX通过PHP来取得数据，并将它获取到一个页面上－－所有这些，仍然不需要重新加载网页。

　　第一步是连接到mysql去获取数据。这篇文章的重点在javascript，所以我不会解释下面的代码如何工作，你需要自己去了解如何连接mysql数据库。
$user = "admin";
$pass = "adminpass";
$host = "localhost";
$conn = mysql_connect($host, $user, $pass) or die("Unable to connect to MySQL.");
$db = mysql_select_db("pets",$conn) or die("Could not select the database.");
mysql_close($db);
?>

　　只要你连接了数据库，你可以通过底下的查询来获取信息：
$user = "admin";
$pass = "adminpass";
$host = "localhost";
$conn = mysql_connect($host, $user, $pass) or die("Unable to connect to MySQL.");
$db = mysql_select_db("pets",$conn) or die("Could not select the database.");
$result = mysql_query("SELECT * FROM `pets`");
if(mysql_num_rows ($result) == 0){
die ('Error: no data found in the database.');
}
while ($row = mysql_fetch_assoc($result)){
echo 'Pet: '.$row['pet'].', tasks: '.$row['tasks'].'. ';
}

mysql_close($db);
?>

　　这段代码给了你需要的信息，但它输出并不正确。我们需要修改这PHP代码来分隔数据为XML，而不是纯文本。为了实现这个目标我们得作几个修改。

header('Content-Type: text/xml');//编号1
echo '';//编号2
echo "\n\n\n";//编号3
$user = "admin";
$pass = "adminpass";
$host = "localhost";
$conn = mysql_connect($host, $user, $pass) or die("无法连接mysql.");
$db = mysql_select_db("pets",$conn) or die("无法选择数据库.");
$result = mysql_query("SELECT * FROM `pets`");
if(mysql_num_rows ($result) == 0){
die ('Error: 数据库没有数据.');
}
while ($row = mysql_fetch_assoc($result)){
echo '<'.$row['pet'].' tasks="'.$row['tasks'].'" />'."\n";//编号4
}
echo "\n";//编号5
mysql_close($db);
?>

　　让我们从上面开始，一次一行的来分析它是如何输出XML的.我给每一行都加了注释标记以便于更好的对应理解(原文是I've color-coded each line to make it easier to understand,我懒得上色,就改成用编号了)

　　编号1:这部分代码发送一个http头来让用户客户端明白这个php文件输出的是一个XML。这就是为什么你在你的浏览器里看这个文档的时候它以一个XML文件的形式展现，即使你的文件有一个“.php”后缀。

　　编号2:这部分的代码输出了XML声明。这是我之前展示给你看的XML的第一行。

　　编号3:这部分的代码输出的最开始的两个标签：我们的根标签，和我们用来放置所有宠物的标签。

　　编号4:这部分的代码最困难的。这里包含了一个循环用来遍历你数据库里所有的数据。每次循环，它会输出一个新的节点，这个节点用每一种动物作为标签名以及一个"任务"属性。例如，如果你数据库中的第一只宠物是“猫”而且它相应的任务字段是“喂食, 饮水, 抓跳蚤”，那php将输出在XML文档中输出 <猫 tasks="喂食, 饮水, 抓跳蚤" /> 。这个“\n” 部分只是在结尾插入一个新行，保证这个XML代码不至于都在同一行。

　　编号5:这部分的代码结束了我们开始时打开的和节点。因为XML必须是格式良好的（well-formed），所以我们必须认真对待这部分以确认我们的程序能够正确运行。

　　现在我们已经让PHP输出XML了，我们现在所要作的就是登录我们的mysql数据库，并进行我们所需要的修改，来更新这个XML。很酷，不是吗？我们仍然能够使用上一篇文章中的js脚本来获取代码，因为XML输出和之前的完全一样。

结论

　　你可以再进一步的扩展，使用XML来保存和获取数据。换句话说，你能够使用php来写你的XML文件，然后让javascript来读。用ajax，你也能够定时的检查xml文件是否已经更改而且，如果XML已经更新，也可以更新本页面。

☆蓝色梦想☆ 2005-12-22 15:59 发表评论

如何使用ajax开发web应用程序（1）

☆蓝色梦想☆ — Thu, 22 Dec 2005 07:58:00 GMT

在过去，由于为了获得新数据而不得不重新加载web页面（或者加载其他页面）导致web应用程序发展被限制。虽然有其他方法可用（不加载其他页面），但是这些技术都没有被很好地支持而且有bug成灾的趋向。在过去的几个月里，一个过去并不被广泛支持的技术已经被越来越多的web冲浪者（web surfers??是指浏览器还是浏览者？）所接受，它给了开发者更多的自由开发先进的web应用程序。这些通过javascript来异步取得xml数据的应用程序，被亲切的称为“Ajax应用程序”（Asynchronous Javascript and XML applications）。在这篇文章中，我将会解释如何通过Ajax来取回一个远程的XML文件并更新一个web page，并且随着这个系列的继续，我将讨论更多的方法，使用ajax技术将你的web应用程序提升到一个新的层次。

　　这第一步就是创建一个带一些数据的XML文件。我们将这个文件命名为data.xml。它是一个简单的XML文件，而在一个真实的程序中，它会复杂许多，但对于我们的例子来说，简单明了是最合适地。

这是一些示例数据，它被保存在一个XML文件中，并被JavaScript取回。

　　现在让我们创建一个简单的web页面包含一些示例数据。这个页面将是我们的js脚本所在，并且这个页面将会让用户们访问柄看到Ajax脚本的运行。我们把它命名为ajax.html

"http://www.w3.org/TR/html4/strict.dtd">

使用ajax开发web应用程序 - 示例

使用ajax开发web应用程序

这是一些示例数据，它是这个网页的默认数据 title="查看这个XML数据." onclick="ajaxRead('data.xml'); this.style.display='none'; return false">查看XML数据.

注意，对于那些没有javascript的用户，我们直接链接到data.xml文件。对于那些允许运行javascript的用户，函数“ajaxRead”将被运行，这个链接被隐藏，并不会被转向到那个data.xml文件。函数“ajaxRead”现在还没定义。所以如果你要检验上面的示例代码，你会得到一个javascript错误。让我们继续并定义这个函数（还有其他的），让你能够看到ajax是如何工作的，下面的脚本要放到你的head标签里：

（Sheneyan注：完整代码示例见http://sheneyan.com/html/article/ajax/example.html，XML文件见：http://sheneyan.com/html/article/ajax/data.xml）

　　这堆代码有点多，让我们一点点的进行。第一个函数叫做“ajaxRead”－也就是我们在页面的“查看XML数据”链接中调用的函数，我们定义了一个“xmlObj”变量－这将作为客户端（用户正在查看的这个web页面）以及服务端（web站点本身）之间的中间件。我们在一个if/else块中定义这个对象：
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}

　　这只是一个对不同对象是否可用的测试－某些浏览器实现了不同的XMLHttpRequest对象，所以当我们定义“xmlObj”作为我们的XMLHttpRequest对象时，我们不得不根据浏览器所实现的来定义它。如果没有可用的XMLHttpRequest对象，我们将执行“return”语句结束这个函数以避免脚本错误。在大部分情况下，这个检验将返回一个XMLHttpRequest对象－这部分代码应该能够在绝大部分的浏览器上工作，除了少部分比较老的浏览器的异常情况（它能够工作在ie5.01上，但是在netscape4上会使函数终止）。
　　接下来是这些代码块:
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}

　　每次XMLHttpRequest的状态发生变化，事件“onreadystatechange”就会被触发。通过使用“xmlObj.onreadystatechange = function(){...}”我们能够创建一个函数并让它在这个XMLHttpRequest对象的状态每次发生改变的时候立刻运行。这里总共有五个状态，由0走到4。

0 – 尚未初始化（在这个XMLHttpRequest开始前）

1 – 加载（XMLHttpRequest初始化一结束）

2 – 加载结束（XMLHttpRequest一从服务器上获得一个回应）

3 – 交互（当XMLHttpRequest对象和服务器连接中）

4 – 结束（当XMLHttpRequest被告知它已经完成了所有人物并结束运行）

　　这第五个状态（数字4）就是我们能够确定数据已经可用的标志，所以我们检验这个xmlObj.readyState是否等于“4”来确定数据是否可用，如果是4，我们运行updateObj函数。这个函数带两个参数：一个当前web页面的元素ID（当前web页面中要更新的元素）以及用于填充这个元素的数据。这个函数的运行方式在稍后将更详细地解释。

　　我们的web页面的p元素有一个id“xmlData”，这就是我们准备更新的段落。我们正在取得的数据来自于XML文件，但它有点复杂。这里是它如何工作的原理。

　　xmlObj.responseXML属性是一个DOM对象－它很象“document”对象，除了它来自远程的XML文件。换句话说，如果你在data.xml中运行脚本，那xmlObj.responseXML就是一个“document”对象。因为我们知道这些，我们能够通过“getElementsByTagName”方法取得任何XML节点。数据包含在一个命名为“”的XML节点中，所以我们的任务很简单：取得第一个（而且只有这一个）数据节点。因而，xmlObject.responseXML.getElementsByTagName("data")[0]返回XML文件中的第一个节点。
注意：它返回的是XML节点，而不是节点中的数据－这个数据必须通过访问XML节点的属性取得，这就是下一步要说的。
　　接下来，取得数据只需要简单的指定“firstChild.data”（firstChild指向了那个被节点包含的文本节点，而这个“data”属性则是这个文本节点的实际文本）。
xmlObj.open ('GET', file, true);
xmlObj.send ('');

　　这是我们的ajaxRead函数的最后一个部分。它说了些什么？嗯，xmlObj的这个“open”方法打开了一个到服务器（通过一个指定的协议，这里指定的是“GET”－你可以使用“USE”或者其他别的协议）的连接，去请求一个文件（在我们的例子里，变量“file”被作为一个参数赋给ajaxRead函数－data.xml），而且javascript可以同步（false）或者异步（true，默认值）的处理请求。由于这是异步的Javascript和XML（AJAX），我们将使用默认的异步方式－在这个例子中，使用同步方式将不起作用。

　　这是我们函数中的最后一行，它简单的发送一个空字符串回服务器。如果没有这行，xmlObj的readyState永远不会到4，所以你的页面永远不会更新。这个send方法能够用于作其他事情，但今天我只是用来从服务器上取得数据－并不发送它－所以在这篇文章中我不准备介入任何关于send方法的细节。
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}

　　现在再稍微解释一下updateObj函数：这个函数使用一个新的值来更新当前页面上任何指定的元素。他的第一个参数，“obj”是当前页面中元素的ID－那个要被更新的对象；它的第二个参数，“data”是用来将那个将被替换值的对象（“obj”）的内容替换掉。一般来说，检验一下并确定当前页面上确实有一个元素的ID是“obj”是比较明智的，但对我们的脚本的这个隔离级别来说校验并不必要。这个函数更新的方式和我们之前从XML文件的“data”节点取得数据的方式类似－它定位它要更新的元素（这时候这个元素的ID代替了它的标签名和在页面中的索引）并设置这个元素的第一个子节点（文本节点）的data属性为新的值。如果你需要使用HTML而不是纯文本来更新一个元素，你也可以使用
document.getElementById(obj).innerHTML = data

这就是全部了

　　这个概念很简单，而且代码也不是很难。你能够从某个地方读取一个文件并且不需要重新加载这个web页面。你有足够的灵活性来作各种事情，包括从表单发送数据（不需要重新加载web页面）并且使用一个服务端语言来动态生成XML文件。如果你需要更近一步，记得这个连接是很有用的－哦，还要记得Google是你朋友。在另外的文章中，我将解释你如何配合服务端技术使用AJAX来构造强大的web应用程序。

☆蓝色梦想☆ 2005-12-22 15:58 发表评论

如何使用ajax开发web应用程序（2）

☆蓝色梦想☆ — Thu, 22 Dec 2005 07:58:00 GMT

在上一篇文章中，我们讨论了如何通过javascript从一个远程XML文件中取得数据。在这篇文章中，我们将学会怎样对数据作更复杂的处理。作为一个示例，我们会准备一组XML数据，将数据分割成独立的片断并以不同的方式展示这些片断（取决于它们是如何被标识的）。

　　这篇文章是建立在上一篇文章中构造的示例代码的基础之上，所以如果你不能理解我们现在的代码，你可以回过头去读第一篇文章（sheneyan注：就在上面）。

开始～

　　让我们开始我们的第一步：构造XML。我们准备写一个XML文档，它组织了一系列准备让javascript处理的数据，所以我们将一起组织一些节点和子节点（或者，元素和子元素）。在这个例子里，我们将使用一些家庭宠物的名字：

猫
狗
鱼

　　在上面，我们有这个XML声明（标明这个文档是一个XML 1.0 文档，使用UTF-8编码），一个根元素（）将下面所有的元素组合在一起，一个元素组织了所有的宠物，然后一个节点对应一只宠物。为了指定每一只宠物是什么类型的动物，我们在元素中设置了文本节点：猫，狗，鱼。
"[url]http://www.w3.org/TR/html4/strict.dtd[/url]">

使用Ajax开发Web应用程序 - 示例

使用Ajax开发web应用程序

这个页面将演示如从取回并处理成组的XML数据。被取回的数据将会以表格形式输出到底下。
查看演示.

（Sheneyan注：完整代码示例见[url]http://sheneyan.com/html/article/ajax/example_2.html[/url]，XML文件见：[url]http://sheneyan.com/html/article/ajax/data_2.xml[/url]）

　　你会注意到我们和上次一样以同样的方式（通过一个超链接）调用了这个函数，而且我们将数据放入一个DIV（这次这个东东叫做“dataArea”）。这个ajaxRead()函数和上次很接近，除了一点不同：onreadystatechange函数。让我们先看一下这个函数：
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
processXML(xmlObj.responseXML);
}
}

　　我们取消了updateObj函数并用一个叫做processXML()的新函数来代替它。这个函数将得到XML文档本身（也就是被ajaxRead函数取回的）并处理它。（这“XML文档本身”我指的是参数“xmlObj.responseXML”）

　　现在让我们分析一下这个函数processXML。下面是它的代码：
function processXML(obj){
var dataArray = obj.getElementsByTagName('pet');
var dataArrayLen = dataArray.length;
var insertData = '';
for (var i=0; i insertData += '';
}
insertData += '

' + 'Pets
' + dataArray[i].firstChild.data + '

';
document.getElementById ('dataArea').innerHTML = insertData;
}

　　首先，我们定义了一些变量。“dataArray”作为所有节点的数组（不是节点数据，只是节点）。“dataArrayLen”是这个数组的长度，用于我们的循环。“insertData”则是一个表格的开头的HTML。

　　我们的第二步则是遍历所有的元素（通过变量“dataArray”）并将数据添加到变量insertData中。这里我们会创建一个表格行，插入一个表格数据节点(td)进去，再将每一个元素的文本包含进这个表格数据节点，并将这些都添加进变量“insertData”。因此，每循环一次，变量insertData将添加一行包含三个宠物中之一名称的新数据。

　　新数据行添加完后，我们插入一个“”结束标签到变量“insertData”。这完成了这个表格，然后我只剩这最后一步来达成我们的目标：我们需要将这个表格放到页面上。幸运的是，我们得感谢innerHTML属性，这很简单。我们通过函数document.getElementById()取得DIV“dataArea”并将变量“insertData”中的HTML插进去。嗯，这个表格冒出来了！

我们继续之前……

　　我得指出两点：

　　首先，你会注意到我们并没有使用节点。这事因为我们只有一个数据组（）以及后来所有的元素（每一个元素）；这些子节点包含了不同的数据但它们有相同的名字。在这个例子中，这个节点能够被忽略。然而，将所有的元素放进元素还是比较好，而不是让这些元素自己散放（但仍然在data元素里面）。

　　另外一种方式是给每一个宠物放一个指定的标签，比如：

<猫 />
<狗 />
<鱼 />

　　然后我们能够遍历元素里的节点。这个processXML函数看起来就像这样：
function processXML(obj){
var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
var dataArrayLen = dataArray.length;
var insertData = '';
for (var i=0; i if(dataArray[i].tagName){
insertData += '';
}
}
insertData += '

' + 'Pets
' + dataArray[i].tagName + '

';
document.getElementById ('dataArea').innerHTML = insertData;
}

（Sheneyan注：修改后的示例见：[url]http://sheneyan.com/html/article/ajax/example_2_1.html[/url]，XML文件见：[url]http://sheneyan.com/html/article/ajax/data_2_1.xml[/url]）

　　这里所作的修改就是我们指向了组元素（这个“[0]”意味这是第一个，即使它就是唯一的那一个）以及它的子节点（元素<猫 />，<狗 />，<鱼 />）。因为文本元素分割了这几个元素（空格被认为是一个节点），我们需要确定只有那些有标签名的节点（嗯，也就是只有标签）通过。然后我们输出每一个标签的名字。因为每一个标签名是一个宠物，我们不需要取得每一个节点的数据－节点名本身已经足够。去看一下它是怎么工作的吧。

　　还有另外一种方式来完成我们上面的工作，就是给每一个节点设置一个属性值。你的XML文档看起来就像这样：

　　你只需要稍微修改一下你的processXML函数，它变成这样子了：
function processXML(obj){
var dataArray = obj.getElementsByTagName('pet');
var dataArrayLen = dataArray.length;
var insertData = '';
for (var i=0; i insertData += '';
}
insertData += '

' + 'Pets
' + dataArray[i].getAttribute('type') + '

';
document.getElementById ('dataArea').innerHTML = insertData;
}

（Sheneyan注：修改后的示例见：[url]http://sheneyan.com/html/article/ajax/example_2_2.html[/url]，XML文件见：[url]http://sheneyan.com/html/article/ajax/data_2_2.xml[/url]）

　　关键的不同在于我们通过dataArray[i].getAttribute('type')取得值，它返回了当前节点的“type”属性的值。

继续...

　　现在我们已经知道了一些从一个单独的XML数据组中取回数据的有效方法，让我们看看如何从多个组中取回数据。和只是列出一个pets所拥有的内容不同，我们假设我们有一个针对我们宠物的日课表。因为它们都有不同的需要，每一只宠物都得仔细的照顾。面对这种情况，动物的看管员需要一个每日依据。现在来让我们将这些放入一个良好格式的XML：

Cat
Feed
Water
Comb out fleas

Dog
Feed
Water
Put outside

Fish
Feed
Check oxygen, water purity, etc.

　　也许这个看起来很奇怪，但这就是我们正在创建的子组(sub-group)。每一个元素都是一个组的子组，而每一个则是每一个组的子元素。

　　在我继续之前，你也许希望将你的表格用一些css美化一下，比如：

　　这让这个表格更容易读取。现在让我们去研究函数processXML：
function processXML(obj){
var dataArray = obj.getElementsByTagName('pet');
var dataArrayLen = dataArray.length;
var subAry, subAryLen;
var insertData = '';
for (var i=0; i insertData += '';
subAry = dataArray[i].getElementsByTagName('task');
subAryLen = subAry.length;
insertData += '';
}
insertData += '

' + 'Pets	Tasks
' + dataArray[i].firstChild.data + '	'; for(var j=0; j insertData += subAry[j].firstChild.data; if( subAryLen != j+1 ) { insertData += ', '; } } insertData += '

';
document.getElementById ('dataArea').innerHTML = insertData;
}

（Sheneyan注：修改后的示例见：[url]http://sheneyan.com/html/article/ajax/example_2_3.html[/url]，XML文件见：[url]http://sheneyan.com/html/article/ajax/data_2_3.xml[/url]）

　　新增加的内容，首先是两个新变量的声明：“subAry”和“subAryLen”。它们和之前的变量“dataArray”和“dataArrayLen”类似，除了它们指向不同的数组（特别是它们将指向那些“task”元素－当“dataArray”和“dataArrayLen”指向“pet”元素的时候）。

　　我们也改变了变量“insertData”的初始值－我们增加了一个表格头（）给我们的“tasks”字段。

　　下一步改变在于循环：我们把值赋给subAry和subAryLen变量。变量subAry成为当前的元素的数组。变量subAryLen成为这个数组的长度，直到这个数组发生变化（当外部循环走到下一个时）。

　　我们创建了一个内嵌的循环来处理所有的元素，一次一个。大概来说，我们创建一个新的数据格，放进一个用逗号分隔的任务列表，然后关闭数据表格以及当前行。尤其，这些元素节点数据（任务本身，比如，“喂食”）放置入变量“insertData”里的数据格。

　　接下来，我们检验当前是否有其它更多的task。如果还有，我们增加一个逗号（，）到变量insertData来让每一个任务使用一个逗号分隔（“a, b, c”，而不是“a, b, c,”－注意，最后一个逗号在第二个任务那里，所以我们不需要）。这个工作在我们取得subAry数组长度的时候（给循环的“j”变量加1）就完成了。因为这个循环会在下一个循环的时候把变量“j”递增1,“j”会比它这次检验时还多1。因此，如果“j+1”（或者，“当循环再次开始的时候j的值”）等于subAryLen（当前节点的节点数目），这个循环将停止。如果循环不再运行，我们就不再添加新的逗号来分隔任务。所以如果“j+1”不等于subAryLen，我们直到我们可以安全的加入逗号到“insertData”，为下一个作准备。

　　一旦内循环结束，我们关闭task数据格以及pet行。外部循环会重新开始创建一个新行以及移动到下一个。这个处理一直进行到所有的元素（以及每一个pet的所有元素）都被处理完。

有其他方法吗？

　　你也许会想：“那javascript变得相当复杂了，但它只会随着XML越来越复杂而跟着变复杂，也许我们能够简化XML，然后，简化javascript”。如果你这么想，很棒，因为你完全正确。我之前展示的不同方法之一，我详细说明的那个也许能够成为最合适的。我们怎么使用属性来对应每一只宠物以及相应任务？XML看起来会变成怎样？

　　哇哦！看起来简单多了。让我们看看我们的processXML函数如何修改：
function processXML(obj){
var dataArray = obj.getElementsByTagName('pet');
var dataArrayLen = dataArray.length;
var insertData = '';
for (var i=0; i insertData += ''
+ '';
}
insertData += '

' + 'Pets	Tasks
' + dataArray[i].getAttribute('type') + '	' + dataArray[i].getAttribute('tasks') + '

';
document.getElementById ('dataArea').innerHTML = insertData;
}

（Sheneyan注：修改后的示例见：[url]http://sheneyan.com/html/article/ajax/example_2_4.html[/url]，XML文件见：[url]http://sheneyan.com/html/article/ajax/data_2_4.xml[/url]）

　　就像你猜的一样，函数简单多了。因为代码变得简单，它也会变得更有效率。和我们比较老的函数的唯一的不同在于这个变量insertData现在插入更多的HTML，尤其是两个新变量“type”和“tasks”。就如我们较早之前所学的，那些属性是我们从XML文档的元素中取得的，而且每个pet的属性都有不同的值。对于你自己修改这个XML文件以适应你的进度的变动来说也许是最简单的方法。例如，如果你最终把你的猫身上的跳蚤抓光了，你只要简单从你的猫的每日任务表中把“减少跳蚤数量”删除，然而在之前我们使用的XML中，实现起来也许会觉得糊里糊涂。

　　最后的XML格式化的方法是将两部分混合。现在，我们将使用属性和不同的标签。让我们看一下示例XML：

<猫 tasks="喂食, 饮水, 减少跳蚤数量" />
<狗 tasks="喂食, 饮水, 带出去遛遛" />
<鱼 tasks="喂食, 检查氧气，水的纯度，其它" />

　　这也许是最便于理解的XML。让我们分析一下我们为了让processXML函数运作起来所作的变更：
function processXML(obj){
var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
var dataArrayLen = dataArray.length;
var insertData = '';
for (var i=0; i if(dataArray[i].tagName){
insertData += ''
+ '';
}
}
insertData += '

' + 'Pets	Tasks
' + dataArray[i].tagName + '	' + dataArray[i].getAttribute('tasks') + '

';
document.getElementById ('dataArea').innerHTML = insertData;
}

（Sheneyan注：修改后的示例见：[url]http://sheneyan.com/html/article/ajax/example_2_5.html[/url]，XML文件见：[url]http://sheneyan.com/html/article/ajax/data_2_5.xml[/url]）

　　“dataArray”现在指向了的子节点，将它们作为一个数组对待（换句话说，dataArray现在是在节点内所有节点的数组）。这事因为每一个标签都不同（<猫 />，<狗 />，<鱼 />），所以我们不能使用这些元素的名称来搜索它们（而之前我们可以使用，因为所有的元素都是）。

　　还是一样，每个节点之间的有空格，所以在我们的处理过程中得排除掉文本节点。我们能够检验标签名是否存在－文本节点是节点但没有标签，而<猫 />，<狗 />，<鱼 />节点都是标签。所以如果一个标签有名字，那我们能够将数据插入变量insertData。我们插入的数据是一个表格并有两个表格数据格。这第一个单元格是标签名，也就是宠物的类型（猫，狗或鱼），而第二个单元格则是指定动物的“tasks”属性值（比如“喂食或饮水”）。

结束语

　　在这篇文章里，我演示了这个例子的很多变化，你可以随意试验它们来检验哪个更适合你。只要记住一点，XML是“可扩展的”，所以没有“错误的”方法来组合你的数据，虽然经常有一个“最好的”方法。而且，要注意让你的XML保持格式良好。记住很多问题来自于忘记结束一个标签（比如<狗 />而不是<狗>;除非这个节点中有数据，比如下面的<狗>这里有数据哦）。

　　我意图使XML和javascript的应用不糊涂而变得明朗。一步步的学习处理更多的数据，你能够将ajax运用于更大的用途。我希望看到ajax更多的应用于企业网站，及其它。所以如果你将这些知识应用于实践，我很高兴了解到你学到了什么（mail：[email]jona@slightlyremarkable.com[/email]）。

☆蓝色梦想☆ 2005-12-22 15:58 发表评论

java版本的escape和unescape函数

☆蓝色梦想☆ — Thu, 22 Dec 2005 05:40:00 GMT

class EscapeUnescape
{
public static String escape (String src)
{
  int i;
  char j;
  StringBuffer tmp = new StringBuffer();
  tmp.ensureCapacity(src.length()*6);

for (i=0;i {

j = src.charAt(i);

   if (Character.isDigit(j) || Character.isLowerCase(j) || Character.isUpperCase(j))
    tmp.append(j);
   else
    if (j<256)
    {
    tmp.append( "%" );
    if (j<16)
     tmp.append( "0" );
    tmp.append( Integer.toString(j,16) );
    }
    else
    {
    tmp.append( "%u" );
    tmp.append( Integer.toString(j,16) );
    }
  }
  return tmp.toString();
}

public static String unescape (String src)
{
  StringBuffer tmp = new StringBuffer();
  tmp.ensureCapacity(src.length());
  int lastPos=0,pos=0;
  char ch;
  while (lastPos  {
   pos = src.indexOf("%",lastPos);
   if (pos == lastPos)
    {
    if (src.charAt(pos+1)=='u')
     {
     ch = (char)Integer.parseInt(src.substring(pos+2,pos+6),16);
     tmp.append(ch);
     lastPos = pos+6;
     }
    else
     {
     ch = (char)Integer.parseInt(src.substring(pos+1,pos+3),16);
     tmp.append(ch);
     lastPos = pos+3;
     }
    }
   else
    {
    if (pos == -1)
     {
     tmp.append(src.substring(lastPos));
     lastPos=src.length();
     }
    else
     {
     tmp.append(src.substring(lastPos,pos));
     lastPos=pos;
     }
    }
  }
  return tmp.toString();
}

public static void main(String[] args)
{
  String tmp="~!@#$%^&*()_+|\\=-,./?><;'][{}\"";
  System.out.println("testing escape : "+tmp);
  tmp =escape(tmp);
  System.out.println(tmp);
  System.out.println("testing unescape :"+tmp);
  System.out.println(unescape(tmp));
}
}

☆蓝色梦想☆ 2005-12-22 13:40 发表评论

Thinking in AJAX(三)

☆蓝色梦想☆ — Thu, 08 Dec 2005 07:11:00 GMT

此文原出于AJAX Patterns网站的一篇《Ajax Frameworks》的wiki文章，很早前我就注意到，后来在国内也有人翻译了，不过最近发现此wiki还是在不断添加维护中，截止此文发布前，作者又添加了好几个新诞生的AJAX开发工具，所以我决定重新翻译一遍，并且时常注意原文发布状态，一有新的内容立马也翻译过来，做到同步:)

此翻译稿很大一部分内容出自国内出现的那个先前版本，我只是对新加入的几项进行了翻译，并且对我熟悉的产品项着重介绍了一下，以后我会抽时间收集文中提到AJAX工具相关的文章，尽量将内容介绍和功能点评做到全面详细点。所以请关注和准备用AJAX做开发的朋友关注这篇文章，我会时常更新的。原文因为是由一个wiki系统维护，所以在所难免出现参差不齐，风格上也有不统一的情况，翻译时我也是参照原文原封不动的挪了过来，以后我会抽时间改良下。

翻译正文

基于浏览器的应用框架一般分为两种：

Aplication frameworks:提供了浏览器功能，但其最著名的还是在于通过窗口生成组件建立桌面GUI。
Infrastructural frameworks:提供基本的框架功能和轻便式浏览器端操作，让开发者去创建具体应用，主要功能包括：
- 基于XMLHttpRequest组件的浏览器交互功能
- XML解析和操作功能
- 根据XMLHttpRequest的返回信息进行相应的DOM操作
- 一些特殊情况下，和其他的浏览器端技术如Flash（或Java Applets）等集合到一起应用

基于服务器端的应用框架通常以下面两种方式工作(尽管它们根据不同的语言进行了分类)

HTML/JS Generation(HTML/JS生成)：通过服务器端生成HTML和JS代码在传递给浏览器端进行直接运行
远程交互：JavaScript调用服务器端函数(例如调用Java函数)并返回给JavaScript的回调句柄，或者请求服务器端数据信息，例如Session信息，数据库查询等。

1. Pure Javascript: Application Frameworks

1.1 Bindows (成立于2003年)

Backbase是一个通过DHTML、JavaScript、CSS和HTML等技术强劲联合起来的一套完整的Windows桌面式的WEB应用程序解决方案。Bindows无需下载安装客户端支撑组件（如Java、ActiveX或Flash），仅需一个浏览器。纯OO的理念体现在Bindows任何地方，Bindows或许是笔者见过的最完整最强大的AJAX应用程序平台。
Bindows是商业程序的，使用了来自于MB的技术(总部位于GA USA，主要开发中心在瑞典，成立于2002年)。

Bindows框架提供的功能和特性有：

基于面相对象技术的类和API
一套完整的Windows桌面系统，支持各种特性窗口模式，包括菜单、表单、表格、滑动条、测量仪器窗口和其他一些Windows窗口特性支持。
是开发zero-footprint(零空间占用)SOA客户端应用程序首选工具包
本机的XML，SOAP和XML-RPC支持
单用户到企业级开发的支持
内建的完美的AJAX支持

Bindows开发环境：

支持企业级规模的项目开发
跨浏览器、跨OS平台的支持
不受服务器结构限制
良好的与新的、现有的资源互操作性
统一的开发接口

1.2 BackBase (成立于2003年)

BackBase是一个完整的浏览器端框架，提供了丰富的浏览器操作功能，以及对.NET和JAVA平台的集成。
商业化产品，来自于Backbase B.V(总部在Amsterdam，成立于2003年)。

1.3 DOJO (开发中,成立于2004年9月)

DOJO提供完整的轻量级窗口组件和浏览器-服务器消息映射支持

提供创建自定义Javascript窗口组件的框架支持
预制的丰富的窗口类型库
B/S消息映射支持——XMLHttpRequest和其他机制
支持浏览器中的URL操纵功能
开源许可(Academic Free License 2.1)，由JotSpot的Alex Russell所领导。

1.4 Open Rico (开发中;成立于2005年5月;基于早期的一个proprietary 框架)

Open Rico是一个支持Ajax架构和用户交互的多用途框架。

一个XMLHttpRequest response能被一个或多个的DOM对象，或者Javascript对象调用。
支持拖拽操作
支持基于AJAX的动画模式，如缩放和变换等
基于Behaviors的操作库
使用指南，由RussMirimar的Yonah提供
开源。源于Sabre航空公司解决方案，由Bill Scott，Darren James及另外一些人维护。

1.5 qooxdoo (开发中; 成立于2005年5月)

qooxdoo，是另一个发展迅猛的应用框架，提供广泛的UI支持，正在开发基础架构等特性。

基础结构特性：
- 能轻易的捕获和操纵DOM事件
- 支持调试
- 支持一个时间操作的Timer类
- Getter/Setter支持
UI:
- 窗口组件库和框架
- 界面布局管理
- 图像缓存和透明PNG图片处理
开源(LGPL).

1.6 Tibet (开发中; 创建于2005年6月)

Tibet提供了大量的易移植和完整的JavaScript API，通过这些可以快速生成大量的客户端代码，Tibet自称是企业级AJAX。

远程脚本调用封装在XMLHttpRequest中
URI支持
支持所有的HTTP事件，不再仅仅是GET和POST
低级的协议-File://和WebDav也可以当作HTTP正常使用
Web Services调用支持，包括SOAP、XML-RPC等等
大型的Javascript对象库
多种多样的XML操作支持
IDE和开发工具
开源协议(OSI)

1.7 AJFORM (创建于2005年6月)

AJFORM是一个极易上手的AJAX框架，被用来编写入门级的AJAX代码，提供有以下功能：

三步安装
自动支持任意HTML表单元素
几乎无需编码即可实现AJAX

2 Pure Javascript: Infrastructural Frameworks

2.1 AjaxCaller(创建于2005年5月，目前是Alpha版)

AjaxCaller是一个具有多线程安全访问的XMLHttpRequest组件，主要针对Ajax开发新手，目前仍处于alpha开发阶段，仅在AjaxPatterns的在线搜索范例中使用了这个程序。

用明文或者XML结构的数据实现和服务器的交互(GET/POST/PUT/DELETE)
支持XMLHttRequest对象的构析(销毁对象，C++支持内存对象的构析操作)
支持Response的高速缓存(尚在计划中)
简单的库文件代码易于新手学习使用，并且支持脚本调试
开源协议

2.2 Flash JavaScript Integration Kit

The Flash JavaScript Integration Kit可以使Flash和Javascript脚本实现相互集成。

可以实现在JavaScript中调用Flash ActionScript脚本，反之亦然。
几乎支持双方主要数据类型的在不同环境中的传递调用。
开源协议，有几个Flash开源爱好者维护。

2.3 Google AJAXSLT (2005年6月发行)

Google AJAXSLT，是一个Javascript框架，用来执行XSLT转换以及XPath查询。

目前在Google Map上就使用了这个。
开源协议(BSD)

2.4 HTMLHttpRequest(Beta版；创建于2005年)

HtmlHttpRequest最大的特点就是运用XMLHttpRequest对象和标准HTML标签IFrame来实现最大限度的跨浏览跨平台的AJAX支持，其原理是在支持XMLHttpRequest的浏览器上调用XMLHttp，如果不支持，就用IFrame来模拟实现异步交互。

目前支持的浏览器：IE6/Win, IE5.5/Win, IE5/Win, IE4/Win, Mozilla/Win, Opera7/Win, Safari/Mac, IE5/Mac
尚未测试的浏览器：IE4/Mac, Mozilla/Mac, Opera/Other, Konqueror/Linux。
开源协议(LGPL)

2.5 Interactive Website Framework (创建于2005年)

Interactive Website Framework定位在浏览器中支持各种各样的AJAX基础应用的开源项目。自称是通过JavaScript、CSS、XML和HTML实现高性能的交互式WEB框架，包括一个可定制易读的XML解析器。实际上，IWF是一个AJAX的基础框架，并且还包括一些通用脚本代码。

实现了线程安全的XMLHttpRequest
对XML Document进行封装，以便创建更具有可读性的代码：

var node = doc.groceries.frozen[0].pizza[0].size;
封装后的数据读取
var node = doc.documentElement.firstChild.firstChild.getAttribute("size");
原始的DOM操作读取
开源协议

2.6 LibXMLHttpRequest (2003年6月发布)

libXmlRequest是一个小型XMLHttpRequest封装包

用getXML()和postXML()两个事件简化XMLHttpReuqest调用
支持XMLHttpRequest对象池
Response缓存处理
源码可以使用，但是有版权保护。

2.7 MAJAX

MAJAX是另一个非常小巧的HttpRequest封装包，为收发字符型信息提供简单接口，并为每步动作设置回调界面。

2.8 RSLite (x)

RSLite是一个XMLHttpRequest封装组件，作为Brent Ashley的JSRS(JavaScript Remote Scripting)其中的一部分功能单独发布。详情可以看JSRS的介绍

2.9 Sack(开发中，成立于2005年5月)

Sack也是一个很有名字的微型XMLHttpRequest封装包。调用者可以自定义回调函数或者是DOM对象。借助于回调DOM对象，可以把Response回来的数据直接以文本的方式嵌入DOM中。

2.10 Sarissa (发布于2003年2月)

Sarissa是一个JavaScript API，封装了在浏览器端独立调用XML的功能。

可移植的XMLHttpRequest对象创造
可移植的XPath查询
可移植的DOM操控
可移植的XSLT
可移植的XML序列化
开源协议(GPL2.0和LGPL2.1)

2.11 XHConn (2005年4月发布)

XHConn也是一个小型的XMLHttpRequest封装库。笔者也使用改良过的XHConn，其特点就是调用简单，代码也清晰易读。

例子：
new XHConn().connect("mypage.php"，"POST"，"foo=bar&baz=qux"，fnWhenDone);
开源协议许可

3 Server-Side: Multi-Language

3.1 Cross-Platform Asynchronous INterface Toolkit (2005年5月)

CPAINT是一个真正的同时支持PHP和ASP/VBScript脚本的AJAX和JSRS工具包。CPAINT在后台提供你需求的AJAX和JSRS代码，并自动返回到浏览器端相应的Javascript脚本代码，这种方式易于实时反馈需求的WEB应用程序。

支持PHP和ASP
所有功能函数都在统一的JavaScript文件中
支持远程脚本和XML
支持本地和远程函数调用
可以创建单个或多个XMLHttp对象
返回给后台的数据即可以是文本也可以是XML/DOM文档对象
支持POST和GET
用服务端代理的方式实现远程函数和数据的访问操作
大部分浏览器中测试正常使用
在GNU、GPL、LGPL开源协议保护下发行

3.2 SAJAX (2005年3月)

SAJAX的实现方式很独特，例如：调用一个javascript方法x_calculateBudget()，将先把响应传到服务器并调用一个Java calculateBudget()方法，然后以javascript方式把值返回到x_calculateBudget_cb()中。SAJAX的名气不错，估计很多人都听过甚至用过，不过缺点就是它的这套映射理论感觉较繁锁，远不如一些轻量级的封装库好用，不过SAJAX最大的特点就是支持的平台丰富，几乎囊括了WEB下常用的编程语言和平台

很方便从JavaScript函数映射到服务端代理操作
支持多种平台(ASP/ColdFusion/Io/Lua/Perl/PHP/Python/Ruby)
开源协议

3.3 Javascipt Object Notation (JSON) and JSON-RPC

JSON是一个"face-free" XML，而JSON-RPC是一种远程交互协议，类似于XML-RPC，对JavaScript支持较强

支持多服务端平台: Java, Python, Ruby, Perl.
针对不同的平台有不同的包和许可协议, 如JSON-RPC-Java.

3.4 JavaScript Remote Scripting(JSRS)(2000年)

JSRS，较经典的远程脚本访问组件，支持将客户端数据通过服务器做代理进行远程的数据/操作交互。

支持的浏览器：IE4+，NS4.x，NS6.x，Mozilla，Opera7和Galeon。
服务器端脚本语言支持：ASP，ColdFusion，PerlCGI，PHP,Python和JSP(servlet)。
开源协议。由Brent Ashley提供支持。

3.5 Bitkraft for ASP.NET

Bitkraft是个基于(.NET)Web框架的CLR(公共语言运行库)，允许用独特的方式创建和操作分布式Web内容。用C#编写，运行在微软的.NET 1.1和Mono框架下，无缝式的客户端-服务器响应方式是它的最大特点。Bitkraft没有使用XML组织数据，而是用JSON代替。

支持的浏览器： IE5+, Firefox1+, NS6
服务器端要求：ASP.NET, Mono XSP, Cassini, Apache (modMono) .NET Framework 1.1+
事件驱动
支持同步和异步的远程代理
客户端支持所有的.NET类型或自定义类对象映射到JSON中
用JSON取代XML
免费，开源许可协议

4 Server-Side: Java

4.1 WebORB for Java (2005年8月)

WebORB for Java是一个开发AJAX和基于Flash的富客户端应用程序的开发平台。在线例子

WebORB包括一个富客户端开发类库。提供简单的在线式API用来绑定或者调用任何Java对象、XML Web Services和EJB
支持异步或同步的事件驱动
不需要在服务端修改任何代码，不需要自定义方法或属性、变量等。不要求设计时指定代理等。
同步调用不需要回调，异步调用需要一个回调方法。
客户端可以向服务端请求指定的活动方式，不需要任何编程就可以把处理结果轻易的转变为状态。
提供一个特定API来处理数据库查询结果-服务器代码能返回DataSet或者DataTable，而客户端以一个类似于RecordSet的JavaScript对象来显示这个结果。该对象提供检索列名和行数据的方法。
支持数据分页技术。客户应用程序能检索页面中的数据。
支持以参数的方式返回所有服务期端数据类型，如primitives, strings, complex types, arrays, native .net collections, remote references
目前有两个版本：标准版(免费)，专业版(商业许可)

4.2 Echo 2 (2005年3月)

Echo 2允许你用纯Java语言编写AJAX程序。 Demo.

自动生成HTML和Javascript代码
用XML在客户端-服务端传递消息
如果愿意支持自定义Javascript组件
开源协议(Mozilla Public License or GNU LGPL)

4.3 Direct Web Remoting (DWR) (2005)

Direct Web Remoting可以在Javascript代码中直接调用Java方法的应用框架

类似于SAJAX，可以把Javascript中的请求调用转递到Java方法中并将执行结果返回给Javascript
可以和任何Web框架一起使用，如Struts、Tapestry等等
开源(Apache)，目前该产品被加入到WebWork中

4.4 SWATO (2005)

SWATO是一套可重用的和良好集成的Java/JavaScript库，它实现了一种更容易的方式来改变你的web应用程序的交互，通过AJAX方式实现。

服务端Java库可以非常容易的部署到所有Servlet2.3+兼容的容器中
客户端Javascript库可以在所有支持XMLHttpRequest的浏览器中使用
使用JSON技术在服务端组织POJO数据，这样你可以在任何Javascript环境中(HTML、XUL、SVG)访问这些远程数据，这种方式很容易通过硬编码或者某种成熟的Javascript库集成到当前应用中
提供一个简单接口使你能在Javascript中调用远程的POJO数据
使用和灵活的在web.xml中进行配置，并且可以集成(不是必须)到你的Spring框架中
提供了几个可帮助你快速开发web应用程序的组件(如自动完成的文本框，在线表单，在线列表等等)

4.5 AJAX JSP Tag Library

The AJAX JSP Tag Library是一组JSP标签库，用来AJAX程序开发。可以在J2EE下无需Javascript就能轻松开发AJAX模式的Web Form。标签库为比较通用的AJAX功能提供了5个标签：

autocomplete: 用户在文本框中输入字符，自动从指定的数据中匹配用户输入的字符，类似于Google Suggest
callout:可以为A标签加入气泡式的消息提示框，不过是实时的服务端取出数据
Select/dropdown:类似于联动菜单，比如地州市的联动下拉框
toggle:开关闸按钮，比如在一个hidden表单域中存储true和falsh，同时显示相应的img图像
update field:更新数据，也就是无刷新提交了。

4.6 AJAX Java Server Faces Framework

The AJAX-JSF用来把任意的JSF应用程序转变为AJAX应用程序

例子：AJAX组件的 MyFaces JSF Tree(树型目录), table scroller(可滚动的表格), tabbed pane(分页栏)
开源协议(Apache Software License)

Server-Side: Lisp

5.1 CL-Ajax

CL-Ajax实现Javascript直接调用服务端Lisp

生成可带参数的函数
可以回调Javascript函数或者DOM对象
可以集成到SAJAX中
开源许可

6 Server-Side: .NET

6.1 WebORB for .NET (2005年8月)

WebORB for .NET是一个用.NET和XML Web Services方式开发AJAX和基于Flash的富客户端应用程序(在线例子)

WebORB包括一个富客户端开发类库。提供简单的在线式API用来绑定或者调用任何.NET对象、XML Web Services
支持异步或同步的事件驱动
不需要在服务端修改任何代码，不需要自定义方法或属性、变量等。不要求设计时指定代理等。
同步调用不需要回调，异步调用需要一个回调方法。
客户端可以向服务端请求指定的活动方式，不需要任何编程就可以把处理结果轻易的转变为状态。
提供一个特定API来处理数据库查询结果-服务器代码能返回DataSet或者DataTable，而客户端以一个类似于RecordSet的JavaScript对象来显示这个结果。该对象提供检索列名和行数据的方法。
支持数据分页技术。客户应用程序能检索页面中的数据。
支持以参数的方式返回所有服务期端数据类型，如primitives, strings, complex types, arrays, native .net collections, remote references
目前有两个版本：标准版(免费)，专业版(商业许可)

6.2 Ajax.NET (2005年3月)

Ajax.NET是首家支持各种方式通过Javascript访问服务端.net的免费库

类似于SAJAX，能把Javascript请求发送到.NET方法，服务端回传给Javascript，甚至包括串行化自定义类。
可以在Javascript中访问Session和Application数据
缓存查询结果
免费使用源代码
无需更改源代码，允许给Ajax.NET添加和修改方法和属性
所有类支持Javascript客户端返回数据，可以在JavaScript中使用DataSet：res.Tables[0].Rows
使用HtmlControls组件访问和返回数据
页面无需重载，用事件代理(数据访问层)
因为只提供一个调用接口方法，所以服务端CPU占用非常少

6.3 ComfortASP.NET (2005年8月)

ComfortASP.NET可以让开发者在纯.NET下开发类似AJAX(DHTML,JavaScript,XMLHttp)特性的应用程序。

快速应答
减少HTML传输
减少页面重载
无闪烁的浏览器内容更改
AJAX用户体验，

6.4 AjaxAspects (2005年8月)

AjaxAspects是个可以用Javascript调用服务端WebService事件的引擎

用标准的SOAP和WSDL进行服务端-客户端通信
用简单的类型和XML对象支持带参数的返回值
缓存支持
动作队列
免费使用，开源协议

7 Server-Side: PHP

7.1 AjaxAC (2005年4月)

AjaxAC用一个单独类封装了完整的应用程序功能

所有的功能集成在自包含的类中(另外附带一些Javascript库)
调用PHP文件或者HTML页面非常简易，只需创建App类后把类引用传递给需要调用的Javascript对象或者HTML元素即可。
捕获Javascript事件
可以自定义配置数据，并且支持运行时参数更改
无需再Javascript代码中夹杂凌乱的Html代码，所有事件都是被动态附加上的
由于以上两个优点，所以支持良好的模版引擎
容易Hook到PHP类和MySql数据已返回给自己的request
能够容易的用Javascript建立窗口模式应用程序。

7.2 JPSpan

JPSPAN通过Javascript直接调用PHP中的函数。

进行了严谨的单元测试
开源许可(PHP)

7.3 XAJAX

XAjax通过Javascript直接调用PHP中的函数

支持用Javascript调用PHP脚本
开源许可协议

8 Server-Side: Ruby

8.1 Ruby On Rails

Ruby On Rails是一个支持AJAX的完整Web框架，使用Ruby语言编写，严格按照MVC结构开发。

当Ajax出现的时候Rails还处于其发展的早期，因此Ajax可能逐渐成为Rails框架的核心。
生成浏览器中大多数/全部的Window应用组件和动画的Javascript脚本。
支持服务器端调用。

☆蓝色梦想☆ 2005-12-08 15:11 发表评论

Thinking in AJAX(二)

☆蓝色梦想☆ — Thu, 08 Dec 2005 07:10:00 GMT

一、AJAX最值得称赞的是异步交互，而不是无刷新

很多人都看好AJAX无刷新的技术，以至于认同AJAX就是用来做无刷新的。这个认识是错误的，什么是无刷新？无刷新就是页面无需重载，那什么又是异步交互？异步交互就是一个简单的多线程，当你在一个blog里看文章时，同时也可以利用AJAX进行无刷新的回复提交，看起来虽然也是无刷新，但这里最重要的是异步，即你能一边看文章，一边又能向服务器提交你的回复信息，利用好这个异步，才能算是掌握了AJAX的精髓。很多场合，无刷新是呈现给用户的视觉体验，而异步交互却是默默无闻的工作在台后，这种情况导致大多数人的错误理解了AJAX的权重之分。

二、推荐在WEB上轻量级的应用AJAX

著名的图片存储网站Flickr利用AJAX可谓出神入化。我之所以这么说，是因为我认为Flickr深知AJAX的利与弊，并且牢牢抓住自己的网站的功能特点，并没有因AJAX而AJAX，而是架驱于技术至上，让AJAX融于网站之中，为网站提供了更好的功能服务。如Flickr中无论是在多图列表页面还是单图详细页面，修改图片的标题和描述都应用了AJAX技术，让用户无需跳转到单独的编辑页面中，编辑后单击保存，亦使用了异步交互的方式进行数据提交，这时，页面上显示一个Loading字符外，其他部分不受任何影响，可谓太贴心的服务。

再如基于Tag的专业Blog搜索服务商Technorati也使用了AJAX，在搜索某个Tag时，页面主导部分会即刻显示所有Technorati数据库中查询到的数据条目，在左边的侧边栏上会显示两个Loading图标，过一会儿，这两个Loading就会显示具体的内容了，显示的是此Tag相关的Flickr的图片和书签服务网站(Furl&del.icio.us)的链接，因为这两部分内容是取自其他网站，如果由服务器统一先取得数据在一同显示到页面时，会受到网速影响而变慢，通过AJAX的异步交互方式首先立即显示本地数据，然后由客户端去和Flickr、Furl、del.icio.us打交道分别取得它们的数据，即节约了流量带宽又不影响用户访问速度，可谓高明。

通过以上两个国外成功应用AJAX的网站，我们发现他们都使用的是轻量级的AJAX，就是那种交互简单，数据较少的操作。这也符合AJAX的本意，虽然像www.backbase.com和bindows都在RIA上有惊人的表现能力，但是速度慢、搜索引擎支持不好、开发难度大等毛病还是无法让用户满意的，请记住：AJAX的最终目的是为了提高用户体验，为了方便用户交互，而不是因技术而技术的。

三、AJAX的MVC架构设计

很多人认为在成熟的框架中应用AJAX会破坏框架的完整性，比较常见的说法有三层架构的WEB应用中破坏MVC模式，其实不然。MVC的理论我就不多说了，经典的那三个层、五条线大家都很熟悉，在WEB应用中，因为浏览器/服务器固有的这种请求/响应的断开式网络通讯模式，决定了在Model层无法实现主动向View层发出数据更新事件，所以一般常见的成熟MVC框架中都将经典MVC理论稍作修改：由Model层处理完业务后通知Control层，然后由Control层承担向View发送数据更新的义务。但是AJAX天生具有监听功能，AJAX实现异步响应的那个OnReadyStateChange事件就具有在客户端程序中才会有的事件监听功能。现在想来，利用AJAX实现的MVC模型有如下图这样：

理想化的设计如下所示：

三层对应的文件对象：view.jsp(视图)、action.do(控制器)、model.java(模型)
view.jsp是用户看到的界面，并通过内置的AJAX对象异步方式给action.do发送请求，AJAX.OnReadyStateChange开始监听
action.do接收到view.jsp发过来的请求(GET或者POST方式)，通过Request判断后发送给相应的业务/数据模型model.java
model.java开始执行业务操作，执行完毕直接给view.jsp页面发送数据更新的通知，这个通知的消息有可能是XML封装的数据，也有可能是一段文本，甚至是一段HTML代码，当然，既然用MVC，不推荐有Model发送HTML，推荐还是用XML封装业务数据即可。
view.jsp页面中AJAX对象的OnReadyStateChange接收到了数据更新通知，根据实际情况用DOM进行页面呈现更新。

通过以上几步一气呵成，一个典型的基于MVC的三层交互就完成了。当然，熟悉WEB下的MVC框架的用户，如熟悉Struts的Java开发人员可能不习惯由Model层给View直接发送数据更新通知，那咱们也可以转变一下，Model层业务处理完毕将更新通知先发送给Control，由Control去通知View亦可。

☆蓝色梦想☆ 2005-12-08 15:10 发表评论

Thinking in AJAX(一)

☆蓝色梦想☆ — Thu, 08 Dec 2005 07:09:00 GMT

众所周知，异步交互、JavaScript脚本和XML封装数据是AJAX的三大特征。其实，在实际应用中，不需要牢牢套死这三条大律，在我看来，AJAX - X，即去掉用XML封装数据，也不失为一种好的设计思路，如果应用恰当，更显轻盈步伐和巧妙思路。

一般读取AJAX返回的XML结构的数据时使用XMLHttp的responseXML对象属性，同时，XMLHttp也提供了另外一个属性，即ResponseText，通过这个属性，XMLHttp可以接受来自服务器的文本结构的字符串信息。去掉XML的AJAX可以使用ResponseText这个对象属性，很灵活的操控返回数据的格式，可以自定义格式，比如我通常喜欢用c语言的那种文件流方式定义返回的字符串结构，有文件头和具体的文件信息实体，文件头分为状态信息以及文件字符长度，我摒弃了文件字符长度的定义，规定死接受的ResponseTex字符串中的第一位为状态码，比如设定常量值0表示一起正常，非0的数字表示不正常，甚至有错误等。如果有非0值，程序自动取第二位起到257位(长度为256)的字符串组成为状态信息，从258位开始到末尾的字符串就是服务器返回的正常结果信息。
substring(0,1)取状态码
substring(1,256)取服务器错误信息(错误信息不够256位用空格补齐，取到数据后进行Trim处理)
substring(256,末尾)取服务器返回的数据信息
三次substring即完成了一个简单但完整的交互工作。比起XML解析组件来说要快的多。

用ResponseText比封装为XML处理数据快和简单是一个原因，另一个原因是可操控性更大更灵活，打开Google Suggest，在搜索框输入字符可以给你给出拼写提示，Suggest就是应用了AJAX技术，不过它在从服务器返回数据时并没有使用XML封装，也没有自定义ResponseText格式，而是直接将返回代码组织成js脚本，通过浏览器返回后直接执行，如eval(XMLHttp.ResponseText)这样的方式进行执行，http://www.google.com/complete/search?hl=en&js=true&qu=ajax 通过这个链接你可以看到Suggest利用AJAX得到的返回数据，此页面是在Google Suggest的搜索框中输入"AJAX"后得系统动态返回的数据。

sendRPCDone(frameElement, "ajax", new Array("ajax", "ajax amsterdam", "ajax fc", "ajax ontario", "ajax grips", "ajax football club", "ajax public library", "ajax football", "ajax soccer", "ajax pickering transit"), new Array("3,840,000 results", "502,000 results", "710,000 results", "275,000 results", "8,860 results", "573,000 results", "40,500 results", "454,000 results", "437,000 results", "10,700 results"), new Array(""));

浏览器段拿到这段代码后直接eval就可以了，至于sendRPCDone这个函数，那当然得实现定义后并装载到页面中啦。XMLHttp这个名字以XML开头，让很多人禁锢了思想和创意，完全抛弃X，你也可以做出纯AJAX的实例来。

当然，对于大型系统来讲，为了保持数据接口的一致和整齐，还是用XML来传递更严谨更统一点，听说微软已经发起了重写XML Parse组件的号召，估计下一个版本的XMLHttp还是DOMParser还是MSXML2.DOMDocument都会大大提高效率，减少资源占用的。

☆蓝色梦想☆ 2005-12-08 15:09 发表评论

利用XMLHTTP无刷新自动实时更新数据

☆蓝色梦想☆ — Thu, 08 Dec 2005 02:32:00 GMT

传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.
但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.
我们可以让程序自动刷新.定时向服务器请求数据.5秒取一次数据,10秒取一次数据.
利用XMLHTTP发出请求并取得数据.传到客户端,客户端重新组织并显示数据.

demo.htm 前台显示.

num1

num2

Server.asp 后台读取数据

<% @Language="JavaScript" %>
<%
function OpenDB(sdbname)
{
/*
*--------------- OpenDB(sdbname) -----------------
* OpenDB(sdbname)
* 功能:打开数据库sdbname,返回conn对象.
* 参数:sdbname,字符串,数据库名称.
* 实例:var conn = OpenDB("database.mdb");
*--------------- OpenDB(sdbname) -----------------
*/
var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
var conn = Server.CreateObject("ADODB.Connection");
conn.Open(connstr);
return conn;
}
var sResult = new Array();
var oConn = OpenDB("data.mdb");
//特殊字符：+,%,&,=,?等的传输解决办法.客户端字符是经过escape编码的
//所以服务器端先要经过unescape解码.
//Update:2004-6-1 12:22
var sql = "select num1,num2 from nums order by id";
var rs = oConn.Execute(sql);
while(!rs.EOF)
{
//一条记录用"###"隔开.每列数据用"@@@"隔开. 这是以只有两个列数据的情况.
sResult[sResult.length] = rs("num1").Value + "@@@" + rs("num2").Value
rs.MoveNext();
}
//escape解决了XMLHTTP。中文处理的问题.
Response.Write(escape(sResult.join("###")));
%>

数据库data.mdb
表 nums
id,自动编号
num1,文本
num2,文本

测试数据

id      num1    num2
1       20.70   20.810
2       10.5    20.5
3       12.3    300
4       132     323
5       563     56
6       20      10

利用XMLHTTP实现的二级连动Select
利用XMLHTTP无刷新添加数据之Post篇

利用XMLHTTP无刷新添加数据之Get篇

☆蓝色梦想☆ 2005-12-08 10:32 发表评论

BlogJava-☆蓝色梦想☆-随笔分类-AJAX

自动提示效果

js写的Hashtable类

如何使用ajax开发web应用程序（3）

使用Ajax开发web应用程序

如何使用ajax开发web应用程序（1）

使用ajax开发web应用程序

如何使用ajax开发web应用程序（2）

使用Ajax开发web应用程序

java版本的escape和unescape函数

Thinking in AJAX(三)

翻译正文

目录

1. Pure Javascript: Application Frameworks

1.1 Bindows (成立于2003年)

1.2 BackBase (成立于2003年)

1.3 DOJO (开发中,成立于2004年9月)

1.4 Open Rico (开发中;成立于2005年5月;基于早期的一个proprietary 框架)

1.5 qooxdoo (开发中; 成立于2005年5月)

1.6 Tibet (开发中; 创建于2005年6月)

1.7 AJFORM (创建于2005年6月)

2 Pure Javascript: Infrastructural Frameworks

2.1 AjaxCaller(创建于2005年5月，目前是Alpha版)

2.2 Flash JavaScript Integration Kit

2.3 Google AJAXSLT (2005年6月发行)

2.4 HTMLHttpRequest(Beta版；创建于2005年)

2.5 Interactive Website Framework (创建于2005年)

2.6 LibXMLHttpRequest (2003年6月发布)

2.7 MAJAX

2.8 RSLite (x)

2.9 Sack(开发中，成立于2005年5月)

2.10 Sarissa (发布于2003年2月)

2.11 XHConn (2005年4月发布)

3 Server-Side: Multi-Language

3.1 Cross-Platform Asynchronous INterface Toolkit (2005年5月)

3.2 SAJAX (2005年3月)

3.3 Javascipt Object Notation (JSON) and JSON-RPC

3.4 JavaScript Remote Scripting(JSRS)(2000年)

3.5 Bitkraft for ASP.NET

4 Server-Side: Java

4.1 WebORB for Java (2005年8月)

4.2 Echo 2 (2005年3月)

4.3 Direct Web Remoting (DWR) (2005)

4.4 SWATO (2005)

4.5 AJAX JSP Tag Library

4.6 AJAX Java Server Faces Framework

Server-Side: Lisp

5.1 CL-Ajax

6 Server-Side: .NET

6.1 WebORB for .NET (2005年8月)

6.2 Ajax.NET (2005年3月)

6.3 ComfortASP.NET (2005年8月)

6.4 AjaxAspects (2005年8月)

7 Server-Side: PHP

7.1 AjaxAC (2005年4月)

7.2 JPSpan

7.3 XAJAX

8 Server-Side: Ruby

8.1 Ruby On Rails

Thinking in AJAX(二)

一、AJAX最值得称赞的是异步交互，而不是无刷新

二、推荐在WEB上轻量级的应用AJAX

三、AJAX的MVC架构设计

Thinking in AJAX(一)

利用XMLHTTP无刷新自动实时更新数据

利用XMLHTTP无刷新添加数据之Get篇