不知道看到这个标题的大家会觉得这里的json是指什么，貌似是一个人的名字，但是这里加上使用就肯定不是指某个人啦。?

我也稍微地说一下json，JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。不知道大家有没有接触过或者用过xml来传输数据，而json的作用与xml是一样的，作为数据传送的一种格式，后起之秀。Paperen我是先用上了json的，当初是在一本叫《PHP.5.高级应用开发实践》的书中看到过json的使用，而xml自己目前还没有在实际中用过。?

对于json大家可以访问一下站点：

http://baike.baidu.com/view/136475.htm

http://www.json.org/json-zh.html?

而今天一位同事（到了别的单位当php程序员了，以前是写Css与网页设计的），可能对这方面的东西了解不太多，他给我发了个压缩包让我帮帮他，我看了看，是一个买车方面的网站，大概是在举行一个什么活动吧，右边是一个注册框，左边是一个显示已经注册的那些人的信息，应该好办吧？如果这个页是php的话，但是我看了看发现这个页时html的，或者大家会问这代表什么？那代表这个页面是个死的，不能变通的，它本身不能随着数据库数据的添加而产生相应的变化。那么如果要实现这个功能该怎样做呢？

当Paperen我了解到这个后，我脑中浮现的解决方案是ajax+jquery+json，显然对于html我们可以使用js操作页面某些元素的增加与减少，这就是唯一能使html页面变通的办法了，而这些数据来自哪里呢？很明显是来自数据库，那怎来自数据库呢？不是说html是死的吗？所以我们要使用Ajax这个技术，Ajax又是什么……算了，我Paperen这篇的文章并不是写给对ajax一无所知的人看的（请原谅Paperen我吧…如果这样解析下去，我恐怕写不完了…），那么对于数据的封装我们就可以用上json了！


下面Paperen先写个很简陋的html页面，好让对这个功能不太了解的人有个形象的认识。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>json+ajax</title>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/car.js"></script>
</head>
<body onload="read_data()">
<ul id="member_list">
</ul>
<span id="reg_tip"></span>
<p>Name:<input type="text" id="name" /></p>
<p>Phone:<input type="text" id="phone" /></p>
<p>Email:<input type="text" id="email" /></p>
<p><input type="button" id="reg_btn" value="Submit" onclick="reg()" /></p>
</body>
</html>

这里稍微注意一下，在中引入js文件时要注意引入的顺序，先是要引入jquery.min.js，jquery的框架（这是必须的），还有引入一个是我们自定义的js文件，用来放我们自定义的一些js函数。如果引入顺序颠倒了，会导致我们写的js函数中的某些功能不能正常工作的。
给body引入一个onload事件，就是浏览器第一次加载这个页面时会触发read_data()这个函数，member_list是用来显示数据的，记得id名字在一个页面中是唯一。我这里随便弄了三个text框，id分别是name，phone，email，还有一个按钮叫reg_btn给它一个onclick事件，就是点击后触发后面的一个叫reg()函数。
同时我们要把需要的文件都建立好，还有路径确定好，Paperen我是这样分配的，根目录中放着两个文件，一个是这个index.html页面，一个是叫paperen.php的文件，名字根据个人需求起吧，还有三个文件夹分别是js（用来放js文件）,data（之后用来放数据文件的），class(放一个来用处理mysql连接的类)，因为这是一个例子所以文件就这么多就可以了，可能实际操作中会需要更多文件来实现整站的功能，下面我们来写写js动作吧，实现第一个功能就是用户注册功能。

?function reg(){
?//在这里进行一下判断，非空之类的
?var name=$("#name").val();
?var phone=$("#phone").val();
?var car=$("#car").val();
?$.post("paperen.php",{Action:"post",act:'reg',name:name,phone:phone,email:email},function(data){
??//alert(data);???????????????????if(data==1){
???//注册成功
???$("#reg_tip").html("注册成功");
???//重新刷新页面
???setTimeout("window.location.reload();",1500);
??}else{
???//注册失败
???$("#reg_tip").html("注册失败，请重试");
??}
?});
?}

这就是实现注册功能的一个js函数，我使用了JQuery来调用ajax，而不是使用传统js的方法来调用ajax，大家可以对比一下jquery来调用ajax与传统那种方法，看看哪个更简洁一些。将html页中的数据以post的方式传送到一个叫paoeren的php文件处理，而对于paperen文件中怎样进行编码我这里就不多说了，就是要组合一条sql语句然后送入数据库执行，ok则返回1，不ok则返回0到我们浏览器端的js函数进行判断注册成功与否，然后根据这个data值分别执行不同的操作，这就是ajax技术的强大之处。（如果要调试的话，可以使用alert对data进行一下调试，看看从php文件送回来的数据是不是正确）不过还应当注意一下在paperen页中编码问题，例如要用header定义一下页面的编码是很要必要的，另外要使用iconv函数对传送过来的数据进行编码转换，不然很可能会使中文数据产生乱码的现象。对于ajax传值时的编码问题可以看看Paperen以前写的那篇 Ajax实现网页聊天 ，这里就不多说了。（这里我只想说说html页与js的编写方面还有json的运用，php那边就轻轻地说而已。）


这就是实现了注册的功能，但还有一个功能就是显示注册的信息，我们需要读出数据，原理与注册功能是一样的，同样是使用ajax，但是还需要json对数据进行封装有利于它的传送，而我这里还进行了一个处理，就是将数据放到data文件夹一个文件中（比如是data.txt吧），为什么还要将数据放到一个文件中呢？可能有人会问这个问题，嗯，paperen我在做到那一步的时候也这么考虑过，用直接将数据从php那个页面传过来不就行了，还要弄个文件放数据？是不是有点多余啊？而我是这样想的，因为如果你不建立这个data文件的话会增加数据库的负担，因为我们每次访问这个html页就会触发去查一下数据库的数据然后再将数据传送过来。可以举个例子来对比一下。


如果有10个人访问这个页面，其中4个人进行注册，那么如果不建立这个data文件的话，需要与数据交互18次（10次来自第一次加载页面，4次是因为要往数据库写入注册信息，还有4次是当注册成功后页面重新加载时产生的），如果建立这个data文件的话，只需要与数据库交互4次。可见优势在哪里了，但当然这样做也有自身的不足。
对于对数据进行json编码也很简单，不过对于php版本大于5.2.0才会支持这个函数，paperen我这个空间上的php就没有json_encode这个函数不过还是有弥补的方法的，下面是一个json_encode函数。

http://rikugun.javaeye.com/blog/242577?

好像还有关于json的专门一个class文件，paperen我暂时没找到资源，所以目前我也只是将json函数引入到站点的函数库文件中去解决这个问题的。使用这个函数时直接json_encode($array)就ok啦。

再说一下read_data()这个函数吧，当页面加载的时候就会执行该js函数与paperen.php进行交互，并从data/data.txt中读取数据显示到页面上。

function read_data(){
  $.post("paperen.php",{Action:"post",act:"read"},function(data){
   //alert(data);//这里进行调试之用,弹出从read文件传来的数据
   if(data){
    var result=eval('('+data+')');
    var info="";
    for(i=0;i    {
     info+="<li>name:"+result[i].name+" phone:"+result[i].phone+" car:"+result[i].email+"</li>";
    }
    $("#show_info").html(info);
   }
   else{
    $("#show_info").html("读取失败");
   }
  });
 }
其实这个read_data与reg其实都差不多，而它的重点在于要对json封装的数据进行解封的操作并组合成我们要求的html结构再输出到页面上，而这一句就是获取json的数据的关键
info+="<li>name:"+result[i].name+" phone:"+result[i].phone+" car:"+result[i].email+"</li>";

?而对于paperen.php文件中获取数据这个操作，其实就是一个读取文件并获取数据的操作，fopen,fread这两个函数就可以派上场了，如果大家考过三级计算机等级考试或者学过c语言的话对这两个函数都应该有点印象，上机题目中都是用这几个函数去处理文件中的数据的。


而最后paperen又想了想是不是可以将json封装的数据直接写到一个js文件里面放到一个变量中然后在页面加载的时候引入这个js文件不就可以了还省去了与paperen文件交互的一环，确实这个方法比我这样做更好，而我同事给我的那个站点文件中就是用了这个方法来处理的，其实已经有一个不错的思路，但也得能了解才能去写代码，如果连json都不太清楚的话，碰到这种数据形式真的不知道怎下手的。而paperen我还是觉得实现一个功能确实有很多种途径，但若要寻求一种最优的方法的话，确实需要下不少功夫，至少你要了解很多东西，想到这里paperen我又想起了我们副院长说的那句话“任何技术上的问题都不会是问题，只要给你足够的时间与支持。”，paperen我越来越觉得这是个真理了。

最后最后还发表一下感慨吧――发表一篇文章真不容易啊！这篇文章都写了三天了……本来昨晚就可以发表出来的了，却加班到晚上八点……回到宿舍都8点半了……