目标:
这篇文章的目标是在自己的组件中使用Ajax技术。
理论:
1,在default.php文件中添加必要的JavaScript ajax代码。或者是其他的模版:components/com_组件的名称/views/tmpl/default.php文件中
示范代码:
<script languange="javascript">
function ajaxGetCitys(country_id)
{
var xhr = getXhr();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200)
{
var city = documnet.getElementById('city');
try {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(xhr.responseText);
}
catch(e)
{
try {
parser = new DOMParser();
xmlDoc = parser.parsFromString(xhr.responseText,"text/xml");
}
catch(e)
{
alert(e.message);
}
}
var options = xmlDoc.getElementsByTagName('options').item(0);
city.innerHTML="";
for(i=0;i<options.childNodes.length;i++)
{
var newoption = document.createElement("option");
var myoption = options.childNodes[i];
var newtext = document.createTextNode(myoption.childNodes[0].nodeValue);
newoption.setAttribute("value",myoption.getAttributeNode('id').value);
newoption.appendChild(newtext);
city.appendChild(newoption);
}
}
}
}
xhr.open("GET","index2.php?option=com_user&task=listcity&coutntry_id="+country_id,true);
</script>
2,在controller.php文件中 添加一个新的函数 这个函数的名称就是task的名称。就像本例中国使用listcity函数。
具体代码:
function listcity()
{
global $mainfram;
$country_id = JRequest::getVar('country_id');
$model = $this->getModel('register');
$states = $model->getStates($country_id);
$return ="<?xml version=\"1.0\" encoding =\"uft8\" ?>";
$return .="<options>";
$return.="<option id='0'>".JText::_('---Select city----')."</options>";
if(is_array($states))
{
foreach($states as $state)
{
$return .="<option id='".$states->state_id."'>".JText::_($state->state_name)."</option>";
}
$return . ="</options>";
echo $return ;
$mainframe ->close();
}
}
3,在上一个例子中,我们用了一个getStates($country_id) 函数,这个函数在register模型中从后台数据中获取城市列表。
自己写代码实践:
在我的组件中先试用一下这个方法。
实现过程:
1,首先在自己的模版中写一个函数,用来响应点击的事件。
2,在这个函数中调用getXhr()函数。当然这个函数我目前还是自己写的。getXhr()和普通的js代码使用Ajax一样。
3,最主要的的两件事就是。我们要调用xhr.open函数。
xhr.open("GET","index.php?option=com_guestbook&testAjax",true);
这里就是告诉ajax去controller.php文件中的testAjax函数中取得数据。
xhr.send(null);
这样就可以实现AJax效果了。
特别要注意 我们的testAjax函数是在主控制器controller.php中实现的。这个一定要弄清楚。
4,如何想Ajax处理函数传递参数呢?
直接在xhr.open("GET","index.php?option=com_guestbook&testAjax",true);
Index.php?option=com_guestbook&testAjax 后添加
例如:
Index.php?option=com_guestbook&testAjax&name=axiang
另外还要注意:在controll.php 中实现testAjax函数时,需要调用
$mainframe = & JFactory::getApplication();
you code here.........
echo $return;
$mainframe->close();
本文结束。希望对你有所帮助。