都快11月份了，天气还是炎热，保持在30多度，老家都穿棉袄了，深圳这鬼地方，我也是醉了。好吧，今天继续学习javascript。
上一篇文章中我们介绍了如何通过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>
实现Ajax请求的JavaScript代码于前面的基于XML格式的代码基本类似，我们只需要修改一下获取字符串的方式和遍历的代码即可。完整的代码如下：
<script type="text/javascript">
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 + "<br>";
}
//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;
}
</script>我们通过responseText方法来获取Ajax请求返回的数据。由于返回的是一个json字符串，所以需要使用eval()函数将json字符串转换为json对象。然后我们就可以遍历json对象数组，并将对象的各个属性拼接为字符串打印在指定的容器中。
网友评论文明上网理性发言 已有0人参与
发表评论: