某人的栖息地 » ajax http://www.ooso.net Linux + Apache + Mysql + Php + Flash Mon, 15 Mar 2010 15:59:24 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 图片预加载效果的实现 http://www.ooso.net/archives/423 http://www.ooso.net/archives/423#comments Sun, 15 Jun 2008 23:25:48 +0000 Volcano http://www.ooso.net/?p=423 阅读全文（363字）]]> 使用picasa的时候，注意到它首先是显示模糊的图片，然后图片突然变得清晰，这样做有一定的好处——picasa的图片翻页是用javascript实现的，如果直接载入大图，中间势必会有个空档，用户在这中间会感觉很空虚~~

于是我花了点时间，打探它的实现方式，发觉很简单，不是用的lowsrc之类的标记，而是简单的js。

代码示例

PLAIN TEXT
CODE:
  1. <img id="myImage" src="small_144.jpg" width="640" />
  2. var img = new Image();
  3. img.src = "http://imghost/big_640_480.jpg";
  4. img.onload = function() {
  5.   document.getElementById('myImage').src = this.src;
  6. }

如此这般，待大图载入完成之后，利用js替换原小图的src，就完成了图片预加载效果。关键点是图片的onload事件利用。

]]> http://www.ooso.net/archives/423/feed 10 利用Google Ajax Library API加速常用js类库的载入 http://www.ooso.net/archives/404 http://www.ooso.net/archives/404#comments Wed, 28 May 2008 06:56:58 +0000 Volcano http://www.ooso.net/index.php/archives/404 阅读全文（523字）]]> google前不久推出了Google Ajax Library API，说白了就是提供几个知名js库的host，目前有:

google提供的这批js类库都有使用cdn，同时提供压缩和非压缩版本，并gzip输出。比如Prototype在未压缩前是124k，压缩后则只有30k，而jquery经过瘦身以后，也是从97k降到了16k。

这项服务的意义在于，如果各个网站都使用google提供的某个js类库比如jquery，那么由于浏览器缓存的缘故，用户就可以避免下载相同内容的js，这样也就能提高js的载入速度了。

google ajax library api使用方法

传统方式

PLAIN TEXT
CODE:
  1. <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

使用google.load载入

PLAIN TEXT
CODE:
  1. <script src="http://www.google.com/jsapi"></script>
  2. <script>
  3. // Load jQuery
  4. google.load("jquery", "1");
  5. </script>

下面是一段小小的视频用来解释它的工作原理:

Update

昨天在某个小页面上尝试引入google提供的jquery.min.js，结果让我大失所望，虽然有时候访问速度很快，但是偶尔能刷出22秒以上的响应时间，如果是这样不稳定的话，那么实在是不敢放心使用。

]]> http://www.ooso.net/archives/404/feed 9 Ajax Vs Flash http://www.ooso.net/archives/353 http://www.ooso.net/archives/353#comments Fri, 20 Jul 2007 00:11:01 +0000 Volcano http://www.ooso.net/index.php/archives/353 阅读全文（282字）]]> 在RIA应用中,到底应该使用Ajax,还是使用Flash呢?它们各有长处,让人难以取舍.下面就它们的特点做一个小小的总结.

    Javascript

  • + 不需要额外的插件.
  • - 不同的浏览器下可能会产生不同的行为
  • - 不能访问音视频设备
  • - 可能会有少数用户会关闭javascript
  • - 如果你写的代码很烂,大家都能看到

    Flash

  • - 需要额外安装插件
  • + 在各种浏览器上,如果flash player的版本一致,那么flash的行为也会基本一致
  • - 用户可能不会安装有相同版本的flash player
  • + 可以直接访问音视频设备
  • - 可能会有很多用户屏蔽flash
  • + 如果你写的代码很烂,不用担心,大家都看不到
]]> http://www.ooso.net/archives/353/feed 16 Ajax+PHP+YUI手工制作rss阅读器 http://www.ooso.net/archives/307 http://www.ooso.net/archives/307#comments Thu, 05 Jul 2007 00:06:14 +0000 Volcano http://www.ooso.net/index.php/archives/307 阅读全文（736字）]]> 上次俺的简陋练习作品Ajax+json小有心得，这次继续尝试利用Ajax+PHP+YUI手工制作rss阅读器。

写一点html来展示RSS的内容

PLAIN TEXT
CODE:
  1. <body>
  2. <h1>RSS阅读器</h1>
  3. <div id="rss_bd">内容待填补</div>
  4. </body>

利用YUI的Connection manager来处理XHR

yahoo已经提供了在线的YUI Hosting,直接引用:

PLAIN TEXT
CODE:
  1. <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js"></script>
  2. <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js"></script>
  3.  
  4. <script type="text/javascript">
  5. var sUrl = 'proxy.php';
  6. var callback =
  7. {
  8.   success: function(o) {
  9.      document.getElementById('rss_bd').innerHTML = o.responseText;
  10.   },
  11.   failure: function(o) {/*failure handler code*/}
  12. }
  13. var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
  14. </script>

很困，这部分没写完整，下次来补齐。

用php做一个proxy来避免跨站访问的问题

proxy的要点
一定要输出header，否则在解析的时候你可能会遇到莫名奇妙的问题。
如果你的服务器不支持远程url open，可以考虑使用curl，比如说在dreamhost的主机上

PLAIN TEXT
CODE:
  1. <?php
  2. $searchUrl = 'http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&results=4&output=json&query=';
  3. if(!empty($_POST['query']))
  4.  echo file_get_contents($searchUrl . $_POST['query']);
  5. ?>

到这里，一个简陋的RSS阅读器的雏形已经完备了。

什么是ajax

在百度知道上面搜索的答案，一本正经的告诉你：

Ajax（Asynchronous JavaScript and XML）是结合了Java技术、XML以及JavaScript等编程技术，可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的惯例。

看了后立马一口茶水做雾状均匀喷洒到本本的屏幕上，Ajax本身和java有嘛关系？

]]> http://www.ooso.net/archives/307/feed 4 Yahoo搜索大变形 http://www.ooso.net/archives/316 http://www.ooso.net/archives/316#comments Wed, 06 Jun 2007 23:45:27 +0000 Volcano http://www.ooso.net/index.php/archives/316 阅读全文（314字）]]> 昨天听说yahoo搜索大变形，跑去试了一下，果然有不同的感受。首页就不说啦，没啥值得浪费口水的，搜索结果页面有巨大变化：

  • 每次只显示五条结果
  • 翻页放在右侧纵向排列
  • 左青龙（相关搜索词）右白虎（图片，音乐，博客等相关）内容在中间

让人惊讶的是翻页非常快，点点就出来了，我要是用鼠标在右边翻页一直点下去咋办？那会没完。祭出firebug窥探之，每一次翻页均会有一个ajax提交:

POST http://www.yahoo.cn/data:foo (656ms)

正如我们看到的，post方式的提交，返回了一堆乱遭遭的数据，以我有限的知识看来，这八成是json格式。翻页还支持快捷键，j/k 控制上下翻，八成是vim的爱好者干的好事，没说的。

用着挺爽

]]> http://www.ooso.net/archives/316/feed 2 greasemonkey内置了ajax管理器 http://www.ooso.net/archives/283 http://www.ooso.net/archives/283#comments Tue, 22 May 2007 00:03:32 +0000 Volcano http://www.ooso.net/index.php/archives/283 阅读全文（764字）]]> greasemonkey这工具，就好像web开发人员的作弊器一样，好玩。经常去的网站，若是看着不顺眼，就祭出greasemonkey对它页面元素的位置调整一番，把主题内容字体搞大，把广告隐藏不见，别人的网站我做主，倒也有一番小小乐趣（我可没有hack它的站点哦）。这些天看看文档，原来人家已经内置了xmlhttpRequest的api,不用费牛劲去外部导入一些js来搞这些基础工程了。

Description

GM_xmlhttpRequest makes an arbitrary HTTP request. The details argument is an object that can contain up to seven fields.

一个greasemonkey的ajax调用

PLAIN TEXT
CODE:
  1. GM_xmlhttpRequest({
  2.     method: 'GET',
  3.     url: 'http://greaseblog.blogspot.com/atom.xml',
  4.     headers: {
  5.         'User-agent': 'Mozilla/4.0 (compatible)
  7. Greasemonkey',
  8.         'Accept':
  9.  
  10. 'application/atom+xml,application/xml,text/xml',
  11.     },
  12.     onload: function(responseDetails) {
  13.         alert('Request for Atom feed returned ' +
  14.  
  15. responseDetails.status +
  16.               ' ' + responseDetails.statusText + '\n\n'
  17.  
  18. +
  19.               'Feed data:\n' +
  20.  
  21. responseDetails.responseText);
  22.     }
  23. });

较详细一些的内容，可以去Dive Into Greasemonkey查阅.

什么是greasemonkey?

]]> http://www.ooso.net/archives/283/feed 0 Pear::Pager和AJAX的整合应用 http://www.ooso.net/archives/260 http://www.ooso.net/archives/260#comments Sun, 22 Oct 2006 23:53:07 +0000 Volcano http://www.ooso.net/index.php/archives/260 阅读全文（1125字）]]> 作为一个PHP开发人员来说，大概很让人受用的一个东东就是Pear的类库了。我们知道，Pear::Pager是专门处理分页的，而Pear::HTML_AJAX则是Ajax应用的一些类库。但是Pager也不仅仅是只能用于html的分页链接，它已经为比超女还红的Ajax做好了准备，下面看看这两个包如何整合应用。

Pager and Javascript

现在走出第一步，Pager已经能够构建出javascript的链接了，和Ajax整合，理论上应该也是能够实现的，下面是Pager和javascript分页的一个例子：

PLAIN TEXT
PHP:
  1. require_once 'Pager/Pager.php';
  2. $data = range(1, 100); //an array of data to paginate
  3. $pager_params = array(
  4.     'mode'     => 'Sliding',
  5.     'append'   => false,  //don't append the GET parameters to the url
  6.     'path'     => '',
  7.     'fileName' => 'javascript:revealDiv(%d)',  //Pager replaces "%d" with the page number...
  8.     'perPage'  => 10, //show 10 items per page
  9.     'delta'    => 5,
  10.     'itemData' => $data,
  11. );
  12. $pager = & Pager::factory($pager_params);
  13. $n_pages = $pager->numPages();
  14. $links = $pager->getLinks();
  15. ?>
  16. <html>
  17. <head>
  18.     <script type="text/javascript" language="javascript">
  19.     var n_pages = <?php echo $n_pages ?>;
  20.     function revealDiv(n)
  21.     {
  22.         for (var count = 1; count <= n_pages; count++) {
  23.           document.getElementById("page"+count).style.display = 'none';
  24.         }
  25.         document.getElementById("page"+n).style.display = 'block';
  26.     }
  27.     </script>
  28.     <style type="text/css">
  29.     div.page {
  30.       background: #FFFF99;
  31.       border-top: 1px solid #FFBF99;
  32.       border-bottom: 1px solid #FFBF99;
  33.     }
  34.     </style>
  35. </head>
  36. <body>
  37. <h1>PEAR::Pager example with JavaScript</h1>
  38. <?php echo $links['pages']; ?>
  39. <hr />
  40. <?php
  41. for ($i=1; $i <= $n_pages; ++$i) {
  42.     echo '<div class="page" id="page'.$i.'">';
  43.     echo '<h2>Page '.$i.'</h2>';
  44.     foreach ($pager->getPageData($i) as $item) {
  45.         echo 'Item '.$item.'<br />';
  46.     }
  47.     echo '</div>';
  48. }
  49. ?>
  50. <hr />
  51. <script type="text/javascript" language="javascript">
  52. revealDiv(1);
  53. </script>
  54. </body>
  55. </html>

例子中把分页的所有数据放入一个div标签，定义了两个比较重要的参数就是path（为空）和fileName,fileName原本应该是链接的文件名，但是这里用javascript替换了。

Ajax上阵

这个例子包括三个文件page.html,server.php,testdata.php

  • page.html

    • 用动态javascript--server.php来处理数据，调用HTML_AJAX.replace('target', 'testdata.php')来替换id为target这个div的内容。

    PLAIN TEXT
    PHP:
    1. <html>
    2. <body>
    3. <h1>PEAR::Pager example with AJAX</h1>
    4.  
    5. <script type="text/javascript" src="server.php?client=all"></script>
    6.  
    7. <div id="target">I'm the target</div>
    9. <script type="text/javascript">
    10.     HTML_AJAX.replace('target', 'testdata.php');
    11. </script>
    13. </body>
    14. </html>

  • testdata.php

    • 这是个很简单的php程序，取到分页数据并输出html

    PLAIN TEXT
    PHP:
    1. <?php
    2. require_once 'Pager/Pager.php';
    3. $data = range(1, 100); //an array of data to paginate
    4. $pager_params = array(
    5.     'mode'     => 'Sliding',
    6.     'append'   => false,  //don't append the GET parameters to the url
    7.     'path'     => '',
    8.     'fileName' => 'javascript:HTML_AJAX.replace(\'target\',\'testdata.php?pageID=%d\');',  //Pager replaces "%d" with the page number...
    9.     'perPage'  => 10, //show 10 items per page
    10.     'delta'    => 1,
    11.     'itemData' => $data,
    12. );
    13. $pager = & Pager::factory($pager_params);
    14. $n_pages = $pager->numPages();
    15. $links = $pager->getLinks();
    16. echo '<p>This container is loaded with an AJAX call</p>';
    17. echo '<p><span class="datetime">DateTime: '. date('Y-m-d H:i:s') .'</span></p>';
    18. echo '<h3>Page '. $pager->getCurrentPageId() .'</h3>';
    19. foreach ($pager->getPageData() as $item) {
    20.     echo 'Item '. $item .'<br />';
    21. }
    22. echo '<hr />'.$pager->links;
    23. ?>

  • 最后，贴上幕后工作者server.php的代码

    • 用HTML_AJAX_Server来处理ajax这些烦心事吧

    PLAIN TEXT
    PHP:
    1. <?php
    2. include 'HTML/AJAX/Server.php';
    3.  
    4. $server = new HTML_AJAX_Server();
    5. $server->handleRequest();
    6. ?>

    web 2.0, Ajax的趋势图

    时下的web 2.0和Ajax概念正是如火如荼，且不论Ajax这东东到底是不是炒作的产物，就实际应用来说，Ajax在某些场合的确是顶好用而且看上去挺酷.

    蓝的是web 2.0,红的是Ajax
    web 2.0,ajax

    参考文档

    http://www.alberton.info/pear_pager_tutorial_javascript_navigation.html

    ]]>     http://www.ooso.net/archives/260/feed 1     Connection Manager Of YUI http://www.ooso.net/archives/242 http://www.ooso.net/archives/242#comments Mon, 11 Sep 2006 15:29:37 +0000 Volcano http://www.ooso.net/index.php/archives/242 阅读全文（1018字）]]> 前些天试用了Yahoo! UI Library的Connection Manager工具，略有些心得，这里丢块板砖出来，能不能引到玉，那是后话。

    Connection Manager能干什么

    The Connection Manager is a utility that enables you to make in-page HTTP requests through a simplified interface to the XMLHttpRequest object. The Connection Manager handles cross-browser instantiation of XMLHttpRequest, negotiates the server response and uses a callback pattern to process the response data.

    没话说，这是一个ajax的javascript类库，Yahoo出品，嘿嘿。

    使用心得

    • 打开程序包的build/connection目录，下有connection.js,connection-debug.js,connection-min.js,这三个文件其实内容都一样，第一个是正儿八经的源代码，中间那个不用说可以用于debug,最后那个也不是废柴，它经过压缩处理，javascript代码仅仅只有8k，相对connection.js高达20k肥硕体积来说，显然更经济，可用于线上系统。
    • 这三个文件最好都要的：
      PLAIN TEXT
      CODE:
      1. <!-- Dependency --> 
      2. <script src="yahoo.js"></script> 
      3.  
      4. <!-- OPTIONAL: Required if using setForm() to upload files --> 
      5. <script src="event.js"></script> 
      6.    
      7. <!-- Source file --> 
      8. <script src="connection.js"></script>

    • 最后说个特好用的方法 —— setForm，这功能可以解析某个表单的内容，自动拼凑出用于ajax提交的数据串，甚至可以用于文件上传，实在是居家旅行必备。
      PLAIN TEXT
      CODE:
      1. var formObject = document.getElementById('aForm');   
      2. YAHOO.util.Connect.setForm(formObject);   
      3. // This example facilitates a POST transaction.   
      4. var cObj = YAHOO.util.Connect.asyncRequest('POST', 'http://www.yahoo.com', callback);

    详细说明

    http://developer.yahoo.com/yui/connection/

    这阵子犯懒，只字未写，惭愧惭愧

    版权声明：可以任意转载，转载时请务必以超链接形式标明文章原始出处和作者信息及本声明

    ]]>     http://www.ooso.net/archives/242/feed 0     用php5来赚大钱 http://www.ooso.net/archives/210 http://www.ooso.net/archives/210#comments Thu, 03 Aug 2006 00:33:48 +0000 Volcano http://www.ooso.net/index.php/archives/210 阅读全文（397字）]]> 写这个标题一定会被打死。

    可能这个幻灯跟赚钱没关系－－Getting Rich with PHP 5(IE之外的浏览器可看)。但是个人认为它所介绍的程序优化和分析的方法比较有意思，广大php爱好者如能掌握，说不定真的就解决了温饱问题进而赚了大钱。

    幻灯的大义：

    首先你准备建一个大流量的网站

    这个网站真的很大，可能会有这些特点：

    • web 2.0的亲戚
    • 有tag系统
    • ajax用的港港的，溜的很
    • 有500000活跃用户
    • 等等。。。

    初步估计这个流量大概是：
    平均:578次访问/秒
    峰值:578 x 3 = 1700次访问/秒

    而且这个网站是用Linux+Apache+PHP做的，怎么样？头大了吧。
    怎么样用尽可能少的资源，服务更多的人群呢？这就是这个幻灯的最终效果，省下了服务器，也就是赚了钱，对吧？至于您的50万流量的网站有没有转下去并因此赚了钱，那是另外一回事。

    用到的关键词

    Postgresql,Mysql,APC,Callgrind

    ]]>     http://www.ooso.net/archives/210/feed 2     试用google search的Ajax api http://www.ooso.net/archives/185 http://www.ooso.net/archives/185#comments Fri, 02 Jun 2006 14:24:51 +0000 Volcano http://www.ooso.net/index.php/archives/185 阅读全文（955字）]]> 最近两个月访问google老抽风，也8知道伟大的GFW使了些什么手段。虽然形式不容乐观，仍然是看到了狗狗发布了google adsense api和google search ajax api,显然后者更具有实用价值。因此俺用迅雷不及掩耳盗铃之势申请了api key,在参考了online manual之后，还是用实际代码说话吧：

    PLAIN TEXT
    JAVASCRIPT:
    1. function OnLoad() {
    2.         // Create a search control
    3.         var searchControl = new GSearchControl();
    4.        
    5.         // 搜索选项，这里设置为自动展开
    6.         var options = new GsearcherOptions();
    7.         options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
    8.  
    9.         // 添加了一个网页搜索
    10.         searchControl.addSearcher(new GwebSearch(), options);
    11.  
    12.         // 搜索结果输出选项，列表显示 GSearchControl.DRAW_MODE_TABED是另外一个选项，tab方式显示各种搜索结果
    13.         var drawOptions = new GdrawOptions();
    14.         drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR);
    15.             
    16.         // 每次显示8条搜索结果
    17.         searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);
    18.         // Tell the searcher to draw itself and tell it where to attach
    19.         searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
    20.        
    21.         // 开始搜索
    22.         searchControl.execute("Google");
    23.     }

    目前这个api的版本是0.1,正式版1.0发布之后，搜索结果将会有广告显示，显然这个午餐不免费。

    ]]>     http://www.ooso.net/archives/185/feed 0     用php将rss转化为json格式 http://www.ooso.net/archives/184 http://www.ooso.net/archives/184#comments Mon, 29 May 2006 06:41:38 +0000 Volcano http://www.ooso.net/index.php/archives/184 php array -> json 我们不必从头进行这些工作,pear已经提供了一些可用的类库,到命令行下面利用pear安装这些包 pear install channel://pear.php.net/XML_RSS-0.9.9 阅读全文（453字）]]> 要用php将rss转换成json,简单的转换思路是:
    rss -> php array -> json

    我们不必从头进行这些工作,pear已经提供了一些可用的类库,到命令行下面利用pear安装这些包
    pear install channel://pear.php.net/XML_RSS-0.9.9
    pear install channel://pear.php.net/HTML_AJAX-0.4.0

    下面是一个简单的测试代码:

    PLAIN TEXT
    PHP:
    1. <?php
    2. require_once 'XML/RSS.php';
    3. require 'HTML/AJAX/JSON.PHP';
    4.  
    5. $rss = new XML_RSS('http://www.ooso.net/index.php/feed/');
    6. $rss->parse();
    7. //var_dump($rss->getItems());
    8.  
    9. $json = new HTML_AJAX_JSON();
    10. $js = $json->encode($rss->getItems());
    11.  
    12. echo $js;
    13. ?>

    ]]>     http://www.ooso.net/archives/184/feed 3     php+ajax文件上传进度条 http://www.ooso.net/archives/169 http://www.ooso.net/archives/169#comments Wed, 15 Mar 2006 02:39:50 +0000 Volcano http://www.ooso.net/index.php/archives/169 阅读全文（990字）]]> 找到一篇文章PHP AJAX File Upload Progress Meter Updates,介绍如何用php Pear:HTML_AJAX制作带有进度条的文件上传,下面是我测试上传时的示意图

    ajax带进度条上传


    代码分为以下部分:

    demo.php - 上传过程处理

    PLAIN TEXT
    PHP:
    1. <?php
    2.  
    3. include 'UploadProgressMeter.class.php';
    4.  
    5. $fileWidget = new UploadProgressMeter();
    6.  
    7. if ($fileWidget->uploadComplete()) {
    8.         // 上传完毕的时候,从iframe发送一个js到主窗口表示一切ok
    9.         echo $fileWidget->finalStatus();
    10.  
    11.         // 处理上传后的文件...
    12.  
    13.         exit;
    14. }
    15. ?>

    demoserver.php - ajax的服务端js,使用Pear:HTML_AJAX,直接调用UploadProgressMeterStatus类

    PLAIN TEXT
    HTML:
    1. <script src="http://www.ooso.net/demoserver.php?client=main,request,httpclient,dispatcher,json,util" type="text/javascript"></script>
    2. <script src="http://www.ooso.net/demoserver.php?stub=UploadProgressMeterStatus" type="text/javascript"></script>
    3. <?php echo $fileWidget->renderIncludeJs(); ?>

    进度条的样式表

    PLAIN TEXT
    CSS:
    1. .progressBar {
    2.   position: relative;
    3.   padding: 2px;
    4.   width: 300px;
    5.   height: 40px;
    6.   font-size: 14px;
    7. }
    8. .progressBar .background {
    9.   border: solid 1px black;
    10.   width: 270px;
    11.   height: 20px;
    12. }
    13. .progressBar .bar {
    14.   position: relative;
    15.   background-color: blue;
    16.   width: 0px;
    17.   height: 20px;
    18. }

    表单部分

    PLAIN TEXT
    HTML:
    1. <form action="demo.php" method="post" enctype="multipart/form-data">renderFormExtra(); ?>>
    2. <?php echo $fileWidget->renderHidden(); ?></form><form action="demo.php" method="post" enctype="multipart/form-data"><label>Select File: </label>
    3. <div><?php echo $fileWidget->render(); ?>
    4. <?php echo $fileWidget->renderProgressBar(); ?></div>
    5. </form>

    demo下载 - 密码是www.ooso.net
    作者的svn浏览

    其它类似项目:
    http://pdoru.from.ro/ - 要以patch的形式和php一起编译
    http://www.ugia.cn/?p=54 - 以socket上传文件并显示进度条

    ]]>     http://www.ooso.net/archives/169/feed 18     apache的rewrite – 代理吞吐(Proxy Throughput)功能 http://www.ooso.net/archives/168 http://www.ooso.net/archives/168#comments Tue, 14 Mar 2006 13:13:15 +0000 Volcano http://www.ooso.net/index.php/archives/168 阅读全文（597字）]]> 今天尝试使用apache的rewrite作为ajax跨域调用代理,要用到rewrite的Proxy Throughput功能.翻看apache手册,看上去不算太复杂,只要用flag [P]就可以映射远程页面甚至整个远程网络区域到自己的名称空间.照着手册上写了个配置:

    RewriteEngine On
    RewriteRule ^/proxy/(.*)$ http://$1 [P,L]

    我想通过上面的url重写达到这样的效果,使用代理功能访问http://www.mysite.com/proxy/www.destsite.com,自动使用代理访问www.destsite.com, url不改变.重启apache后,进行测试,始终是无法访问,于是开启rewrite日志:

    RewriteLogLevel 9
    RewriteLog logs/rewrite.log

    日志中显示已经正确转向到www.destsite.com,但是仍然无法访问.郁闷的很,找这边的网管大哥讨教,被告知要开启proxy功能,否则rewrite的Proxy Throughput功能无法使用.于是修改httpd.conf,加入两行:

    LoadModule proxy_module modules/mod_proxy.so
    LoadModule proxy_http_module modules/mod_proxy_http.so

    重启apache测试,一切ok

    ]]>     http://www.ooso.net/archives/168/feed 0     当ajax遭遇系统错误: -1072896658 http://www.ooso.net/archives/167 http://www.ooso.net/archives/167#comments Mon, 13 Mar 2006 07:29:24 +0000 Volcano http://www.ooso.net/index.php/archives/167 阅读全文（552字）]]> 上个礼拜整了个ajax调用yahoo搜索的demo,不想有网友发现search.htm会报javascript错 --- 系统错误: -1072896658.

    他的服务器环境是apache 2.05+php4.3+ie6/firefox 1.07+windows server 2003,而我的服务器环境是apache 2.2+php5.1.2/php4.3+ie6/firefox 1.07+winxp.这个时候俺几乎就要把所有的错归结到windows server 2003身上了.但是对方可以正常查看我放在网上的demo,所以这跟windows的亲戚应该没太大干系,用-1072896658作为关键字google了一下,很快有了答案.
    http://www.panoramio.com/blog/explorer-system-error-1072896658/

    如果XMLHttpRequest对象请求的文档未指定正确的utf-8编码,就会出现这个错误
    浏览器系统错误:-1072896658(Explorer system error: -1072896658)

    解决办法很简单,给代理proxy.php加上简单的一行就一切ok:

    PLAIN TEXT
    PHP:
    1. header('text/javascript; charset=utf-8');

    ]]>     http://www.ooso.net/archives/167/feed 8     js中的template — Jemplate http://www.ooso.net/archives/164 http://www.ooso.net/archives/164#comments Fri, 10 Mar 2006 02:53:19 +0000 Volcano http://www.ooso.net/index.php/archives/164 阅读全文（817字）]]> 最近在调试ajax程序的时候,要格式化数据输出html,代码比较混乱,这时候就比较怀念php里可以用到的各式各样的模板.然而js毕竟是很强大的,俺找到了这个javascript写的template类 -- Jemplate,用法还算简单.

    首先得包含必要的文件:

    PLAIN TEXT
    HTML:
    1. <script language="javascript" src="./prototype.js"></script>
    2. <script language="javascript" src="./lyase_view.js"></script>

    模板可以写在当前html里,也可以写在单独的模板文件:

    PLAIN TEXT
    HTML:
    1. <!--模板定义在textarea标签里了-->
    2. <textarea id="template" style="display:none">
    3.  The Value of x is:<%= context.x%>
    4. </textarea>
    5. <!--赋值,上面的<%= context.x%>将被替换-->
    6. <script>document.write(Lyase.View.render({element:"template"}, {x : 10}));</script>

    如果模板写在单独的文件里:

    PLAIN TEXT
    HTML:
    1. <script>document.write(Lyase.View.render({file:"tmp.tpl"}, {x : 10}));</script>

    模板tmp.tpl的内容为:

    PLAIN TEXT
    HTML:
    1. The value of x is:<%= context.x%>

    甚至还可以支持复杂的循环:

    PLAIN TEXT
    HTML:
    1. <textarea id="template" style="display:none">
    2. <% context.list.each(function(pair){%>
    3.       The value of <%= pair.name %> is: <%= pair.value%>
    4. <% }) %>
    5. </textarea>

    PLAIN TEXT
    JAVASCRIPT:
    1. //code
    2. document.write(Lyase.View.render({element:"template"}, {list :[{name : "x", value : 10}, {name : "y", value : 20}]}));

    很可惜的是,我测试的时候,这东东只能utf-8环境下跑的很好,gb2312会被显示为乱码,估计是Prototype的ajax在post的时候出现的问题

    更多的例子看这里:
    http://inforno.net/articles/2006/02/15/the-embed-javascript-implementation

    ]]>     http://www.ooso.net/archives/164/feed 5     用ajax+json连接yahoo搜索web service打造本地搜索引擎 http://www.ooso.net/archives/160 http://www.ooso.net/archives/160#comments Tue, 07 Mar 2006 09:18:39 +0000 Volcano http://www.ooso.net/index.php/archives/160 阅读全文（1830字）]]> 今天写了一个demo,利用yahoo提供的Yahoo! UI Library调用search web service,实现本地搜索.下面是代码片断说明:

    调用Yahoo! UI Library Connection Manager的必要代码:

    PLAIN TEXT
    JAVASCRIPT:
    1. <!-- Namespace source file -->
    2. <script src = "js/YAHOO.js"></script>
    3. <!-- Connection Manager source file -->
    4. <script src = "js/connection.js"></script>

    查询表单

    PLAIN TEXT
    HTML:
    1. <form id="form1" name="form1" action="">
    2.   关键字
    3.   :
    4.   <input type="text" id="query" name="query" value="photo" />
    5.   <input type="button" name="Submit" value="搜索" onclick="searchIt(document.getElementById('query').value)" />
    6. </form>

    yahoo提供的的web service,可以直接以json的格式返回数据,也支持xml格式,这里采用json

    PLAIN TEXT
    JAVASCRIPT:
    1. <script type="text/javascript">
    2. //yahoo提供的的web service
    3. var searchUrl = 'http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&results=4&output=json&query=';
    4.  
    5. var resultWin = document.getElementById('result');
    6.  
    7. var responseSuccess = function(o){ //调用成功后执行的函数
    8.  //transaction success case logic
    9.  eval('var rs =' + o.responseText);
    10.  var tmp;
    11.  var j = 0;
    12.  
    13.  //这里以js格式化数据内容
    14.  var content = '
    15. <ul>';
    16.  for(i in rs.ResultSet.Result) {
    17.   tmp = rs.ResultSet.Result[i];
    18.   content+= '
    19. <li class="cols"><a target="_blank" href="' + tmp.ClickUrl + '"><img src="' + tmp.Thumbnail.Url + '" width="60" border="0" alt="' + tmp.Title + '"/></a></li>
    20. ';
    21.  
    22.   if(j == 4) {
    23.    j = 0;
    24.    content+= '
    25. <div class="rows"></div>
    26. ';
    27.   } else {
    28.    j++;
    29.   }
    30.  }
    31.  content+= '</ul>
    32. ';
    33.  
    34.  resultWin.innerHTML = content;
    35.  document.getElementById('debug').innerText = o.responseText;
    36. }
    37.  
    38. //callback定义,见<a href="http://developer.yahoo.net/yui/connection/index.html">http://developer.yahoo.net/yui/connection/index.html</a>
    39. var callback =
    40. {
    41.  success:responseSuccess
    42. }
    43.  
    44. //查询
    45. function searchIt(query) {
    46.  if(!query)
    47.   return;
    48.  resultWin.innerHTML = '查找ing.....
    49. <img src="images/searching.gif"/>';
    50.  YAHOO.util.Connect.asyncRequest('POST', searchUrl + query, callback, null);
    51. }
    52.  
    53. </script>

    最开始使用了上面的代码片段,在本机能够成功调用yahoo的web service,但是经常报跨站警报,相当不便.
    于是采用代理模式,写了个很简单的proxy.php,如下:

    PLAIN TEXT
    PHP:
    1. <?php
    2. $searchUrl = 'http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&results=4&output=json&query=';
    3. if(!empty($_POST['query']))
    4.  echo file_get_contents($searchUrl . $_POST['query']);
    5. ?>

    而js部分只要做个小小调整

    PLAIN TEXT
    JAVASCRIPT:
    1. var searchUrl = 'proxy.php';
    2.  
    3. ..................................
    4.  
    5. //查询
    6. function searchIt(query) {
    7.  if(!query)
    8.   return;
    9.  resultWin.innerHTML = '查找ing.....
    10. <img src="images/searching.gif"/>';
    11.  YAHOO.util.Connect.asyncRequest('POST', searchUrl, callback, 'query=' + query);
    12. }

    最后就以这段简单的代码实现了本地搜索,你可以在此demo的基础上进一步完善,例如翻页,调整每页显示的数目等等,具体参数请参考http://developer.yahoo.net/search/local/V3/localSearch.html

    解压密码:www.ooso.net
    demo下载

    参考文档:
    http://developer.yahoo.net/yui/connection/index.html
    http://developer.yahoo.net/php/howto-parseRestPhp.html

    ]]>     http://www.ooso.net/archives/160/feed 8     Rasmus Lerdorf: 无框架式的PHP MVC 框架 http://www.ooso.net/archives/153 http://www.ooso.net/archives/153#comments Thu, 02 Mar 2006 04:04:23 +0000 Volcano http://www.ooso.net/index.php/archives/153 Rasmus Lerdorf 在他的blog上发表了一篇文章no-framework PHP MVC framework,这篇文章的例子是一个简单的web应用,使用sqlite和pdo做为数据库应用层,用ajax和json做为数据校验,view层使用了一些Yahoo! User Interface Library.的组件,全部例子完全由PHP+HTML+JAVASCRIPT组成,没有使用第三方的Framework.

    注:这篇文章的主题只是提出如何使用php本身构建mvc的web应用,并不讨论面向过程还是面向对象两种编程方式哪种更好.

    ]]>     http://www.ooso.net/archives/153/feed 0     phpmore vol6 发布 http://www.ooso.net/archives/149 http://www.ooso.net/archives/149#comments Tue, 14 Feb 2006 00:37:41 +0000 Volcano http://www.ooso.net/index.php/archives/149 阅读全文（161字）]]>

  • 什么是Web 2.0
  • prototype.js开发笔记
  • Tips：用prototype写Ajax网站
  • 构建跨浏览器的XML+XPath数据岛应用
  • 如何创建Rss2.0文档
  • 小巧灵活的AJAX开发库-SACK
  • Ajax in CakePHP
  • 轻轻松松做拖动
  • 点击下载《PHP&MORE》电子杂志第六期。 投稿信箱EasyChen@Gmail.com
    • ]]>     http://www.ooso.net/archives/149/feed 0