主页 > 专题教程 > javascript > js基础 >
来源:自学PHP网 时间:2018-02-08 10:24 作者: 阅读:次
[导读] 在Ajax请求中使用XML格式的缺点是字符串中附加的标签太多,实际上有用的数据很少,造成传输时带宽的浪费。本文介绍如何在Ajax请求中使用JSON格式的字符串作为返回结果。...
中我们介绍了如何通过Ajax使用基于XML格式的字符串返回对象的信息。使用XML格式的缺点是字符串中附加的标签太多,实际上有用的数据很少,造成传输时带宽的浪费。 我们在前面介绍过,我们可以通过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格式,需要使用 现在,在浏览器中直接访问这个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文档的代码,代码十分简单,在 <!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> 我们通过 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com