Joomla! 1.5 组件使用AJAX例程 【转】

 

Joomla! 1.5 组件开发中使用AJAX相对容易，因为Joomla! 1.5 一直在努力推进客户端采用开源的Mootools框架，Mootools包含了AJAX包，这个包使AJAX开发起来非常简单，以下是我做的一个简单例程，希望对大家有所帮助。其实com_jam这个Joomla!站内信组件是AJAX的，感兴趣的朋友可以安装一个看看，界面有点土，但是基本功能还是不错的。

例程组件com_test ，我们需要修改的是三个文件，一是视图模板文件 views/test/tmpl/default.php 二是新增一个 views/test/view.raw.php ，这个view.raw.php是JDocumentRaw的实现。

首先来新增  views/test/view.raw.php，源代码如下：

<?php jimport( 'joomla.application.component.view');class TestViewTest extends JView{ function display($tpl = null) { global $mainframe; echo 'this is ajax!'; }}?> 

 

功能很简单，就是echo一个 'this is ajax!'文字，这个代码可以更复杂，比如数据库交互，返回xml格式数据等。现在你可以通过 http://yourdomain.com/index.php?option=com_test&view=test&format=raw 来访问一下，就会返回你的 this is ajax 数据

接着我们来修改default.html，源代码如下：

<h3>Simple Ajax Request</h3><p><a id="start" href="#" mce_href="#">Click here</a> to start Ajax request</p><div id="log"> <p>Waiting...</p></div><mce:script type="text/javascript"><!--$('start').addEvent('click', function(e) { e = new Event(e).stop(); var url = "http://www.maycode.com/index.php?option=com_test&view=test&format=raw&temp="+Math.random(); var ajax = new Ajax(url, {  method: 'get',  onRequest: beginWork,  update: $('log'),  onFailure: stopWork,  onComplete: showAjaxBasketContent }).request();});function beginWork(){ $('log').innerHTML = 'option-onRequest:ajax loading........';}function stopWork(){ $('log').innerHTML = 'load failure';}function showAjaxBasketContent(){ $('log').appendText('-----option-onComplete:ajax  succes');}// --></mce:script> 

注意一下 var url= 这段要改为你自己的域名地址，后面之所以加了一个 temp="+math.random() 主要是为了防止缓存对于AJAX返回的数据影响。

Mootools的AJAX对象主要是要设置：update对象，也就是返回要显示在哪里，而onRequest，onFailure，onComplete对应了请求发生的三个事件，Mootools使用起来非常简单。你可以在这里下载Mootools的中文帮助文档http://www.maycode.com/index.php/docman/doc_details/25-mootools.html

Joomla! 中很多用到了Mootools ，这里有相关的一些文章，可以参考一下，对于实现一些特效，或者后台的管理非常有帮助 Joomla!系统中与Mootools相关的教程