Ajax - 通过Ajax获取对象信息（基于JSON方式）

01-05 次

标签 ajax 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对象数组，并将对象的各个属性拼接为字符串打印在指定的容器中。