某人的栖息地 » ajax http://www.ooso.net Linux + Apache + Mysql + Php + Flash Thu, 19 Jan 2012 01:21:44 +0000 en hourly 1 http://wordpress.org/?v=3.3.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 阅读全文（350字）]]> 使用picasa的时候，注意到它首先是显示模糊的图片，然后图片突然变得清晰，这样做有一定的好处——picasa的图片翻页是用javascript实现的，如果直接载入大图，中间势必会有个空档，用户在这中间会感觉很空虚~~

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

代码示例

<img id="myImage" src="small_144.jpg" width="640" />
var img = new Image();
img.src = "http://imghost/big_640_480.jpg";
img.onload = function() {
  document.getElementById('myImage').src = this.src;
}

如此这般，待大图载入完成之后，利用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 阅读全文（497字）]]> 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使用方法

传统方式

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

使用google.load载入

<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1");
</script>

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

Update

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

]]> http://www.ooso.net/archives/404/feed 10 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 阅读全文（901字）]]> 上次俺的简陋练习作品Ajax+json小有心得，这次继续尝试利用Ajax+PHP+YUI手工制作rss阅读器。

写一点html来展示RSS的内容

<body>
<h1>RSS阅读器</h1>
<div id="rss_bd">内容待填补</div>
</body>

利用YUI的Connection manager来处理XHR

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

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js"></script> 

<script type="text/javascript">
var sUrl = 'proxy.php';
var callback =
{
  success: function(o) {
     document.getElementById('rss_bd').innerHTML = o.responseText;
  },
  failure: function(o) {/*failure handler code*/}
}
var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
</script>

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

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

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

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

到这里，一个简陋的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 阅读全文（751字）]]> 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调用

GM_xmlhttpRequest({
    method: 'GET',
    url: 'http://greaseblog.blogspot.com/atom.xml',
    headers: {
        'User-agent': 'Mozilla/4.0 (compatible) 

Greasemonkey',
        'Accept': 

'application/atom+xml,application/xml,text/xml',
    },
    onload: function(responseDetails) {
        alert('Request for Atom feed returned ' + 

responseDetails.status +
              ' ' + responseDetails.statusText + '\n\n' 

+
              'Feed data:\n' + 

responseDetails.responseText);
    }
});

较详细一些的内容，可以去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 阅读全文（2178字）]]> 作为一个PHP开发人员来说，大概很让人受用的一个东东就是Pear的类库了。我们知道，Pear::Pager是专门处理分页的，而Pear::HTML_AJAX则是Ajax应用的一些类库。但是Pager也不仅仅是只能用于html的分页链接，它已经为比超女还红的Ajax做好了准备，下面看看这两个包如何整合应用。

Pager and Javascript

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

require_once 'Pager/Pager.php';
$data = range(1, 100); //an array of data to paginate
$pager_params = array(
    'mode'     => 'Sliding',
    'append'   => false,  //don't append the GET parameters to the url
    'path'     => '',
    'fileName' => 'javascript:revealDiv(%d)',  //Pager replaces "%d" with the page number...
    'perPage'  => 10, //show 10 items per page
    'delta'    => 5,
    'itemData' => $data,
);
$pager = & Pager::factory($pager_params);
$n_pages = $pager->numPages();
$links = $pager->getLinks();
?>
<html>
<head>
    <script type="text/javascript" language="javascript">
    var n_pages = <?php echo $n_pages ?>;
    function revealDiv(n)
    {
        for (var count = 1; count <= n_pages; count++) {
          document.getElementById("page"+count).style.display = 'none';
        }
        document.getElementById("page"+n).style.display = 'block';
    }
    </script>
    <style type="text/css">
    div.page {
      background: #FFFF99;
      border-top: 1px solid #FFBF99;
      border-bottom: 1px solid #FFBF99;
    }
    </style>
</head>
<body>
<h1>PEAR::Pager example with JavaScript</h1>
<?php echo $links['pages']; ?>
<hr />
<?php
for ($i=1; $i <= $n_pages; ++$i) {
    echo '<div class="page" id="page'.$i.'">';
    echo '<h2>Page '.$i.'</h2>';
    foreach ($pager->getPageData($i) as $item) {
        echo 'Item '.$item.'<br />';
    }
    echo '</div>';
}
?>
<hr />
<script type="text/javascript" language="javascript">
revealDiv(1);
</script>
</body>
</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的内容。

    <html>
<body>
<h1>PEAR::Pager example with AJAX</h1>

<script type="text/javascript" src="server.php?client=all"></script>

<div id="target">I'm the target</div>

<script type="text/javascript">
    HTML_AJAX.replace('target', 'testdata.php');
</script>

</body>
</html>
  • testdata.php

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

    <?php
require_once 'Pager/Pager.php';
$data = range(1, 100); //an array of data to paginate
$pager_params = array(
    'mode'     => 'Sliding',
    'append'   => false,  //don't append the GET parameters to the url
    'path'     => '',
    'fileName' => 'javascript:HTML_AJAX.replace('target','testdata.php?pageID=%d');',  //Pager replaces "%d" with the page number...
    'perPage'  => 10, //show 10 items per page
    'delta'    => 1,
    'itemData' => $data,
);
$pager = & Pager::factory($pager_params);
$n_pages = $pager->numPages();
$links = $pager->getLinks();
echo '<p>This container is loaded with an AJAX call</p>';
echo '<p><span class="datetime">DateTime: '. date('Y-m-d H:i:s') .'</span></p>';
echo '<h3>Page '. $pager->getCurrentPageId() .'</h3>';
foreach ($pager->getPageData() as $item) {
    echo 'Item '. $item .'<br />';
}
echo '<hr />'.$pager->links;
?>
  • 最后，贴上幕后工作者server.php的代码

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

    <?php
include 'HTML/AJAX/Server.php';

$server = new HTML_AJAX_Server();
$server->handleRequest();
?>

    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 阅读全文（992字）]]> 前些天试用了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肥硕体积来说，显然更经济，可用于线上系统。
    • 这三个文件最好都要的： 
      <!-- Dependency -->
<script src="yahoo.js"></script>  

<!-- OPTIONAL: Required if using setForm() to upload files -->
<script src="event.js"></script>  

<!-- Source file -->
<script src="connection.js"></script>
    • 最后说个特好用的方法 —— setForm，这功能可以解析某个表单的内容，自动拼凑出用于ajax提交的数据串，甚至可以用于文件上传，实在是居家旅行必备。 
      var formObject = document.getElementById('aForm');
YAHOO.util.Connect.setForm(formObject);
// This example facilitates a POST transaction.
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之后，还是用实际代码说话吧：

    [javascript]
    function OnLoad() {
    // Create a search control
    var searchControl = new GSearchControl();

    // 搜索选项，这里设置为自动展开
    var options = new GsearcherOptions();
    options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);

    // 添加了一个网页搜索
    searchControl.addSearcher(new GwebSearch(), options);

    // 搜索结果输出选项，列表显示 GSearchControl.DRAW_MODE_TABED是另外一个选项，tab方式显示各种搜索结果
    var drawOptions = new GdrawOptions();
    drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR);

    // 每次显示8条搜索结果
    searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);
    // Tell the searcher to draw itself and tell it where to attach
    searchControl.draw(document.getElementById(“searchcontrol”), drawOptions);

    // 开始搜索
    searchControl.execute(“Google”);
    }
    [/javascript]

    目前这个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 阅读全文（442字）]]> 要用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

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

    < ?php
require_once 'XML/RSS.php';
require 'HTML/AJAX/JSON.PHP';

$rss = new XML_RSS('http://www.ooso.net/index.php/feed/');
$rss->parse();
//var_dump($rss->getItems());

$json = new HTML_AJAX_JSON();
$js = $json->encode($rss->getItems());

echo $js;
?>
    ]]>     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 阅读全文（979字）]]> 找到一篇文章PHP AJAX File Upload Progress Meter Updates,介绍如何用php Pear:HTML_AJAX制作带有进度条的文件上传,下面是我测试上传时的示意图

    ajax带进度条上传


    代码分为以下部分:

    demo.php – 上传过程处理

    < ?php

include 'UploadProgressMeter.class.php';

$fileWidget = new UploadProgressMeter();

if ($fileWidget->uploadComplete()) {
        // 上传完毕的时候,从iframe发送一个js到主窗口表示一切ok
        echo $fileWidget->finalStatus();

        // 处理上传后的文件...

        exit;
}
?>

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

    < ?php echo $fileWidget->renderIncludeJs(); ?>[/html]

    进度条的样式表
    [css].progressBar {
    position: relative;
    padding: 2px;
    width: 300px;
    height: 40px;
    font-size: 14px;
    }
    .progressBar .background {
    border: solid 1px black;
    width: 270px;
    height: 20px;
    }
    .progressBar .bar {
    position: relative;
    background-color: blue;
    width: 0px;
    height: 20px;
    }[/css]

    表单部分
    [html]

    renderFormExtra(); ?>>
    < ?php echo $fileWidget->renderHidden(); ?>

    < ?php echo $fileWidget->render(); ?>
    < ?php echo $fileWidget->renderProgressBar(); ?>

    [/html]

    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 
    <font face="Courier New">[P]就可以</font>

    映射远程页面甚至整个远程网络区域到自己的名称空间.照着手册上写了个配置:

    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 1     当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 阅读全文（541字）]]> 上个礼拜整了个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:

    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,用法还算简单.

    首先得包含必要的文件:
    [html]


    [/html]

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





    [/javascript]

    查询表单
    [html]

    关键字
    :

    [/html]

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

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

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

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

    [javascript]var searchUrl = ‘proxy.php’;

    …………………………….

    //查询
    function searchIt(query) {
    if(!query)
    return;
    resultWin.innerHTML = ‘查找ing…..
    ‘;
    YAHOO.util.Connect.asyncRequest(‘POST’, searchUrl, callback, ‘query=’ + query);
    }[/javascript]
    最后就以这段简单的代码实现了本地搜索,你可以在此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