﻿<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>单调专注的明王子 &#187; AJAJX&amp;UI</title>
	<atom:link href="http://www.uyun.com/category/ajax/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.uyun.com</link>
	<description></description>
	<lastBuildDate>Thu, 29 Apr 2010 17:09:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0-beta1</generator>
		<item>
		<title>无法忍受discuz的怠慢态度，亲自操刀修正discuz与google chrome的兼容问题</title>
		<link>http://www.uyun.com/2010/03/discuz-intolerable-attitude-of-neglect-and-personally-wield-the-sword-to-amend-discuz-compatibility-issues-with-google-chrome/</link>
		<comments>http://www.uyun.com/2010/03/discuz-intolerable-attitude-of-neglect-and-personally-wield-the-sword-to-amend-discuz-compatibility-issues-with-google-chrome/#comments</comments>
		<pubDate>Mon, 29 Mar 2010 18:13:17 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAJX&UI]]></category>

		<guid isPermaLink="false">http://www.uyun.com/?p=895</guid>
		<description><![CDATA[最近喜欢上用chrome。不过，在chrome下面，discuz总有些问题，今晚抽空在discuz的论坛找了下，无果，也发现很多人对此很着急。遂自己动手，丰衣足食。 对于心急的看官，可以先下载修改后的common.js 到include/js目录下覆盖原来文件（建议先备份一下），然后跑到网站后台更新下缓存即可。 做下修改记录吧： 修正function ajaxpost ： 约1169行，针对chrome专门优化了一下。 if(BROWSER.chrome){ var s_00 = $(ajaxframeid).contentWindow.document.documentElement.lastChild.previousSibling.previousSibling.nodeValue; var s_0 = $(ajaxframeid).contentWindow.document.documentElement.lastChild.previousSibling.nodeValue; var s_1 = $(ajaxframeid).contentWindow.document.documentElement.lastChild.nodeValue; s =&#8221;; if(s_0 &#38;&#38; s_0.indexOf(&#8216; =0 &#38;&#38; s_0.indexOf(&#8216; &#60;=2){ if(s_0) s += s_0; if(s_1) s += s_1; }else{ if(s_00) s += s_00; if(s_0) s += s_0; if(s_1) s += s_1; } } 修改function showselect：约1573行。 [...]]]></description>
			<content:encoded><![CDATA[<p>最近喜欢上用chrome。不过，在chrome下面，discuz总有些问题，今晚抽空在discuz的论坛找了下，无果，也发现很多人对此很着急。遂自己动手，丰衣足食。</p>
<p>对于心急的看官，可以先下载修改后的<a href="http://www.uyun.com/wp-content/uploads/2010/03/common.js">common.js</a> 到include/js目录下覆盖原来文件（建议先备份一下），然后跑到网站后台更新下缓存即可。</p>
<p>做下修改记录吧：</p>
<ol>
<li>修正function ajaxpost ： 约1169行，针对chrome专门优化了一下。</li>
<blockquote><p>if(BROWSER.chrome){<br />
var s_00 = $(ajaxframeid).contentWindow.document.documentElement.lastChild.previousSibling.previousSibling.nodeValue;<br />
var s_0 = $(ajaxframeid).contentWindow.document.documentElement.lastChild.previousSibling.nodeValue;<br />
var s_1 = $(ajaxframeid).contentWindow.document.documentElement.lastChild.nodeValue;<br />
s =&#8221;;<br />
if(s_0 &amp;&amp; s_0.indexOf(&#8216;<br />
=0 &amp;&amp; s_0.indexOf(&#8216;<br />
&lt;=2){<br />
if(s_0) s += s_0;<br />
if(s_1) s += s_1;<br />
}else{<br />
if(s_00) s += s_00;<br />
if(s_0) s += s_0;<br />
if(s_1) s += s_1;<br />
}</p>
<p>}</p></blockquote>
<li>修改function showselect：约1573行。 将原来只判断obj.id 的修改为 if(!obj.id  || ( BROWSER.chrome &amp;&amp; obj.id.indexOf(&#8216;calendarexp_&#8217;)===-1) ) {</li>
</ol>
<p>大功告成。 主要的问题是discuz使用自己写的JavaScript，说实在，很烂，兼容性不高，对内影响了discuz在页面交互的灵活性，对外就是discuz的延伸性受到一定限制。如果能够用jQuery，那么就爽咯:)</p>
<p>最后附上修正后的网站案例：</p>
<p><a href="http://www.gdutbbs.com/" target="_blank">http://www.gdutbbs.com/ 工大后院</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uyun.com/2010/03/discuz-intolerable-attitude-of-neglect-and-personally-wield-the-sword-to-amend-discuz-compatibility-issues-with-google-chrome/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Js计算时间差</title>
		<link>http://www.uyun.com/2008/04/js-calculate-the-time-difference/</link>
		<comments>http://www.uyun.com/2008/04/js-calculate-the-time-difference/#comments</comments>
		<pubDate>Fri, 11 Apr 2008 10:44:12 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAJX&UI]]></category>

		<guid isPermaLink="false">http://www.uyun.com/?p=429</guid>
		<description><![CDATA[跟之前做群组的时候用的php相互对应，呵呵 Demo：  js计算时间差]]></description>
			<content:encoded><![CDATA[<p>跟之前做群组的时候用的php相互对应，呵呵</p>
<p>Demo：  <a href="http://www.uyun.com/wp-content/uploads/2008/04/time.html" title="js计算时间差">js计算时间差</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uyun.com/2008/04/js-calculate-the-time-difference/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JS分页类</title>
		<link>http://www.uyun.com/2007/01/js-paging-class/</link>
		<comments>http://www.uyun.com/2007/01/js-paging-class/#comments</comments>
		<pubDate>Tue, 09 Jan 2007 07:55:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAJX&UI]]></category>

		<guid isPermaLink="false">http://www.uyun.com/?p=297</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<p><?php<br />
/**<br />
 * filename: page.js<br />
function showpage(nowpage){<br />
    page.construct(1000,20,'jspage.php?page=',nowpage);<br />
    document.write(page.show(1));<br />
}<br />
   开启AJAX：<br />
function ajaxpage(nowpage){<br />
    page.construct(1000,20,'ajax.php?page=',nowpage,true,'ajax_page');<br />
    document.write(page.show(1));<br />
}<br />
   采用继承自定义分页显示模式：<br />
function mypage(nowpage){<br />
    page.construct(1000,20,'jspage.php?page=',nowpage);<br />
    page._next_page='>&#8216;;<br />
    page._pre_page=&#8217;<';<br />
    page._first_page='<<';<br />
    page._last_page='>>&#8217;;<br />
    page._is_ajax=false;<br />
    document.write(page._first()+&#8217; &#8216;+page._pre()+&#8217; &#8216;+page._next()+&#8217; &#8216;+page._last());<br />
}<br />
 */<br />
var page={<br />
    _pagebarnum    :    10,<br />
    _totalpage    :    1,<br />
    _nowpage    :    1,<br />
    _pageurl    :    &#8221;,//eg. &#8216;/index.php?pagename=&#8217; or &#8216;/index.php?id=1&#038;pagename=&#8217;<br />
    _is_ajax    :    false,<br />
    _ajax_page    :    &#8221;,</p>
<p>    /**setting*/<br />
    _next_page    :    &#8216;>&#8217;,<br />
    _pre_page    :    &#8216;<',<br />
    _first_page    :    '首页',<br />
    _last_page    :    '尾页',<br />
    _text_left    :    '[',<br />
    _text_right    :    ']',<br />
    _pagebarnum    :    10,</p>
<p>    /**<br />
      * 构造函数<br />
    */<br />
    construct:function(total,perpage,pageurl,nowpage,is_ajax,ajax_page){<br />
        this._pageurl=pageurl;<br />
        if(nowpage!=null &#038;&#038; nowpage!='')this._nowpage=parseInt(nowpage);<br />
        this._totalpage=Math.ceil(total/perpage);<br />
        if(is_ajax!=null &#038;&#038; is_ajax!=''){<br />
            this._is_ajax=is_ajax;<br />
            this._ajax_page=ajax_page;<br />
        }<br />
    },<br />
    /**<br />
      * 获取下一页<br />
    */<br />
    _next:function(style){<br />
        if(this._nowpage
<this._totalpage){<br />
            return this._getlink(this._nowpage+1,this._next_page,this._getstyle(style));<br />
        }<br />
        return '<span'+this._getstyle(style)+'>&#8216;+this._next_page+&#8217;</span>&#8216;;<br />
    },<br />
    /**<br />
      * 获取上一页<br />
    */<br />
    _pre:function(style){<br />
        if(this._nowpage>1){<br />
            return this._getlink(this._nowpage-1,this._pre_page,this._getstyle(style));<br />
        }<br />
        return &#8216;<span'+this._getstyle(style)+'>&#8216;+this._pre_page+&#8217;</span>&#8216;;<br />
    },<br />
    /**<br />
      * 获取第一页<br />
    */<br />
    _first:function(style){<br />
        if(this._nowpage!=1){<br />
            return this._getlink(1,this._first_page,this._getstyle(style));<br />
        }<br />
        return &#8216;<span'+this._getstyle(style)+'>&#8216;+this._first_page+&#8217;</span>&#8216;;<br />
    },<br />
    /**<br />
      * 获取最后一页<br />
    */<br />
    _last:function(style){<br />
        if(this._nowpage!=this._totalpage){<br />
            return this._getlink(this._totalpage,this._last_page,this._getstyle(style));<br />
        }<br />
        return &#8216;<span'+this._getstyle(style)+'>&#8216;+this._last_page+&#8217;</span>&#8216;;<br />
    },<br />
    /**<br />
      * 获取显示的分页栏,默认当前页面在最前面<br />
      * @param style 未选中的风格<br />
      * @param nowstyle 当前页面的风格<br />
    */<br />
    _pagebar:function(style,nowstyle){<br />
        var plus=Math.ceil(this._pagebarnum/2);<br />
        if(this._pagebarnum-plus+this._nowpage>this._totalpage)plus=this._nowpage+this._pagebarnum-this._totalpage;<br />
        var begin=this._nowpage-plus+1;<br />
        if(begin<1)begin=1;<br />
        var returnstr='';<br />
        for(i=begin;i<begin+this._pagebarnum;i++){<br />
            if(i<=this._totalpage){<br />
                if(i==this._nowpage){<br />
                    returnstr+=this._text_left+'<span'+this._getstyle(nowstyle)+'>&#8216;+i+&#8217;</span>&#8216;+this._text_right;<br />
                }else{<br />
                    returnstr+=this._text_left+this._getlink(i,i,this._getstyle(style))+this._text_right;<br />
                }<br />
            }else{<br />
                break;<br />
            }<br />
        }<br />
        return returnstr;<br />
    },<br />
    /**<br />
      * 显示下拉列表<br />
    */<br />
    _select:function(){<br />
        var returnstr=&#8217;<br />
<select onchange="';<br />
        if(this._is_ajax){<br />
            //ajax<br />
            returnstr+=this._ajax_page+"('"+this._pageurl+"'+this.options[this.selectedIndex].value)";<br />
        }else{<br />
            returnstr+="window.location.href='"+this._pageurl+"'+this.options[this.selectedIndex].value";<br />
        }<br />
        returnstr+='">&#8216;;<br />
        for(i=1;i<=this._totalpage;i++){<br />
            if(i==this._nowpage){<br />
                returnstr+='<br />
<option value="'+i+'" selected>&#8216;+i+&#8217;</option>
<p>&#8216;;<br />
            }else{<br />
                returnstr+=&#8217;<br />
<option value="'+i+'">&#8216;+i+&#8217;</option>
<p>&#8216;;<br />
            }<br />
        }<br />
        return returnstr+&#8217;</select>
<p>&#8216;;<br />
    },</p>
<p>    /**<br />
      * 返回结果<br />
    */<br />
    show:function(mode){<br />
        if((mode==null)||(mode==&#8221;))mode=1;<br />
        switch(mode)<br />
        {<br />
            case 1:<br />
                this._pre_page=&#8217;上一页&#8217;;<br />
                this._next_page=&#8217;下一页&#8217;;<br />
                return this._pre()+this._pagebar()+this._next()+this._select();<br />
            case 2:<br />
                this._pre_page=&#8217;上一页&#8217;;<br />
                this._next_page=&#8217;下一页&#8217;;<br />
                this._first_page=&#8217;首页&#8217;;<br />
                this._last_page=&#8217;尾页&#8217;;<br />
                return this._first()+this._pre()+&#8217;[第'+this._nowpage+'页]&#8216;+this._next()+this._last()+&#8217;第&#8217;+this._select()+&#8217;页&#8217;;<br />
            case 3:<br />
                this._pre_page=&#8217;上一页&#8217;;<br />
                this._next_page=&#8217;下一页&#8217;;<br />
                return this._first()+&#8217; &#8216;+this._pre()+this._next()+&#8217; &#8216;+this._last()+this._select();<br />
            case 4:<br />
                this._pre_page=&#8217;上一页&#8217;;<br />
                this._next_page=&#8217;下一页&#8217;;<br />
                return this._first()+&#8217; &#8216;+this._pre()+this._pagebar()+this._next()+&#8217; &#8216;+this._last()+this._select();<br />
        }<br />
    },<br />
/**private&#8212;&#8211;*/<br />
    /**<br />
      * 获取页面的链接<br />
      * @pageno 页面值。第几页<br />
      * @pagename 页面显示的文字<br />
      * @style 显示的风格<br />
      * @return 分页链接<br />
    */<br />
    _getlink:function(pageno,pagename,style){<br />
        if((pagename==null)||(pagename==&#8221;))pagename=pageno<br />
        if(this._is_ajax){<br />
            //ajax模式<br />
            return &#8216;<a href="javascript:'+this._ajax_page+'(''+this._pageurl+pageno+'')"'+style+'>&#8216;+pagename+&#8217;</a>&#8216;;<br />
        }else{<br />
            //一般模式<br />
            return &#8216;<a href="'+this._pageurl+pageno+'"'+style+'>&#8216;+pagename+&#8217;</a>&#8216;;<br />
        }<br />
    },<br />
    /**<br />
      * 获取风格<br />
    */<br />
    _getstyle:function(style){<br />
        if(style!=null &#038;&#038; style!=&#8221;){<br />
            style=&#8217; class=&#8221;&#8216;+style+&#8217;&#8221;&#8216;;<br />
        }else{<br />
            style=&#8221;;<br />
        }<br />
        return style;<br />
    }<br />
}<br />
?></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uyun.com/2007/01/js-paging-class/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IE and getElementsByName</title>
		<link>http://www.uyun.com/2006/10/ie-and-getelementsbyname/</link>
		<comments>http://www.uyun.com/2006/10/ie-and-getelementsbyname/#comments</comments>
		<pubDate>Wed, 18 Oct 2006 00:59:13 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAJX&UI]]></category>

		<guid isPermaLink="false">http://www.uyun.com/?p=238</guid>
		<description><![CDATA[在IE中，是不能通过getElementsByName来获取div、td等元素的（奇怪的是IE会将id当name）。  function getElementsByName_iefix(tag, name) {   var elem = document.getElementsByTagName(tag);   var arr = new Array();   for(i = 0, iarr = 0; i &#60; elem.length; i++) {    att = elem[i].getAttribute(”name”);    if(att == name) {     arr[iarr] = elem[i];     iarr++;    }   }   return arr;  }]]></description>
			<content:encoded><![CDATA[<p>在IE中，是不能通过getElementsByName来获取div、td等元素的（奇怪的是IE会将id当name）。</p>
<p> function getElementsByName_iefix(tag, name) {<br />
  var elem = document.getElementsByTagName(tag);<br />
  var arr = new Array();<br />
  for(i = 0, iarr = 0; i &lt; elem.length; i++) {<br />
   att = elem[i].getAttribute(”name”);<br />
   if(att == name) {<br />
    arr[iarr] = elem[i];<br />
    iarr++;<br />
   }<br />
  }<br />
  return arr;<br />
 }</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uyun.com/2006/10/ie-and-getelementsbyname/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>javacript 万能祛错</title>
		<link>http://www.uyun.com/2006/10/qu-wrong-javacript-universal/</link>
		<comments>http://www.uyun.com/2006/10/qu-wrong-javacript-universal/#comments</comments>
		<pubDate>Sat, 07 Oct 2006 18:34:21 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAJX&UI]]></category>
		<category><![CDATA[大杂烩]]></category>

		<guid isPermaLink="false">http://www.uyun.com/?p=232</guid>
		<description><![CDATA[killerror.js代码很简单就一个function function killErrors() { return true; } window.onerror = killErrors;]]></description>
			<content:encoded><![CDATA[<p id="fp"><a name="baidusnap0" title="baidusnap0"></a><a href="http://www.uyun.com/wp-content/uploads/2006/09/killerror.js" id="p218"><strong style="color: black; background-color: #ffff66">killerror.js</strong></a>代码很简单就一个function</p>
<p>function killErrors() {<br />
return true;<br />
}<br />
window.onerror = killErrors;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uyun.com/2006/10/qu-wrong-javacript-universal/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>很不错的变换提示信息效果,找了N久</title>
		<link>http://www.uyun.com/2006/09/very-good-tips-transform-effect-a-long-time-to-find-a-n/</link>
		<comments>http://www.uyun.com/2006/09/very-good-tips-transform-effect-a-long-time-to-find-a-n/#comments</comments>
		<pubDate>Tue, 26 Sep 2006 01:31:04 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAJX&UI]]></category>
		<category><![CDATA[大杂烩]]></category>

		<guid isPermaLink="false">http://www.uyun.com/?p=225</guid>
		<description><![CDATA[JQ-innerfade.zip http://medienfreunde.com/lab/innerfade/]]></description>
			<content:encoded><![CDATA[<p><a id="p224" href="http://www.uyun.com/wp-content/uploads/2006/09/jq-innerfade.zip">JQ-innerfade.zip</a></p>
<p><a href="http://medienfreunde.com/lab/innerfade/" target="_blank">http://medienfreunde.com/lab/innerfade/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uyun.com/2006/09/very-good-tips-transform-effect-a-long-time-to-find-a-n/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>　十分钟学会 xajax</title>
		<link>http://www.uyun.com/2006/09/10-minutes-society-xajax/</link>
		<comments>http://www.uyun.com/2006/09/10-minutes-society-xajax/#comments</comments>
		<pubDate>Thu, 21 Sep 2006 19:17:59 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAJX&UI]]></category>
		<category><![CDATA[大杂烩]]></category>

		<guid isPermaLink="false">http://www.uyun.com/?p=219</guid>
		<description><![CDATA[者按: xajax 最大的特点是他采用了xml response，这样我们可以用php来布置，处理异步传送数据之后，网页内容的更新。而这些操作其它的ajax 框架都是由js来完成的的。xajax 使我们只需要写一些php函数，就可以实现。 所有学好xajax的关健在于熟练掌握 xajaxresponse 类。tutorials:learn xajax in 10 minutes 教程:十分钟学会 xajax using xajax in a php script 一个使用的xajax的php脚本: include the xajax class library: 调用xajax类库: require_once(&#8220;xajax.inc.php&#8221;); instantiate the xajax object: 实例化xajax对象 $xajax = new xajax(); register the names of the php functions you want to be able to call through xajax: 注册一个你想用xajax来调用的php函数名(与javascript中的函数名相对应 [...]]]></description>
			<content:encoded><![CDATA[<p><strong>者按:</strong> xajax 最大的特点是他采用了xml response，这样我们可以用php来布置，处理异步传送数据之后，网页内容的更新。而这些操作其它的ajax 框架都是由js来完成的的。xajax 使我们只需要写一些php函数，就可以实现。<br />
所有学好xajax的关健在于熟练掌握 xajaxresponse 类。<strong>tutorials:learn xajax in 10 minutes<br />
教程:十分钟学会 xajax</strong></p>
<p>using xajax in a php script<br />
一个使用的xajax的php脚本:</p>
<p>include the xajax class library:<br />
调用xajax类库:</p>
<p><span class="code">require_once(&#8220;xajax.inc.php&#8221;);</span></p>
<p>instantiate the xajax object:<br />
实例化xajax对象</p>
<p><span class="code">$xajax = new xajax();</span></p>
<p>register the names of the php functions you want to be able to call through xajax:<br />
注册一个你想用xajax来调用的php函数名(与javascript中的函数名相对应 xajax_myfunction)</p>
<p><span class="code">$xajax->registerfunction(&#8220;myfunction&#8221;);</span></p>
<p>write the php functions you have registered and use the xajaxresponse object to return xml commands from them:<br />
编写那个你刚刚已经注册的php函数，并从中用 xajaxresponse 对象来返回xml指令集</p>
<p><span class="code">function myfunction($arg)<br />
{<br />
    // do some stuff based on $arg like query data from a database and<br />
    // put it into a variable like $newcontent<br />
    //对参数$arg做一些诸如：从数据库中获取数据后定义给$newcontent 变量的基本操作<br />
   <br />
    // instantiate the xajaxresponse object<br />
    //实例化 xajaxresponse 对象<br />
    $objresponse = new xajaxresponse();<br />
   <br />
    // add a command to the response to assign the innerhtml attribute of<br />
    // the element with id=&#8221;someelementid&#8221; to whatever the new content is<br />
    // 在响应实例中添加一个命令，用来将id为someelementid的innerhtml元素属性<br />
    // 变为任何新的内容.<br />
    $objresponse->addassign(&#8220;someelementid&#8221;,&#8221;innerhtml&#8221;, $newcontent);<br />
   <br />
    //return the xml response generated by the xajaxresponse object<br />
    //返回由 xajaxresponse 对象所生成的xml 响应<br />
    return $objresponse->getxml();<br />
}</span></p>
<p>before your script sends any output, have xajax handle any requests:<br />
在你脚本传送出任何东西前,xajax都要处理所有请求</p>
<p><span class="code">$xajax->processrequests();</span></p>
<p>between your tags, tell xajax to generate the necessary javascript:<br />
在该页的和标签之间插入下列代码，使xajax实例可以自己生成所必需的js</p>
<p><span class="code">< ?php $xajax->printjavascript(); ?></span></p>
<p>call the function from a javascript event or function in your application:<br />
从你程序中的js 事件或函数调用之前你已经注册过的相对应函数</p>
<p><span class="code"></p>
<div id="someelementid"></div>
<p><button onclick="xajax_myfunction(someargument);"></button></span></p>
<p>that&#8217;s it. xajax takes care of most everything else. your biggest task is writing the php functions and returning xajax xml responses from them&#8211; which is made extremely easy by the xajaxresponse class.<br />
只需这些步骤。其他的交由xajax 去处理吧。你最主要的任务只是编写php中的函数，只要使它们能返回xajax的xml响应就行了，而这步可以用xajaxresponse 类轻松解决。</p>
<p>how do i update my content asynchronously?<br />
如何异步更新我的内容?</p>
<p>perhaps the most unique feature of xajax is the xajaxresponse class. other ajax libraries require you to write your own callback handlers in javascript to process the data returned from an asynchronous request and to update the content. xajax, on the other hand, allows you to easily control your content from php. the xajaxresponse class allows you to create xml instructions to return to your application from your php functions. the xml is parsed by xajax message pump and the instructions tell xajax how to update the content and state of your application. the xajaxresponse class currently offers a number of useful commands, such as assign, which sets the specified attribute of an element in your page; append, which appends data to the end of the specified attribute of an element in your page; prepend, which prepends data to the beginning of the specified attribute of an element in your page; replace, which searches for and replaces data in the specified attribute of an element in your page; script, which runs the supplied javascript code; and alert, which shows an alert box with the supplied message text.<br />
xajax最独特的长处也许就是 xajaxresponse class了。其它的ajax库需要你亲自写用js写回调的句柄，来处理一个异步请求而且得到的数据，并更新其内容。另一方面，xajax只需你简单的控制好php的内容。然后通过xajaxresponse 类，使在你的php函数中创建xml指令返回给你的程序。xml将被 xajax的信息(pump)解析。其指令告知xajax将如何更新内容和你程序中的位置。现在xajaxresponse 已经提供了大量并有帮助的指令：<a href="http://www.flaspx.com/weblog/blog.php?bid=16" target="_blank">http://www.flaspx.com/weblog/blog.php?bid=16</a>  (略&#8230;付上详细的xajaxresponse 类说明)</p>
<p>a single xml response may contain multiple commands, which will be executed in the order they were added to the response. for example, let&#8217;s say that a user clicks on a button in your application. the onclick event calls the javascript wrapper for a php function. that wrapper sends an asynchronous request to the server through xmlhttprequest where xajax calls the php function. the php function does a database lookup, some data manipulation, or serialization. you use the xajaxresponse class to generate an xajax xml response containing multiple commands to send back to the xajax message pump to be executed:<br />
一个单独xml响应可以包含多条命令，他们将依据加入响应的顺序来被执行。举个例子吧，让我们假设一个用户在你的程序中按下了一个按钮。这个按下的事件将调用被js封装好的php函数。这个封包通过 xmlhttprequest 发出了一个异步请求给服务器，让xajax调用php函数。这个php函数做了一个查询数据库，一些数据处理或排序的操作。而你要用 xajaxresponse 类来产出一个 xajax 的xml响应，它包含了多条命令。送给xajax 信息pump来执行:</p>
<p><span class="code" /><span class="code">$objresponse = new xajaxresponse();</p>
<p>$objresponse->addassign(&#8220;myinput1&#8243;,&#8221;value&#8221;,$datafromdatabase);<br />
$objresponse->addassign(&#8220;myinput1&#8243;,&#8221;style.color&#8221;,&#8221;red&#8221;);<br />
$objresponse->addappend(&#8220;mydiv1&#8243;,&#8221;innerhtml&#8221;,$datafromdatabase2);<br />
$objresponse->addprepend(&#8220;mydiv2&#8243;,&#8221;innerhtml&#8221;,$datafromdatabase3);<br />
$objresponse->addreplace(&#8220;mydiv3&#8243;,&#8221;innerhtml&#8221;,&#8221;xajax&#8221;,&#8221;<strong>xajax</strong>&#8220;);<br />
$objresponse->addscript(&#8220;var x = prompt(\&#8221;enter your name\&#8221;);&#8221;);</p>
<p>return $objresponse->getxml();</p>
<p></span>the xajax message pump would parse the xml message and perform the following:<br />
xajax信息pump将会解析下列xml信息，并执行以下操作:</p>
<p>the value of the element with id myinput1 would be assigned to the data in $datafromdatabase.<br />
将变量$datafromdatabase赋值给id为myinput1的value元素。</p>
<p>the color of the text in the element with id myinput1 would be changed to red.<br />
id为myinput1的字体颜色元素将被换成红色.</p>
<p>the data in $datafromdatabase2 would be appended to the innerhtml of the element with id mydiv1.<br />
$datafromdatabase2,此数据将被追加到id为mydiv1的innerthml元素的结束部位</p>
<p>the data in $datafromdatabase3 would be prepended to the innerhtml of the element with id mydiv2.<br />
$datafromdatabase3,此数据将被添加到id为mydiv2的innerthml元素的开始部位</p>
<p>all occurrences of &#8220;xajax&#8221; in the innerhtml of the element with id mydiv3 would be replaced with &#8220;xajax&#8221;; making all of the instances of the word xajax appear bold.<br />
id为mydiv3的innerhtml元素中所有的 &#8220;xajax&#8221; 将被替换成 &#8220;xajax&#8221;,使所有的xajax以粗体显示。</p>
<p>a prompt would be displayed asking for the user&#8217;s name and the value returned from the prompt would be placed into a javascript variable named x.<br />
会有一个输入框弹出，并询问用户姓名。从输入框取得的变量将转换成js变量并命名为x。<br />
all of this is implemented on the server side in the php function by forming and returning an xajax xml response.<br />
所有这些组成了php函数在服务器端被执行，然后传回一个xml响应。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uyun.com/2006/09/10-minutes-society-xajax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>AJAX框架汇总</title>
		<link>http://www.uyun.com/2006/09/ajax-framework-summary/</link>
		<comments>http://www.uyun.com/2006/09/ajax-framework-summary/#comments</comments>
		<pubDate>Wed, 20 Sep 2006 17:41:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAJX&UI]]></category>
		<category><![CDATA[大杂烩]]></category>

		<guid isPermaLink="false">http://www.uyun.com/?p=200</guid>
		<description><![CDATA[引 此文原出于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 [...]]]></description>
			<content:encoded><![CDATA[<h1>引</h1>
<p>此文原出于<a href="http://www.ajaxpatterns.org/AJAXFrameworks">AJAX Patterns网站的一篇《Ajax Frameworks》的wiki文章</a>，很早前我就注意到，后来在国内也有人翻译了，不过最近发现此wiki还是在不断添加维护中，截止此文发布前，作者又添加了好几个新诞生的AJAX开发工具，所以我决定重新翻译一遍，并且时常注意原文发布状态，一有新的内容立马也翻译过来，做到同步:)</p>
<p>此翻译稿很大一部分内容出自<a href="http://www.baidu.com/baidu?word=AJAX%B5%C4%D3%A6%D3%C3%B3%CC%D0%F2%BC%DC%B9%B9%BB%E3%D7%DC&#038;tn=myie2dg">国内出现的那个先前版本</a>，我只是对新加入的几项进行了翻译，并且对我熟悉的产品项着重介绍了一下，以后我会抽时间收集文中提到AJAX工具相关的文章，尽量将内容介绍和功能点评做到全面详细点。所以请关注和准备用AJAX做开发的朋友关注这篇文章，我会时常更新的。原文因为是由一个wiki系统维护，所以在所难免出现参差不齐，风格上也有不统一的情况，翻译时我也是参照原文原封不动的挪了过来，以后我会抽时间改良下。</p>
<hr style="margin: 10px" />
<h1>翻译正文</h1>
<p>基于浏览器的应用框架一般分为两种：</p>
<ul>
<li>Aplication frameworks:提供了浏览器功能，但其最著名的还是在于通过窗口生成组件建立桌面GUI。</li>
<li>Infrastructural frameworks:提供基本的框架功能和轻便式浏览器端操作，让开发者去创建具体应用，主要功能包括：
<ul>
<li>基于XMLHttpRequest组件的浏览器交互功能</li>
<li>XML解析和操作功能</li>
<li>根据XMLHttpRequest的返回信息进行相应的DOM操作</li>
<li>一些特殊情况下，和其他的浏览器端技术如Flash（或Java Applets）等集合到一起应用</li>
</ul>
</li>
</ul>
<p>基于服务器端的应用框架通常以下面两种方式工作(尽管它们根据不同的语言进行了分类)</p>
<ul>
<li>HTML/JS Generation(HTML/JS生成)：通过服务器端生成HTML和JS代码在传递给浏览器端进行直接运行</li>
<li>远程交互：JavaScript调用服务器端函数(例如调用Java函数)并返回给JavaScript的回调句柄，或者请求服务器端数据信息，例如Session信息，数据库查询等。</li>
</ul>
<p> </p>
<h1>1. <a name="1" />Pure Javascript: Application Frameworks</h1>
<h3>1.1 <a name="1.1" />Bindows (成立于2003年)</h3>
<p><a href="http://www.backbase.com/"><font color="#006699">Backbase</font></a>是一个通过DHTML、JavaScript、CSS和HTML等技术强劲联合起来的一套完整的Windows桌面式的WEB应用程序解决方案。Bindows无需下载安装客户端支撑组件（如Java、ActiveX或Flash），仅需一个浏览器。纯OO的理念体现在Bindows任何地方，Bindows或许是笔者见过的最完整最强大的AJAX应用程序平台。<br />
Bindows是商业程序的，使用了来自于MB的技术(总部位于GA USA，主要开发中心在瑞典，成立于2002年)。</p>
<p>Bindows框架提供的功能和特性有：</p>
<ul>
<li>基于面相对象技术的类和API</li>
<li>一套完整的Windows桌面系统，支持各种特性窗口模式，包括菜单、表单、表格、滑动条、测量仪器窗口和其他一些Windows窗口特性支持。</li>
<li>是开发zero-footprint(零空间占用)SOA客户端应用程序首选工具包</li>
<li>本机的XML，SOAP和XML-RPC支持</li>
<li>单用户到企业级开发的支持</li>
<li>内建的完美的AJAX支持</li>
</ul>
<p>Bindows开发环境：</p>
<ul>
<li>支持企业级规模的项目开发</li>
<li>跨浏览器、跨OS平台的支持</li>
<li>不受服务器结构限制</li>
<li>良好的与新的、现有的资源互操作性</li>
<li>统一的开发接口</li>
</ul>
<p> </p>
<h3>1.2 <a name="1.2" />BackBase (成立于2003年)</h3>
<p><a href="http://www.backbase.com/"><font color="#006699">BackBase</font></a>是一个完整的浏览器端框架，提供了丰富的浏览器操作功能，以及对.NET和JAVA平台的集成。<br />
商业化产品，来自于Backbase B.V(总部在Amsterdam，成立于2003年)。</p>
<p> </p>
<h3>1.3 <a name="1.3" />DOJO (开发中,成立于2004年9月)</h3>
<p>DOJO提供完整的轻量级窗口组件和浏览器-服务器消息映射支持</p>
<ul>
<li>提供创建自定义Javascript窗口组件的框架支持</li>
<li>预制的丰富的窗口类型库</li>
<li>B/S消息映射支持——XMLHttpRequest和其他机制</li>
<li>支持浏览器中的URL操纵功能</li>
<li>开源许可(<a href="http://opensource.org/licenses/afl-2.1.php"><font color="#003399">Academic Free License 2.1</font></a>)，由<a href="http://www.jot.com/"><font color="#003399">JotSpot</font></a>的<a href="http://alex.dojotoolkit.org/"><font color="#003399">Alex Russell</font></a>所领导。</li>
</ul>
<h3>1.4 <a name="1.4" />Open Rico (开发中;成立于2005年5月;基于早期的一个proprietary 框架)</h3>
<p><a href="http://openrico.org/demos.page"><font color="#003399">Open Rico</font></a>是一个支持Ajax架构和用户交互的多用途框架。</p>
<ul>
<li>一个XMLHttpRequest response能被一个或多个的DOM对象，或者Javascript对象调用。</li>
<li>支持拖拽操作</li>
<li>支持基于AJAX的动画模式，如缩放和变换等</li>
<li>基于Behaviors的操作库</li>
<li><a href="http://www.mirimar.net/mailbrowser/"><font color="#003399">使用指南</font></a>，由RussMirimar的Yonah提供</li>
<li>开源。源于Sabre航空公司解决方案，由<a href="http://looksgoodworkswell.blogspot.com/"><font color="#003399">Bill Scott</font></a>，Darren James及另外一些人维护。</li>
</ul>
<p> </p>
<h3>1.5 <a name="1.5" />qooxdoo (开发中; 成立于2005年5月)</h3>
<p><a href="http://qooxdoo.sourceforge.net/"><font color="#003399">qooxdoo</font></a>，是另一个发展迅猛的应用框架，提供广泛的UI支持，正在开发基础架构等特性。</p>
<ul>
<li>基础结构特性：
<ul>
<li>能轻易的捕获和操纵DOM事件</li>
<li>支持调试</li>
<li>支持一个时间操作的Timer类</li>
<li>Getter/Setter支持</li>
</ul>
</li>
<li>UI:
<ul>
<li>窗口组件库和框架</li>
<li>界面布局管理</li>
<li>图像缓存和透明PNG图片处理</li>
</ul>
</li>
<li>开源(LGPL).</li>
</ul>
<h3><a name="1.6" />1.6 Tibet (开发中; 创建于2005年6月)</h3>
<p><a href="http://www.technicalpursuit.com/"><font color="#006699">Tibet</font></a>提供了大量的易移植和完整的JavaScript API，通过这些可以快速生成大量的客户端代码，Tibet自称是企业级AJAX。</p>
<ul>
<li>远程脚本调用封装在XMLHttpRequest中</li>
<li>URI支持</li>
<li>支持所有的HTTP事件，不再仅仅是GET和POST</li>
<li>低级的协议-File://和WebDav也可以当作HTTP正常使用</li>
<li>Web Services调用支持，包括SOAP、XML-RPC等等</li>
<li>大型的Javascript对象库</li>
<li>多种多样的XML操作支持</li>
<li>IDE和开发工具</li>
<li>开源协议(OSI)</li>
</ul>
<h3><a name="1.7" />1.7 AJFORM (创建于2005年6月)</h3>
<p><a href="http://redredmusic.com/brendon/ajform/"><font color="#006699">AJFORM</font></a>是一个极易上手的AJAX框架，被用来编写入门级的AJAX代码，提供有以下功能：</p>
<ul>
<li>三步安装</li>
<li>自动支持任意HTML表单元素</li>
<li>几乎无需编码即可实现AJAX</li>
</ul>
<h1><a name="2" />2 Pure Javascript: Infrastructural Frameworks</h1>
<h3><a name="2.1" />2.1 AjaxCaller(创建于2005年5月，目前是Alpha版)</h3>
<p><a href="http://ajaxify.com/run/testAjaxCaller/"><font color="#003399">AjaxCaller</font></a>是一个具有多线程安全访问的XMLHttpRequest组件，主要针对Ajax开发新手，目前仍处于alpha开发阶段，仅在<a href="http://www.ajaxpatterns.org/"><font color="#003399">AjaxPatterns</font></a>的在线搜索范例中使用了这个程序。</p>
<ul>
<li>用明文或者XML结构的数据实现和服务器的交互(GET/POST/PUT/DELETE)</li>
<li>支持XMLHttRequest对象的构析(销毁对象，C++支持内存对象的构析操作)</li>
<li>支持Response的高速缓存(尚在计划中)</li>
<li>简单的库文件代码易于新手学习使用，并且支持脚本调试</li>
<li>开源协议</li>
</ul>
<h3><a name="2.2" />2.2 Flash JavaScript Integration Kit</h3>
<p><a href="http://www.osflash.org/doku.php?id=flashjs"><font color="#006699">The Flash JavaScript Integration Kit</font></a>可以使Flash和Javascript脚本实现相互集成。</p>
<ul>
<li>可以实现在JavaScript中调用Flash ActionScript脚本，反之亦然。</li>
<li>几乎支持双方主要数据类型的在不同环境中的传递调用。</li>
<li>开源协议，有几个Flash开源爱好者维护。</li>
</ul>
<h3><a name="2.3" />2.3 Google AJAXSLT (2005年6月发行)</h3>
<p><a href="http://goog-ajaxslt.sourceforge.net/"><font color="#003399">Google AJAXSLT</font></a>，是一个Javascript框架，用来执行XSLT转换以及XPath查询。</p>
<ul>
<li>目前在Google Map上就使用了这个。</li>
<li>开源协议(BSD)</li>
</ul>
<h3><a name="2.4" />2.4 HTMLHttpRequest(Beta版；创建于2005年)</h3>
<p><a href="http://www.twinhelix.com/javascript/htmlhttprequest/"><font color="#003399">HtmlHttpRequest</font></a>最大的特点就是运用XMLHttpRequest对象和标准HTML标签IFrame来实现最大限度的跨浏览跨平台的AJAX支持，其原理是在支持XMLHttpRequest的浏览器上调用XMLHttp，如果不支持，就用IFrame来模拟实现异步交互。</p>
<ul>
<li>目前支持的浏览器：IE6/Win, IE5.5/Win, IE5/Win, IE4/Win, Mozilla/Win, Opera7/Win, Safari/Mac, IE5/Mac</li>
<li>尚未测试的浏览器：IE4/Mac, Mozilla/Mac, Opera/Other, Konqueror/Linux。</li>
<li>开源协议(LGPL)</li>
</ul>
<h3><a name="2.5" />2.5 Interactive Website Framework (创建于2005年)</h3>
<p><a href="http://sourceforge.net/projects/iwf/"><font color="#003399">Interactive Website Framework</font></a>定位在浏览器中支持各种各样的AJAX基础应用的开源项目。自称是通过JavaScript、CSS、XML和HTML实现高性能的交互式WEB框架，包括一个可定制易读的XML解析器。实际上，IWF是一个AJAX的基础框架，并且还包括一些通用脚本代码。</p>
<ul>
<li>实现了线程安全的XMLHttpRequest</li>
<li>对XML Document进行封装，以便创建更具有可读性的代码：<br />
<blockquote><p>var node = doc.groceries.frozen[0].pizza[0].size;</p></blockquote>
<p>封装后的数据读取</p>
<blockquote><p>var node = doc.documentElement.firstChild.firstChild.getAttribute(&#8220;size&#8221;);</p></blockquote>
<p>原始的DOM操作读取</li>
<li>开源协议</li>
</ul>
<h3><a name="2.6" />2.6 LibXMLHttpRequest (2003年6月发布)</h3>
<p><a href="http://www.whitefrost.com/servlet/connector?file=reference/2003/06/17/libXmlRequest.html"><font color="#003399">libXmlRequest</font></a>是一个小型XMLHttpRequest封装包</p>
<ul>
<li>用getXML()和postXML()两个事件简化XMLHttpReuqest调用</li>
<li>支持XMLHttpRequest对象池</li>
<li>Response缓存处理</li>
<li>源码可以使用，但是有版权保护。</li>
</ul>
<h3><a name="2.7" />2.7 MAJAX</h3>
<p><a href="http://unips.sourceforge.net/devblog/?page_id=2"><font color="#003399">MAJAX</font></a>是另一个非常小巧的HttpRequest封装包，为收发字符型信息提供简单接口，并为每步动作设置回调界面。</p>
<h3><a name="2.8" />2.8 RSLite (x)</h3>
<p><a href="http://www.ashleyit.com/rs/main.htm"><font color="#003399">RSLite</font></a>是一个XMLHttpRequest封装组件，作为Brent Ashley的JSRS(JavaScript Remote Scripting)其中的一部分功能单独发布。详情可以看JSRS的介绍</p>
<h3><a name="2.9" />2.9 Sack(开发中，成立于2005年5月)</h3>
<p><a href="http://twilightuniverse.com/2005/05/sack-of-ajax/"><font color="#003399">Sack</font></a>也是一个很有名字的微型XMLHttpRequest封装包。调用者可以自定义回调函数或者是DOM对象。借助于回调DOM对象，可以把Response回来的数据直接以文本的方式嵌入DOM中。</p>
<h3><a name="2.10" />2.10 Sarissa (发布于2003年2月)</h3>
<p><a href="http://sarissa.sf.net/"><font color="#003399">Sarissa</font></a>是一个JavaScript API，封装了在浏览器端独立调用XML的功能。</p>
<ul>
<li>可移植的XMLHttpRequest对象创造</li>
<li>可移植的XPath查询</li>
<li>可移植的DOM操控</li>
<li>可移植的XSLT</li>
<li>可移植的XML序列化</li>
<li>开源协议(GPL2.0和LGPL2.1)</li>
</ul>
<h3><a name="2.11" />2.11 XHConn (2005年4月发布)</h3>
<p><a href="http://xkr.us/code/javascript/XHConn/"><font color="#003399">XHConn</font></a>也是一个小型的XMLHttpRequest封装库。笔者也使用改良过的XHConn，其特点就是调用简单，代码也清晰易读。</p>
<ul>
<li>例子：<br />
<blockquote><p>new XHConn().connect(&#8220;mypage.php&#8221;，&#8221;POST&#8221;，&#8221;foo=bar&#038;baz=qux&#8221;，fnWhenDone);</p></blockquote>
</li>
<li>开源协议许可</li>
</ul>
<h1><a name="3" />3 Server-Side: Multi-Language</h1>
<h3><a name="3.1" />3.1 Cross-Platform Asynchronous INterface Toolkit (2005年5月)</h3>
<p><a href="http://cpaint.sourceforge.net/"><font color="#006699">CPAINT</font></a>是一个真正的同时支持PHP和ASP/VBScript脚本的AJAX和JSRS工具包。CPAINT在后台提供你需求的AJAX和JSRS代码，并自动返回到浏览器端相应的Javascript脚本代码，这种方式易于实时反馈需求的WEB应用程序。</p>
<ul>
<li>支持PHP和ASP</li>
<li>所有功能函数都在统一的JavaScript文件中</li>
<li>支持远程脚本和XML</li>
<li>支持本地和远程函数调用</li>
<li>可以创建单个或多个XMLHttp对象</li>
<li>返回给后台的数据即可以是文本也可以是XML/DOM文档对象</li>
<li>支持POST和GET</li>
<li>用服务端代理的方式实现远程函数和数据的访问操作</li>
<li>大部分浏览器中测试正常使用</li>
<li>在GNU、GPL、LGPL开源协议保护下发行</li>
</ul>
<h3><a name="3.2" />3.2 SAJAX (2005年3月)</h3>
<p><a href="http://www.modernmethod.com/sajax/"><font color="#006699">SAJAX</font></a>的实现方式很独特，例如：调用一个javascript方法x_calculateBudget()，将先把响应传到服务器并调用一个Java calculateBudget()方法，然后以javascript方式把值返回到x_calculateBudget_cb()中。SAJAX的名气不错，估计很多人都听过甚至用过，不过缺点就是它的这套映射理论感觉较繁锁，远不如一些轻量级的封装库好用，不过SAJAX最大的特点就是支持的平台丰富，几乎囊括了WEB下常用的编程语言和平台</p>
<ul>
<li>很方便从JavaScript函数映射到服务端代理操作</li>
<li>支持多种平台(ASP/ColdFusion/Io/Lua/Perl/PHP/Python/Ruby)</li>
<li>开源协议</li>
</ul>
<h3><a name="3.3" />3.3 Javascipt Object Notation (JSON) and JSON-RPC</h3>
<p><a href="http://www.crockford.com/JSON/index.html"><font color="#003399">JSON</font></a>是一个&#8221;face-free&#8221; XML，而<a href="http://www.json-rpc.org/"><font color="#003399">JSON-RPC</font></a>是一种远程交互协议，类似于XML-RPC，对JavaScript支持较强</p>
<ul>
<li><a href="http://www.json-rpc.org/impl.xhtml"><font color="#003399">支持多服务端平台</font></a>: Java, Python, Ruby, Perl.</li>
<li>针对不同的平台有不同的包和许可协议, 如<a href="http://oss.metaparadigm.com/jsonrpc/"><font color="#003399">JSON-RPC-Java</font></a>.</li>
</ul>
<h3><a name="3.4" />3.4 JavaScript Remote Scripting(JSRS)(2000年)</h3>
<p><a href="http://www.ashleyit.com/rs/jsrs/test.htm"><font color="#003399">JSRS</font></a>，较经典的远程脚本访问组件，支持将客户端数据通过服务器做代理进行远程的数据/操作交互。</p>
<ul>
<li>支持的浏览器：IE4+，NS4.x，NS6.x，Mozilla，Opera7和Galeon。</li>
<li>服务器端脚本语言支持：ASP，ColdFusion，PerlCGI，PHP,Python和JSP(servlet)。</li>
<li>开源协议。由<a href="http://www.ashleyit.com/"><font color="#003399">Brent Ashley</font></a>提供支持。</li>
</ul>
<h3><a name="3.5" />3.5 Bitkraft for ASP.NET</h3>
<p><a href="http://www.tiggrbitz.com/"><font color="#003399">Bitkraft</font></a>是个基于(.NET)Web框架的CLR(公共语言运行库)，允许用独特的方式创建和操作分布式Web内容。用C#编写，运行在微软的.NET 1.1和Mono框架下，无缝式的客户端-服务器响应方式是它的最大特点。Bitkraft没有使用XML组织数据，而是用JSON代替。</p>
<ul>
<li>支持的浏览器： IE5+, Firefox1+, NS6</li>
<li>服务器端要求：ASP.NET, Mono XSP, Cassini, Apache (modMono) .NET Framework 1.1+</li>
<li>事件驱动</li>
<li>支持同步和异步的远程代理</li>
<li>客户端支持所有的.NET类型或自定义类对象映射到JSON中</li>
<li>用JSON取代XML</li>
<li>免费，开源许可协议</li>
</ul>
<h1><a name="4" />4 Server-Side: Java</h1>
<h3><a name="4.1" />4.1 WebORB for Java (2005年8月)</h3>
<p><a href="http://www.themidnightcoders.com/weborb/aboutWeborb.htm"><font color="#003399">WebORB for Java</font></a>是一个开发AJAX和基于Flash的富客户端应用程序的开发平台。<a href="http://www.themidnightcoders.com/examples"><font color="#003399">在线例子</font></a></p>
<ul>
<li>WebORB包括一个富客户端开发类库。提供简单的在线式API用来绑定或者调用任何Java对象、XML Web Services和EJB</li>
<li>支持异步或同步的事件驱动</li>
<li>不需要在服务端修改任何代码，不需要自定义方法或属性、变量等。不要求设计时指定代理等。</li>
<li>同步调用不需要回调，异步调用需要一个回调方法。</li>
<li>客户端可以向服务端请求指定的活动方式，不需要任何编程就可以把处理结果轻易的转变为状态。</li>
<li>提供一个特定API来处理数据库查询结果-服务器代码能返回DataSet或者DataTable，而客户端以一个类似于RecordSet的JavaScript对象来显示这个结果。该对象提供检索列名和行数据的方法。</li>
<li>支持数据分页技术。客户应用程序能检索页面中的数据。</li>
<li>支持以参数的方式返回所有服务期端数据类型，如primitives, strings, complex types, arrays, native .net collections, remote references</li>
<li>目前有两个版本：标准版(免费)，专业版(商业许可)</li>
</ul>
<h3><a name="4.2" />4.2 Echo 2 (2005年3月)</h3>
<p><a href="http://www.nextapp.com/products/echo2/"><font color="#003399">Echo 2</font></a>允许你用纯Java语言编写AJAX程序。 <a href="http://demo.nextapp.com/InteractiveTest/ia"><font color="#003399">Demo</font></a>.</p>
<ul>
<li>自动生成HTML和Javascript代码</li>
<li>用XML在客户端-服务端传递消息</li>
<li>如果愿意支持自定义Javascript组件</li>
<li>开源协议(Mozilla Public License or GNU LGPL)</li>
</ul>
<h3><a name="4.3" />4.3 Direct Web Remoting (DWR) (2005)</h3>
<p><a href="http://www.getahead.ltd.uk/dwr/"><font color="#003399">Direct Web Remoting</font></a>可以在Javascript代码中直接调用Java方法的应用框架</p>
<ul>
<li>类似于SAJAX，可以把Javascript中的请求调用转递到Java方法中并将执行结果返回给Javascript</li>
<li>可以和任何Web框架一起使用，如Struts、Tapestry等等</li>
<li>开源(Apache)，目前该产品被加入到<a href="http://www.uyun.com/%20//www.opensymphony.com/webwork/"><font color="#003399">WebWork</font></a>中</li>
</ul>
<h3><a name="4.4" />4.4 SWATO (2005)</h3>
<p><a href="http://swato.dev.java.net/"><font color="#003399">SWATO</font></a>是一套可重用的和良好集成的Java/JavaScript库，它实现了一种更容易的方式来改变你的web应用程序的交互，通过AJAX方式实现。</p>
<ul>
<li>服务端Java库可以非常容易的部署到所有Servlet2.3+兼容的容器中</li>
<li>客户端Javascript库可以在所有支持XMLHttpRequest的浏览器中使用</li>
<li>使用JSON技术在服务端组织POJO数据，这样你可以在任何Javascript环境中(HTML、XUL、SVG)访问这些远程数据，这种方式很容易通过硬编码或者某种成熟的Javascript库集成到当前应用中</li>
<li>提供一个简单接口使你能在Javascript中调用远程的POJO数据</li>
<li>使用<servlet>和<filter>灵活的在web.xml中进行配置，并且可以集成(不是必须)到你的Spring框架中</filter></servlet></li>
<li>提供了几个可帮助你快速开发web应用程序的组件(如自动完成的文本框，在线表单，在线列表等等)</li>
</ul>
<h3><a name="4.5" />4.5 AJAX JSP Tag Library</h3>
<p><a href="http://ajaxtags.sourceforge.net/"><font color="#003399">The AJAX JSP Tag Library</font></a>是一组JSP标签库，用来AJAX程序开发。可以在J2EE下无需Javascript就能轻松开发AJAX模式的Web Form。标签库为比较通用的AJAX功能提供了5个标签：</p>
<ul>
<li>autocomplete: 用户在文本框中输入字符，自动从指定的数据中匹配用户输入的字符，类似于Google Suggest</li>
<li>callout:可以为A标签加入气泡式的消息提示框，不过是实时的服务端取出数据</li>
<li>Select/dropdown:类似于联动菜单，比如地州市的联动下拉框</li>
<li>toggle:开关闸按钮，比如在一个hidden表单域中存储true和falsh，同时显示相应的img图像</li>
<li>update field:更新数据，也就是无刷新提交了。</li>
</ul>
<h3><a name="4.6" />4.6 AJAX Java Server Faces Framework</h3>
<p><a href="http://smirnov.org.ru/en/ajax-jsf.html"><font color="#003399">The AJAX-JSF</font></a>用来把任意的JSF应用程序转变为AJAX应用程序</p>
<ul>
<li><a href="http://smirnov.org.ru/myfaces-ajax/ajax.jsf"><font color="#003399">例子</font></a>：AJAX组件的 MyFaces JSF Tree(树型目录), table scroller(可滚动的表格), tabbed pane(分页栏)</li>
<li>开源协议(<a href="http://www.apache.org/licenses/LICENSE-2.0.html"><font color="#003399">Apache Software License</font></a>)</li>
</ul>
<h1><a name="5" />Server-Side: Lisp</h1>
<h3><a name="5.1" />5.1 CL-Ajax</h3>
<p><a href="http://cliki.net/cl-ajax"><font color="#003399">CL-Ajax</font></a>实现Javascript直接调用服务端Lisp</p>
<ul>
<li>生成可带参数的函数</li>
<li>可以回调Javascript函数或者DOM对象</li>
<li>可以集成到SAJAX中</li>
<li>开源许可</li>
</ul>
<h1><a name="6" />6 Server-Side: .NET</h1>
<h3><a name="6.1" />6.1 WebORB for .NET (2005年8月)</h3>
<p><a href="http://www.themidnightcoders.com/weborb/aboutWeborb.htm"><font color="#003399">WebORB for .NET</font></a>是一个用.NET和XML Web Services方式开发AJAX和基于Flash的富客户端应用程序(<a href="http://www.themidnightcoders.com/examples"><font color="#003399">在线例子</font></a>)</p>
<ul>
<li>WebORB包括一个富客户端开发类库。提供简单的在线式API用来绑定或者调用任何.NET对象、XML Web Services</li>
<li>支持异步或同步的事件驱动</li>
<li>不需要在服务端修改任何代码，不需要自定义方法或属性、变量等。不要求设计时指定代理等。</li>
<li>同步调用不需要回调，异步调用需要一个回调方法。</li>
<li>客户端可以向服务端请求指定的活动方式，不需要任何编程就可以把处理结果轻易的转变为状态。</li>
<li>提供一个特定API来处理数据库查询结果-服务器代码能返回DataSet或者DataTable，而客户端以一个类似于RecordSet的JavaScript对象来显示这个结果。该对象提供检索列名和行数据的方法。</li>
<li>支持数据分页技术。客户应用程序能检索页面中的数据。</li>
<li>支持以参数的方式返回所有服务期端数据类型，如primitives, strings, complex types, arrays, native .net collections, remote references</li>
<li>目前有两个版本：标准版(免费)，专业版(商业许可)</li>
</ul>
<h3><a name="6.2" />6.2 Ajax.NET (2005年3月)</h3>
<p><a href="http://ajax.schwarz-interactive.de/"><font color="#003399">Ajax.NET</font></a>是首家支持各种方式通过Javascript访问服务端.net的免费库</p>
<ul>
<li>类似于SAJAX，能把Javascript请求发送到.NET方法，服务端回传给Javascript，甚至包括串行化自定义类。</li>
<li>可以在Javascript中访问Session和Application数据</li>
<li>缓存查询结果</li>
<li>免费使用源代码</li>
<li>无需更改源代码，允许给Ajax.NET添加和修改方法和属性</li>
<li>所有类支持Javascript客户端返回数据，可以在JavaScript中使用DataSet：res.Tables[0].Rows</li>
<li>使用HtmlControls组件访问和返回数据</li>
<li>页面无需重载，用事件代理(数据访问层)</li>
<li>因为只提供一个调用接口方法，所以服务端CPU占用非常少</li>
</ul>
<h3><a name="6.3" />6.3 ComfortASP.NET (2005年8月)</h3>
<p><a href="http://www.daniel-zeiss.de/ComfortASP/"><font color="#003399">ComfortASP.NET</font></a>可以让开发者在纯.NET下开发类似AJAX(DHTML,JavaScript,XMLHttp)特性的应用程序。</p>
<ul>
<li>快速应答</li>
<li>减少HTML传输</li>
<li>减少页面重载</li>
<li>无闪烁的浏览器内容更改</li>
<li>AJAX用户体验，</li>
</ul>
<h3><a name="6.4" />6.4 AjaxAspects (2005年8月)</h3>
<p><a href="http://ajaxaspects.blogspot.com/"><font color="#003399">AjaxAspects</font></a>是个可以用Javascript调用服务端WebService事件的引擎</p>
<ul>
<li>用标准的SOAP和WSDL进行服务端-客户端通信</li>
<li>用简单的类型和XML对象支持带参数的返回值</li>
<li>缓存支持</li>
<li>动作队列</li>
<li>免费使用，开源协议</li>
</ul>
<h1><a name="7" />7 Server-Side: PHP</h1>
<h3><a name="7.1" />7.1 AjaxAC (2005年4月)</h3>
<p><a href="http://ajax.zervaas.com.au/"><font color="#006699">AjaxAC</font></a>用一个单独类封装了完整的应用程序功能</p>
<ul>
<li>所有的功能集成在自包含的类中(另外附带一些Javascript库)</li>
<li>调用PHP文件或者HTML页面非常简易，只需创建App类后把类引用传递给需要调用的Javascript对象或者HTML元素即可。</li>
<li>捕获Javascript事件</li>
<li>可以自定义配置数据，并且支持运行时参数更改</li>
<li>无需再Javascript代码中夹杂凌乱的Html代码，所有事件都是被动态附加上的</li>
<li>由于以上两个优点，所以支持良好的模版引擎</li>
<li>容易Hook到PHP类和MySql数据已返回给自己的request</li>
<li>能够容易的用Javascript建立窗口模式应用程序。</li>
</ul>
<h3><a name="7.2" />7.2 JPSpan</h3>
<p><a href="http://jpspan.sourceforge.net/wiki/doku.php"><font color="#003399">JPSPAN</font></a>通过Javascript直接调用PHP中的函数。</p>
<ul>
<li>进行了严谨的单元测试</li>
<li>开源许可(PHP)</li>
</ul>
<h3><a name="7.3" />7.3 XAJAX</h3>
<p><a href="http://xajax.sf.net/"><font color="#003399">XAjax</font></a>通过Javascript直接调用PHP中的函数</p>
<ul>
<li>支持用Javascript调用PHP脚本</li>
<li>开源许可协议</li>
</ul>
<h1><a name="8" />8 Server-Side: Ruby</h1>
<h3><a name="8.1" />8.1 Ruby On Rails</h3>
<p><a href="http://www.rubyonrails.org/"><font color="#003399">Ruby On Rails</font></a>是一个支持AJAX的完整Web框架，使用Ruby语言编写，严格按照MVC结构开发。</p>
<ul>
<li>当Ajax出现的时候Rails还处于其发展的早期，因此Ajax可能逐渐成为Rails框架的核心。</li>
<li>生成浏览器中大多数/全部的Window应用组件和动画的Javascript脚本。</li>
<li>支持服务器端调用。</li>
<li>队列支持</li>
<li>开源许可</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.uyun.com/2006/09/ajax-framework-summary/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>另类AJAX技巧</title>
		<link>http://www.uyun.com/2006/09/alternative-ajax-techniques/</link>
		<comments>http://www.uyun.com/2006/09/alternative-ajax-techniques/#comments</comments>
		<pubDate>Tue, 19 Sep 2006 07:36:07 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAJX&UI]]></category>
		<category><![CDATA[大杂烩]]></category>

		<guid isPermaLink="false">http://www.uyun.com/?p=182</guid>
		<description><![CDATA[AJAX我相信不用我多说，大家都知道是什么东西吧。我接触AJAX也不算太久，都是边学边写东西。其中遇到了很多问题，也总结了很多经验。我不是高手，所以我不敢说我的东西是最好的，如果你有更好的，欢迎一起讨论。     首先我觉得AJAX新手不应一以来就用什么框架（比如prototype.js等，即使那样写程序会容易一些）。原因是了解xmlhttp的基本工作原理，对以后的开发会有很大的帮助。而且我始终觉得对于Javascript这种脚本语言来说，执行效率是非常重要的，因此我十分反感为了实现一个小功能，动不动就包含什么框架。因为那些框架为了自身的功能和兼容性，都包含了很多使用频率比较低的东西，更有些框架为了方便用户调用，甚至不惜牺牲程序的执行效率。     好了，不说废话了，开始说正题吧。     1.创建xmlhttp对象时的问题。     创建xmlhttp对象在不同的浏览器中有不同的方法，在IE里好像只能用ActiveXObject创建，然而在Firefox等其他浏览器里就不行了，但可以用XMLHttpRequest()函数创建，这样的不统一给程序员写程序带来了很大的难度，所以我认为在学习JS的过程中记录下这些不同的地方很有必要，不然一个很有前途的程序很容易就会成为 &#8220;IE only&#8221; 的！！     下面是一个兼容的xmlhttp对象创建函数。以后就可以直接用这个函数创建xmlhttp对象，而不用担心兼容性问题了 CODE: function createAJAX() { var xmlhttp; try { xmlhttp = new ActiveXObject(&#8220;Msxml2.XMLHTTP&#8221;); } catch (e1) {   try { xmlhttp = new ActiveXObject(&#8220;Microsoft.XMLHTTP&#8221;); }   catch (e2) { xmlhttp = null; } } if (!xmlhttp) {   if (typeof [...]]]></description>
			<content:encoded><![CDATA[<p>AJAX我相信不用我多说，大家都知道是什么东西吧。我接触AJAX也不算太久，都是边学边写东西。其中遇到了很多问题，也总结了很多经验。我不是高手，所以我不敢说我的东西是最好的，如果你有更好的，欢迎一起讨论。<br />
    首先我觉得AJAX新手不应一以来就用什么框架（比如prototype.js等，即使那样写程序会容易一些）。原因是了解xmlhttp的基本工作原理，对以后的开发会有很大的帮助。而且我始终觉得对于Javascript这种脚本语言来说，执行效率是非常重要的，因此我十分反感为了实现一个小功能，动不动就包含什么框架。因为那些框架为了自身的功能和兼容性，都包含了很多使用频率比较低的东西，更有些框架为了方便用户调用，甚至不惜牺牲程序的执行效率。<br />
    好了，不说废话了，开始说正题吧。<br />
    <font color="#ff0000">1.创建xmlhttp对象时的问题。</font><br />
    创建xmlhttp对象在不同的浏览器中有不同的方法，在IE里好像只能用ActiveXObject创建，然而在Firefox等其他浏览器里就不行了<img src="http://www.phpx.com/happy/images/smilies/sad.gif" border="0" />，但可以用XMLHttpRequest()函数创建，这样的不统一给程序员写程序带来了很大的难度，所以我认为在学习JS的过程中记录下这些不同的地方很有必要，不然一个很有前途的程序很容易就会成为 &#8220;IE only&#8221; 的！！<br />
    下面是一个兼容的xmlhttp对象创建函数。以后就可以直接用这个函数创建xmlhttp对象，而不用担心兼容性问题了<img src="http://www.phpx.com/happy/images/smilies/biggrin.gif" border="0" /></p>
<div class="smalltxt" style="font-weight: bold; margin-left: 2em; margin-right: 2em">
<div style="float: left">CODE:</div>
</div>
<div class="altbg2" id="code0" style="clear: both; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin: 3px 2em 2em; word-break: break-all; padding-top: 5px; border: #f1f1f1 1px solid">function createAJAX()<br />
{<br />
var xmlhttp;<br />
try { xmlhttp = new ActiveXObject(&#8220;Msxml2.XMLHTTP&#8221;); }<br />
catch (e1)<br />
{<br />
  try { xmlhttp = new ActiveXObject(&#8220;Microsoft.XMLHTTP&#8221;); }<br />
  catch (e2) { xmlhttp = null; }<br />
}<br />
if (!xmlhttp)<br />
{<br />
  if (typeof XMLHttpRequest != &#8220;undefined&#8221;) { xmlhttp = new XMLHttpRequest(); }<br />
  else return false;<br />
}<br />
return xmlhttp;<br />
}</div>
<p><font color="#ff0000">2.AJAX的数据传输方式。</font><br />
    正如你知道的，AJAX支持以POST何GET方式传送数据。但你知道怎样正确使用他们吗？<br />
    GET：<br />
    GET是最常用的数据传输方式，就是将变量名和值直接跟在URL后面就可以了，同时这个也是最简单的方法。<br />
    比如: 调用的URL为 ajax.php?id=1，这样在ajax.php中的$_GET数组里就有 $_GET["id"] = 1; 如果有多个变量，则用&#8221;&#038;&#8221;分开。<br />
    POST：<br />
    POST相对于GET来说要用得比较少一点，而且POST的用法比GET要麻烦一点。<br />
    首先，POST也跟GET一样，要先把变量名和值用&#8221;=&#8221;和&#8221;&#038;&#8221;符号连成一个字符串。 然后用 xmlhttp的 send 方法传送。而且要在send之前设置header。</p>
<div class="smalltxt" style="font-weight: bold; margin-left: 2em; margin-right: 2em">
<div style="float: left">CODE:</div>
</div>
<div class="altbg2" id="code1" style="clear: both; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin: 3px 2em 2em; word-break: break-all; padding-top: 5px; border: #f1f1f1 1px solid">var ajax = createAJAX();  //就是前面那个创建xmlhttp对象的函数<br />
ajax.open(&#8220;POST&#8221;,&#8221;ajax.php&#8221;,true);<br />
ajax.onreadystatechange = function1;  //配置状态处理函数名，不能在后面加上&#8221;()&#8221;！！<br />
ajax.setRequestHeader(&#8220;Content-Type&#8221;, &#8220;application/x-www-form-urlencoded&#8221;);   //这句必须要，而且一定要放在send以前<br />
ajax.send(&#8220;变量1=值1&#038;变量2=值2&#8243;);</div>
<p>用这种方法传送出去的值就和用表单的post方式传出的值一样。</p>
<p>    还有一个非常重要的，不管用POST还是GET，都应特别注意&#8221;&#038;&#8221;,&#8221;+&#8221;和&#8221;%&#8221;等特殊字符的问题。如果变量的值里面含有这些字符，那么后果不堪设想。一个很好地解决办法就是使用encodeURIComponent这个全局函数来将所有的值都处理一遍（注意只是处理值），将特殊字符转换成%XX的形式（和php里的urlencode貌似是一个功能）。但这个函数在IE5里不能用！</p>
<p>    用POST方法传送数据的时候，xmlhttp.send()传出的所有东西在php里都可以在一个名叫&#8221;php://input&#8221;的特殊文件里读取到。比如上面的那个代码，在ajax.php里用 file_get_contents(&#8220;php://input&#8221;) 就可以得到 &#8220;变量1=值1&#038;变量2=值2&#8243;。　这是一个非常好的功能！这样我们就可以不用再使用&#8221;变量名=值&#8221;的方式了！也不用担心特殊字符！ 将这个方法和GET结合起来就可以做一个AJAX的文章自动保存的程序。</p>
<div class="smalltxt" style="font-weight: bold; margin-left: 2em; margin-right: 2em">
<div style="float: left">CODE:</div>
</div>
<div class="altbg2" id="code2" style="clear: both; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin: 3px 2em 2em; word-break: break-all; padding-top: 5px; border: #f1f1f1 1px solid">var ajax = createAJAX();<br />
ajax.open(&#8220;POST&#8221;,&#8221;ajax.php?filename=a.txt&#8221;,true);<br />
ajax.onreadystatechange = function1;  <br />
//ajax.setRequestHeader(&#8220;Content-Type&#8221;, &#8220;application/x-www-form-urlencoded&#8221;);   //如果不需要将send出的字符串解析成POST变量数据，那么这句就可以不用了<br />
ajax.send(&#8220;这里可以传送文件正文！！！！！&#8221;);</div>
<p>这样从ajax.php的$_GET数组中可以获得文件名，用 file_get_contents(&#8220;php://input&#8221;) 就可以获得文件正文，而且不用担心任何的特殊字符，同时也不用处理数据，减轻客户端压力。<br />
    我做了一个样例，看这里 <a href="http://longbill.cn/down/sample/ajax.htm" target="_blank"><font color="#003366">http://longbill.cn/down/sample/ajax.htm</font></a></p>
<p>    我看过很多ajax框架，但没有发现支持用这种方式传输数据的。另外我发现一个非常好用的ajax框架 tw-sack.js，但也有许多不尽人意的地方。于是我修改了一下，增加了一些功能。下面说说它的功能和用法：</p>
<p>特点:<br />
体积小,方便调用, 增加 GET&#038;<img src="http://www.phpx.com/happy/images/smilies/titter.gif" border="0" />OST 方法,就是上面说的那种</p>
<div class="smalltxt" style="font-weight: bold; margin-left: 2em; margin-right: 2em">
<div style="float: left">CODE:</div>
</div>
<div class="altbg2" id="code3" style="clear: both; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin: 3px 2em 2em; word-break: break-all; padding-top: 5px; border: #f1f1f1 1px solid">实体化对象：<br />
var ajax = new sack(&#8220;URL&#8221;); // URL为ajax调用地址</p>
<p>属性:( =默认值)<br />
method = &#8220;GET&#8221;;  //&#8221;GET&#8221;和&#8221;POST&#8221;或&#8221;GET&#038;POST&#8221;<br />
encodeURL = true; //是否处理参数值<br />
late = true; //是否为异步方式<br />
函数配置:<br />
onLoading = 空函数; //当loading的时候触发<br />
onLoaded = 空函数; //当下载完的时候触发<br />
onInteractive = 空函数;  //当交互的时候触发<br />
onCompletion = 空函数;  //当全部完成的时候触发<br />
onError = 空函数;  //当发生错误的时候触发<br />
方法:<br />
setVar 设置变量和值,可以以两种方式：setVar(&#8220;varName&#8221;,&#8221;varValue&#8221;); 和 setVar( { &#8220;name1&#8243;:&#8221;value1&#8243;,&#8221;name2&#8243;:&#8221;value2&#8243;} );<br />
send   发送,可以当method = &#8220;GET&#038;POST&#8221; 的时候可以接受一个字符串作为 POST 的内容<br />
当完成的时候才可用的属性(在onCompletion里可以使用):<br />
response  //返回的字符串<br />
responseXML  //返回的xml</p></div>
<p>具体样例:<br />
ajax.htm:</p>
<div class="smalltxt" style="font-weight: bold; margin-left: 2em; margin-right: 2em">
<div style="float: left">CODE:</div>
</div>
<div class="altbg2" id="code4" style="clear: both; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin: 3px 2em 2em; word-break: break-all; padding-top: 5px; border: #f1f1f1 1px solid">
<div id='mydiv'>Loading&#8230;</div>
<p><script src='sack.js'></script><br />
<script>
var ajax = new sack("ajax.php");
ajax.method = "GET&#038;POST";
ajax.setVar(
{
        "action":"read",
        "my":"posttdfsfdsfafasd"
});
ajax.onCompletion = function ()
{
        document.getElementById('mydiv').innerHTML = ajax.response;
}</p>
<p>ajax.send("这里是POST出去的内容，可以有特殊字符&#038;=等");
</script></div>
<p>ajax.php:</p>
<div class="smalltxt" style="font-weight: bold; margin-left: 2em; margin-right: 2em">
<div style="float: left">CODE:</div>
</div>
<div class="altbg2" id="code5" style="clear: both; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin: 3px 2em 2em; word-break: break-all; padding-top: 5px; border: #f1f1f1 1px solid">< ?<br />
$br = "<br />
---------------------------<br />
";<br />
print_r($_GET);<br />
echo $br;<br />
print_r($_POST);<br />
echo $br;<br />
echo file_get_contents("php://input");<br />
echo $br;<br />
?></div>
<p>在这里可以看到: <a id="p180" href="http://www.uyun.com/wp-content/uploads/2006/09/ajax2.htm">ajax2.htm</a></p>
<p>sack.js下载地址: <a id="p181" title="sack.js" href="http://www.uyun.com/wp-admin/sack.js">sack.js</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uyun.com/2006/09/alternative-ajax-techniques/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>AJAX的实现</title>
		<link>http://www.uyun.com/2006/09/ajax-implementation/</link>
		<comments>http://www.uyun.com/2006/09/ajax-implementation/#comments</comments>
		<pubDate>Tue, 19 Sep 2006 07:31:43 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAJX&UI]]></category>
		<category><![CDATA[大杂烩]]></category>

		<guid isPermaLink="false">http://www.uyun.com/?p=179</guid>
		<description><![CDATA[ajax可以说的上当今很火的技术啦. 在村子里经常看到有人问xajax的技术,说实话,我觉得那东西太麻烦,用起来太费事. ajax本身实现的机制不是很难,难的应该是在后期的javascript处理返回的responseText,responseXml ajax本身的操作过程无外是: 1.构建一个xmlHTTP对像 2.通过xmlHTTP的同步或是异步方式发送数据(大部分都是异步方式) 3.如果是异步方式检查xmlHttp的状态变化 4.当状态变到readyState==4,而且status==200说明发送数据成功 5.这时候再通过javascript处理xmlHTTP的responseText或是responseXml(这两者是同时存在的) 下面来实现这个过程 1.构建一个xmlHTTP的对像 CODE: function createRequest(){         if(typeof XMLHttpRequest!=&#8221;undefined&#8221;)        {                 return new XMLHttpRequest();         }else if(typeof ActiveXObject!=&#8221;undefined&#8221;){                 var xmlHttp_ver  = false;     [...]]]></description>
			<content:encoded><![CDATA[<p><span style="font-size: 12px">ajax可以说的上当今很火的技术啦.<br />
在村子里经常看到有人问xajax的技术,说实话,我觉得那东西太麻烦,用起来太费事.</p>
<p>ajax本身实现的机制不是很难,难的应该是在后期的javascript处理返回的responseText,responseXml</p>
<p>ajax本身的操作过程无外是:</p>
<p>1.构建一个xmlHTTP对像<br />
2.通过xmlHTTP的同步或是异步方式发送数据(大部分都是异步方式)<br />
3.如果是异步方式检查xmlHttp的状态变化<br />
4.当状态变到readyState==4,而且status==200说明发送数据成功<br />
5.这时候再通过javascript处理xmlHTTP的responseText或是responseXml(这两者是同时存在的)</p>
<p>下面来实现这个过程<br />
1.构建一个xmlHTTP的对像</p>
<div class="smalltxt" style="font-weight: bold; margin-left: 2em; margin-right: 2em">
<div style="float: left">CODE:</div>
</div>
<div class="altbg2" id="code0" style="clear: both; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin: 3px 2em 2em; word-break: break-all; padding-top: 5px; border: #f1f1f1 1px solid">function createRequest(){<br />
        if(typeof XMLHttpRequest!=&#8221;undefined&#8221;)        {<br />
                return new XMLHttpRequest();<br />
        }else if(typeof ActiveXObject!=&#8221;undefined&#8221;){<br />
                var xmlHttp_ver  = false;<br />
                var xmlHttp_vers = ["MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp","Microsoft.XmlHttp"];<br />
                if(!xmlHttp_ver){<br />
                        for(var i=0;i<xmlhttp_vers .length;i++){<br />
                                try{<br />
                                        new ActiveXObject(xmlHttp_vers[i]);<br />
                                        xmlHttp_ver = xmlHttp_vers[i];<br />
                                        break;<br />
                                }catch(oError){;}<br />
                        }<br />
                }<br />
                if(xmlHttp_ver){<br />
                        return new ActiveXObject(xmlHttp_ver);<br />
                }else{<br />
                        throw new Error("Could not create XML HTTP Request.");<br />
                }<br />
        }else{<br />
                throw new Error("Your browser doesn't support an XML HTTP Request.");<br />
        }<br />
}</div>
<p>注意：xmlHttp_vers 应该从版本高的往版本低的写，这样建立对像的数据调用的是你机子上安装过的最高版本的MSXML2.XmlHttp</p>
<p>第二步发送数据<br />
这里主要是调用xmlHttp的open方法和send方法来处理<br />
xmlHTTP的方法可以到www.xmlhttp.cn查看（我以前发过一个chm的，但因为版权被村长删除啦，谁要是想要，回信，我发一下）<br />
下面是用post的方法发送数据</p>
<div class="smalltxt" style="font-weight: bold; margin-left: 2em; margin-right: 2em">
<div style="float: left">CODE:</div>
</div>
<div class="altbg2" id="code1" style="clear: both; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin: 3px 2em 2em; word-break: break-all; padding-top: 5px; border: #f1f1f1 1px solid">var xmlHttp;<br />
xmlHttp = createRequest();<br />
function sendPostRequest()<br />
{   <br />
        var shownum=document.getElementById(&#8220;shownum&#8221;).value;// html页面中一个id为shownum的input表单<br />
        var url = &#8220;show.php&#8221;;//要发送到的URL<br />
        var queryString = &#8220;shownum&#8221; + &#8220;=&#8221; + shownum;<br />
        //向服务端发送请求<br />
        xmlHttp.open(&#8220;post&#8221;, url, true);//这里的第三个参数为true为异步方式处理<br />
        xmlHttp.onreadystatechange = showData;//异步方式处理，当状态改变时会调用onreadystatechange属性指定的回调函数showData<br />
        xmlHttp.setRequestHeader(&#8220;Content-Type&#8221;, &#8220;application/x-www-form-urlencoded;&#8221;);//这一句是用post方法发送的时候必须写的<br />
        xmlHttp.send(queryString);//发送你构建成的数据,如果为“get”方法时，这里可以写成xmlHttp.send(NULL);<br />
}</div>
<p>第三步</p>
<p>当状态改变时会调用onreadystatechange属性指定的回调函数showData，来来检查状态变化</p>
<p>xmlHTTP.readyState 和xmlHTTP.status 可以去查手册，看一下就知道</p>
<div class="smalltxt" style="font-weight: bold; margin-left: 2em; margin-right: 2em">
<div style="float: left">CODE:</div>
<div style="float: right; text-align: right"><a class="smalltxt" onclick="copycode(findobj('code2'));" href="###"><font color="#003366">[Copy to clipboard]</font></a></div>
</div>
<div class="altbg2" id="code2" style="clear: both; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin: 3px 2em 2em; word-break: break-all; padding-top: 5px; border: #f1f1f1 1px solid">function showData()<br />
{<br />
        var msg=document.getElementById(&#8220;status&#8221;);<br />
                     //第４步<br />
        if(xmlHttp.readyState==4)<br />
        {<br />
                if(xmlHttp.status==200)<br />
                {<br />
　　　　　　　　　　　　　　　　//只有当readyState为4并且status为200时，才表示符合要求<br />
                                                               //下面这一句话，就相当于上面说的第５步，处理返回的结果<br />
                        msg.innerHTML =  xmlHttp.responseText;<br />
                }<br />
        }<br />
        else<br />
        {<br />
                switch(xmlHttp.readyState)<br />
                {<br />
                case 0:<br />
                        msg.innerHTML=&#8221;未初始化&#8230;&#8221;;<br />
                        break;<br />
                case 1:<br />
                        msg.innerHTML=&#8221;加载中&#8230;&#8221;;<br />
                        break;<br />
                case 2:<br />
                        msg.innerHTML=&#8221;连接完成&#8230;&#8221;;<br />
                        break;<br />
                case 3:<br />
                        msg.innerHTML=&#8221;交换数据&#8230;&#8221;;<br />
                        break;<br />
                default:<br />
                        break;<br />
                }<br />
        }<br />
}</div>
<p>到这里就一次xmlhttp发送异步调用数据也就算完成啦<br />
完整的代码是</p>
<div class="smalltxt" style="font-weight: bold; margin-left: 2em; margin-right: 2em">
<div style="float: left">CODE:</div>
</div>
<div class="altbg2" id="code3" style="clear: both; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin: 3px 2em 2em; word-break: break-all; padding-top: 5px; border: #f1f1f1 1px solid"><html><br />
<head><br />
<title><br />
ajax<br />
</title><br />
<script language="javascript">
function createRequest(){
        if(typeof XMLHttpRequest!="undefined")        {
                return new XMLHttpRequest();
        }else if(typeof ActiveXObject!="undefined"){
                var xmlHttp_ver  = false;
                var xmlHttp_vers = ["MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp","Microsoft.XmlHttp"];
                if(!xmlHttp_ver){
                        for(var i=0;i<xmlhttp_vers .length;i++){
                                try{
                                        new ActiveXObject(xmlHttp_vers[i]);
                                        xmlHttp_ver = xmlHttp_vers[i];
                                        break;
                                }catch(oError){;}
                        }
                }
                if(xmlHttp_ver){
                        return new ActiveXObject(xmlHttp_ver);
                }else{
                        throw new Error("Could not create XML HTTP Request.");
                }
        }else{
                throw new Error("Your browser doesn't support an XML HTTP Request.");
        }
}</p>
<p>var xmlHttp;</p>
<p>function sendPostRequest()
{   
                     xmlHttp = createRequest();
        var shownum=document.getElementById("shownum").value;// html页面中一个id为shownum的input表单
        var url = "show.php";//要发送到的URL
        var queryString = "shownum" + "=" + shownum;
        //向服务端发送请求
        xmlHttp.open("post", url, true);//这里的第三个参数为true为异步方式处理
        xmlHttp.onreadystatechange = showData;//异步方式处理，当状态改变时会调用onreadystatechange属性指定的回调函数showData
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");//这一句是用post方法发送的时候必须写的
        xmlHttp.send(queryString);//发送你构建成的数据,如果为“get”方法时，这里可以写成xmlHttp.send(NULL);
}
function showData()
{
        var msg=document.getElementById("status");
                     //第４步
        if(xmlHttp.readyState==4)
        {
                if(xmlHttp.status==200)
                {
　　　　　　　　　　　　　　　　//只有当readyState为4并且status为200时，才表示符合要求
                                                               //下面这一句话，就相当于上面说的第５步，处理返回的结果
                        msg.innerHTML =  xmlHttp.responseText;
                }
        }
        else
        {
                switch(xmlHttp.readyState)
                {
                case 0:
                        msg.innerHTML="未初始化...";
                        break;
                case 1:
                        msg.innerHTML="加载中...";
                        break;
                case 2:
                        msg.innerHTML="连接完成...";
                        break;
                case 3:
                        msg.innerHTML="交换数据...";
                        break;
                default:
                        break;
                }
        }
}</p>
<p></script><br />
</xmlhttp_vers></script></head><br />
<body></p>
<div>要发送的数据：<br />
<input name="shownum" id="shownum" type="text"/>
<input type="button" name="search" value="发送" onClick="sendPostRequest()"/></div>
<div id="status"></div>
<p></body><br />
</html></div>
<p>同一目录下要有一个show.php<br />
内容为</p>
<div class="smalltxt" style="font-weight: bold; margin-left: 2em; margin-right: 2em">
<div style="float: left">CODE:</div>
</div>
<div class="altbg2" id="code4" style="clear: both; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin: 3px 2em 2em; word-break: break-all; padding-top: 5px; border: #f1f1f1 1px solid"><font color="#000000"></font><font color="#0000bb">< ?php<br />
$shownum </font></font><font color="#007700">= </font><font color="#0000bb">$_POST</font><font color="#007700">[</font><font color="#dd0000">"shownum"</font><font color="#007700">];<br />
echo </font><font color="#0000bb">$shownum</font><font color="#007700">;<br />
</font><font color="#0000bb">?></font></div>
<p></xmlhttp_vers></div>
<p></span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.uyun.com/2006/09/ajax-implementation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
