php获取ajax传过来的json对象,Ajax - 通过Ajax获取对象信息（基于JSON方式）

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

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

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

/** Person.class.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 **/

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文档的代码，代码十分简单，在

中有一个按钮和一个

容器。当我们点击按钮的时候，会从服务器端获取所有的Person对象，并将它们的属性打印在容器中。Ajax获取对象-基于XML方式

获取Person对象数据

实现Ajax请求的JavaScript代码于前面的基于XML格式的代码基本类似，我们只需要修改一下获取字符串的方式和遍历的代码即可。完整的代码如下：

window.onload = init;

function init(){

document.getElementById("btn").onclick = getPerson;

}

function getPerson(){

//1、获取XMLHttpRequest对象

var xhr = createXMLHttpRequest();

//2、通过xhr对象打开页面

xhr.onreadystatechange = function(){

//3、处理请求

if(xhr.readyState == 4 && xhr.status == 200){

//3.1、获取xml节点

var json = xhr.responseText;

// 由于返回的是一个字符串，所以需要使用eval()函数将字符串转换为json对象

var jsonObj = eval(json);

var nodes = "";

//3.2、循环获取person的信息，并组装为xml格式

for(var i = 0; i < jsonObj.length; i++){

nodes += jsonObj[i].id + "------" +

jsonObj[i].name + "------" +

jsonObj[i].age + "
";

}

//3.3、将person数据写入container容器中

document.getElementById("container").innerHTML = nodes;

}

}

xhr.open("POST","PersonService.php",true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send();

}

// 获取XMLHttpRequest对象

function createXMLHttpRequest(){

var xhr;

//IE5和IE6

if(window.ActiveXObject){

try{

xhr = new ActiveXObject(Microsoft.XMLHTTP)

}catch(e){

xhr = new ActiveXObject("Msxml2.XMLHTTP");

}

}else if(window.XMLHttpRequest){

//其它主流浏览器

xhr = new XMLHttpRequest();

}else{

alert("你使用的浏览器不支持XMLHttpRequest！");

return false;

}

return xhr;

}

我们通过responseText方法来获取Ajax请求返回的数据。由于返回的是一个json字符串，所以需要使用eval()函数将json字符串转换为json对象。然后我们就可以遍历json对象数组，并将对象的各个属性拼接为字符串打印在指定的容器中。

相关阅读