php中基于prototype框架的ajax

前几天试了下XAJAX，这对于JS不好的PHPER来说，确实是个福音。但它对PHP和HTMLclass="t_tag">代码分离支持得不好。于是昨天又找了prototype这个纯JS框架，用prototype写了一个AJAX测试class="t_tag">代码。因为我想用POST方法发送一段JSON，所以要先将JSON转化为字符串形式再POST，于是又去网上DOWN了一个json.js，用它的toJSONString()方法来转换。

代码写好后，在IE里测试，一切正常，可是FF下死活没有反应，而且错误控制台也不显示错误。这下就郁闷了，本来采用prototype.js来写AJAX是因为它的跨浏览器特性，可现在连FF都没法通过，谈何跨浏览器？

然后又去网上找基于prototype的ajax实例代码，运行也都没有问题，FF下也正常。这就更奇怪了，为什么我写的就不行呢？无意中在GOOGLE里看到一句"prototype.js和json.js一起用会有冲突，只表现在FF下，IE里正常"，原来如此！

后来又继续看到，其实prototype.js 1.51的版本中，已经有了toJSON()和evalJSON()这两个方法，那我还要json.js干嘛？

去掉包含json.js的代码，然后再在FF下测试，一切正常了。

构建一个基于prototype的ajax操作实例:

1.包含prototype.js文件：

 

<script type="text/javascript" src="../jsframework/prototype.js"></script>


2.写一个函数，用来响应元素的onclick事件，其中包含ajax操作：

 


function Ajax_test()
{
var form_obj=$('form_test');
var pars=form_obj.serialize(); //得到表单中的值序列化后的字符串,如果加入参数true，则序列化成json字符串。

var url='ajax_test.php'; //定义在后台处理ajax响应的文件。

//创建一个ajax响应

var myajax=new Ajax.Request(url,{
  method: 'post', //用POST方式来发送数据。网上关于用GET方法的例子多得是，用POST的却没几个。

  contentType: 'application/x-www-form-urlencoded',
  asynchronous: true, //是否异步

  encoding: 'UTF-8',
  parameters: pars, //需要传递的参数，即要发送到服务端的数据。

  requestHeaders: {Accept:'application/json'}, //通知浏览器要传递的是JSON数据。

  onSuccess: update_page //用来处理返回数据的函数。

  });
}


3.写一个函数，用来处理返回的数据，以及更新当前的页面：

 

function update_page(req)
{
var json=req.responseText.evalJSON(true); //用evalJSON()方法把服务端传过来的字符串转化成JSON数据对象。

var doc_obj=$('show_result');
var str='';
str+="姓名："+json.username+"
";
str+="年龄："+json.age+"
";
str+="性别："+json.sex+"
";
str+="工作："+json.job;
doc_obj.innerHTML=str;
}


4.关键HTML：

 

<div id="show_result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div>
<form id="formtest" action="" method="post">
<p><span>输入姓名:</span><input type="text" name="username" id="input1" /></p>
<p><span>输入年龄:</span><input type="text" name="age" id="input2" /></p>
<p><span>输入性别:</span><input type="text" name="sex" id="input3" /></p>
<p><span>输入工作:</span><input type="text" name="job" id="input4" /></p>
</form>
<button onclick=\"Ajax_test();\">提交</button>


5.服务端的PHP代码：

 


<?php
$arr=$_POST;
$myjson=json_encode($arr); //将数组编码成json字符串，然后输出

echo $myjson;
?>




整个过程保持服务端与客户端的编码一致，否则有可能造成乱码。而且曾经的浏览器缓存问题，在测试过程中，不管是用GET还是POST，都好像没有发现。

如果使用application/x-www-form-urlencoded，传输时会自动按照名称/值对编码的，这就说明了，可以使用一个JS对象，或者一个哈希数组来传值。因此，上面的Ajax_test()可以改成：

 

function Ajax_test () {
    var url='ajax_test.php';

    var pars=new Object();
    //分别取各表单控件的值，存到对象pars的属性中

    pars.username=$F('input1');
    pars.age=$F('input2');
    pars.sex=$F('input3');
    pars.job=$('input4').getValue(); //与$F('input4')等同


    var myajax=new Ajax.Request(url,{
                       method: 'post',
                       parameters: pars, //pars这时其实是个对象

                       contentType: 'application/x-www-form-urlencoded',
                       // contentType: 'text/plain',

                       requestHeaders: {Accept: 'application/json'},
                       onSuccess: operate
                       });
}


另外，prototype还提供了toJSON和evalJSON方法，对JSON来说，确实是很方便了，也就不需要再用json.js了。还有toQueryString方法：

 

 

<script type="text/javascript">
var o=new Object();
o.name='orange';
o.age=100;
o.job='计算机';
var jsonstr=Object.toJSON(o);//将对像格式化成JOSN字符串

alert(jsonstr); //{"name": "orange", "age": 100, "job": "计算机"}

var json=jsonstr.evalJSON(); //将字符串转化为json对象

alert(json.name); //orange

var hash=$H(o); //将对象转化成哈希数组

alert(hash.toQueryString()); //name=orange&age=100&job=%E8%AE%A1%E7%AE%97%E6%9C%BA

</script>