mootools中文实例诠释–1.2版AJAX,JSON运用

不久之前我写过一篇关于mootools运用ajax的文章《【mootools中文实例诠释】Ajax类的简单使用》，但是这篇文章是基于mootools 1.11版本写的，今天在用1.2版(以下称mt1.2)写一个关于ajax和json调用的教程。
如果你现在在学mt1.2你会发现1.2版已经取消的Ajax这个类了，取而代之的是更强大的Request类。那要怎么实现Ajax效果呢？
老规矩还是先看效果：
http://xiebiji.com/works/mt1.2Ajax/
示例下载地址：目标另存为
html+js代码

<html>
<head>
<script type="text/javascript" src="mootools.js"></script>
<title>mt1.2ajax-from http://xiebiji.com</title>
<script type="text/javascript">
        var jsonRequest;
        window.addEvent('domready',function(){
                jsonRequest = new Request.JSON({
                        url: "tellMySiteInfo.php", //请求数据链接地址，从这个地址获取后台数据
                        onComplete: function(siteInfo, text){//由上述地址在服务端解释后输出一个json字符串这个字符串即为text,而siteInfo为这个json字符串转化成的js对象
                                $msg='你抛数据的形式是：'+siteInfo.method+'\n';
                                $msg+='你选择的站长是：'+siteInfo.owner+'\n'+'他的个人主页是：'+siteInfo.homePage+'\n\n';
                                $msg+='返回的json字符串是：'+text;
                                $('txt').set('value',$msg)
                        }
                })
        });
        function showMeTheSite(method){
                if(method=='get'){
                        jsonRequest.get({
                                'owner': $('owner').get('value')//$('owner').get('value')为select控件当前值
                        });//以get的方式让jsonRequest抛出数据
                }
                else{
                        jsonRequest.post({
                                'owner': $('owner').get('value')
                        });//以post的方式让jsonRequest抛出数据
                }
                return false;
        }
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
    请选择一个站长：
<select name="owner" id="owner">
    <option value="xiebiji">xiebiji</option>
    <option value="ajoe">ajoe</option>
</select>
    <label>
    <input type="submit" name="getBtn" id="getBtn" value="以get的方式抛数据" />
    </label>
    <label>
    <input type="submit" name="postBtn" id="postBtn"   value="以post的方式抛数据" />
</label>
</form>
数据将在以下文本框显示：<br/>
<textarea style="height:200px; width:300px" name="txt" cols="" id="txt" rows=""></textarea>
</body>
</html>

php文件tellMySiteInfo.php代码

<?php
//定义站点属性
$site1=array(
        'method'=>'',
        'owner'=>'xiebiji',
        'homePage'=>'http://xiebiji.com'
);
$site2=array(
        'method'=>'',
        'owner'=>'ajoe',
        'homePage'=>'http://ajoe.com'
);
$jsonToJs='';//返回的json字符串
if(isset($_GET['owner'])){//假如是get方式
        if($_GET['owner']=='xiebiji'){
                $site1['method']='GET';
                $siteInfo=$site1;
        }
        else{
                $site2['method']='GET';
                $siteInfo=$site2;
        }
}
elseif(isset($_POST['owner'])){//假如是post
        if($_POST['owner']=='xiebiji'){
                $site1['method']='POST';
                $siteInfo=$site1;
        }
        else{
                $site2['method']='POST';
                $siteInfo=$site2;
        }
}
else{
        die('非法操作');
}
$jsonToJs=json_encode($siteInfo);//转为json格式字符串
echo $jsonToJs;
?>

mootools中文实例诠释–1.2版AJAX,JSON运用

有话要说