[JavaScript学习]通过Ajax获取对象信息（基于JSON方式）_H5之家

都快11月份了，天气还是炎热，保持在30多度，老家都穿棉袄了，深圳这鬼地方，我也是醉了。好吧，今天继续学习。

上一篇文章中我们介绍了如何通过Ajax使用基于XML格式的字符串返回对象的信息。使用XML格式的缺点是字符串中附加的标签太多，实际上有用的数据很少，造成传输时带宽的浪费。

我们在前面介绍过json对象，我们可以通过json格式的字符串来返回对象信息。来看下面的例子。

在这个例子中，同样在服务器端有一个Person类，我们创建一个Person.class.php文件，文件中的代码如下：

/** Person.class.php **/ <?php class Person{ private $id; private $name; private $age; /** 公开的get和set方法 **/ public function getId(){ return $this->id; } public function setId($id){ $this->id = $id; } public function getName(){ return $this->name; } public function setName($name){ $this->name = $name; } public function getAge(){ return $this->age; } public function setAge($age){ $this->age = $age; } } ?>

在PersonService.php文件中，同样创建3个person对象，然后通过字符串拼接的方法将对象的信息拼接为JSON格式的字符串。最后将这个字符串返回。

/** PersonService.php **/ <?php require_once 'Person.class.php'; header("Content-type: text/html; charset=utf-8"); $person1 = new Person(); $person1->setId(1); $person1->setName("Leon"); $person1->setAge(23); $person2 = new Person(); $person2->setId(2); $person2->setName("Ada"); $person2->setAge(22); $person3 = new Person(); $person3->setId(3); $person3->setName("Mike"); $person3->setAge(25); //拼接json字符串 $json = "["; $json.="{"; // person1 $json.="id:"; $json.=$person1->getId(); $json.=","; $json.="name:\""; $json.=$person1->getName(); $json.="\","; $json.="age:"; $json.=$person1->getAge(); $json.="},"; // person2 $json.="{"; $json.="id:"; $json.=$person2->getId(); $json.=","; $json.="name:\""; $json.=$person2->getName(); $json.="\","; $json.="age:"; $json.=$person2->getAge(); $json.="},"; //person3 $json.="{"; $json.="id:"; $json.=$person3->getId(); $json.=","; $json.="name:\""; $json.=$person3->getName(); $json.="\","; $json.="age:"; $json.=$person3->getAge(); $json.="}"; $json.= "]"; echo $json; ?>

注意，要返回json格式，需要使用header()函数来注明Content-type为text/html。

现在，在浏览器中直接访问这个php页面，就可以获取到一个json格式的返回字符串，如下面的样子：

[{id:1,name:"Leon",age:23},{id:2,name:"Ada",age:22},{id:3,name:"Mike",age:25}]

我们接着编写客户端代码。同样我们使用一个叫show.html的静态页面来作为显示页面。当访问这个页面的时候，页面中有一个按钮，点击这个按钮就可以从服务端获取所有的Person对象，然后将Person对象的属性打印在页面的指定区域中。

下面是show.html文档的代码，代码十分简单，在<body>中有一个按钮和一个<div>容器。当我们点击按钮的时候，会从服务器端获取所有的Person对象，并将它们的属性打印在容器中。

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Ajax获取对象-基于XML方式</title> </head> <body> <button id="btn">获取Person对象数据</button> <div id="container"></div> </body> </html>