Ajax返回值之XML、json类型
2015-01-29
注意：Ajax默认是不能跨域的，在最新的2.0里是可以跨域，但是需要对方应答、
Ajax返回值之XML类型
<HTML代码>
<html> <head> <title>Ajax返回return</title> <script> function createXHR(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } return xhr; } function test1(){ var xhr = createXHR(); xhr.open('GET','return.php',true); xhr.onreadystatechange = function(){ if(this.readyState == 4){ alert(this.responseText); //alert(this.responseXML); var xmldom = this.responseXML; var chs = xmldom.getElementsByTagName('book')[0].childNodes; //alert(chs[0].firstChild.wholeText); //alert(chs[1].firstChild.wholeText); document.getElementById('btitle').value = chs[0].firstChild.wholeText; document.getElementById('bintro').value = chs[1].firstChild.wholeText; } } xhr.send(null); } </script> </head> <body> 书名:<input type="text" id="btitle" /><br/> 简介:<input type="text" id="bintro" /><br/><br/> <input type="button" value="测试返回值1" onclick="test1();"/> <input type="button" value="测试返回值2" onclick="test2();"/> </body> </html> |
return.php 代码
<?php header("Content-Type: text/xml"); ?> <?xml version="1.0" encoding="utf-8"?> <bookstore><book bid="boo8"><title>天龙八部</title><intro>人生太苦</intro></book></bookstore> |
我们点击按钮1：
得到：我们对到return.php文件的字符串形式的内容：
然后。我们用XML格式对其进行解析，分别解析出文本节点title，和intro
就简单实现了Ajax对xml的解析
Ajax返回值之json类型2
作为普通文本返回类型时，又有了一下几种常用的变通形式
- 返回剪短的标志字符串，0,1
- 后台返回大段的html代码，直接innerHTML到前端页面
- json格式，再由JS解析，
111111111111111111
{title:'天龙八部',intro:'人生八苦'}
var book = eval('('+this.responseText+')'); //将json文本转换为对象
alert(book); //得到的是对象
document.getElementById('news').innerHTML = "书名："+book.title+"<br/>简介："+book.intro; //对象名.节点 就是使用
2222222222222222
//模拟服务器数据库取数据 json_encode() 自动编码
$book = array('title'=>"天龙八部",'intro'=>'人生八苦');
echo json_encode($book);
json会自动编码：
解析后得到一样的效果：
PHP中使用json格式字符串：
使用反向解码： json_decod(); 即可以实现
returnhtml.php代码：
foreach(array('新闻1','新闻2','新闻3') as $v)
{ echo '<li>',$v,'</li>'; }
returnjson.php 代码
<?php
//javascriptObjacetNotation
//{title:'天龙八部',intro:'人生八苦'}
//
//
//模拟服务器数据库取数据
$book = array('title'=>"天龙八部",'intro'=>'人生八苦');
echo json_encode($book);
?>
html代码：
<html> <head> <title>Ajax返回return</title> <script> function createXHR(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } return xhr; } function test1(){ var xhr = createXHR(); xhr.open('GET','return.php',true); xhr.onreadystatechange = function(){ if(this.readyState == 4){ alert(this.responseText); //alert(this.responseXML); var xmldom = this.responseXML; var chs = xmldom.getElementsByTagName('book')[0].childNodes; //alert(chs[0].firstChild.wholeText); //alert(chs[1].firstChild.wholeText); document.getElementById('btitle').value = chs[0].firstChild.wholeText; document.getElementById('bintro').value = chs[1].firstChild.wholeText; } } xhr.send(null); } function test2(){ var xhr = createXHR(); xhr.open('GET','returnhtml.php',true); xhr.onreadystatechange = function(){ if(this.readyState == 4){ ///alert(this.responseText); document.getElementById('news').innerHTML = this.responseText; } } xhr.send(null); } function test3(){ var xhr = createXHR(); xhr.open('GET','returnjson.php',true); xhr.onreadystatechange = function(){ if(this.readyState == 4){ //alert(this.responseText); //alert({name:'zhangsan',age:29}); //是js对象 var book = eval('('+this.responseText+')'); alert(book); document.getElementById('news').innerHTML = "书名："+book.title+"<br/>简介："+book.intro; } } xhr.send(null); } </script> </head> <body> 书名:<input type="text" id="btitle" /><br/> 简介:<input type="text" id="bintro" /><br/><br/> <input type="button" value="测试返回XML格式" onclick="test1();"/> <input type="button" value="测试返回HTML代码" onclick="test2();"/> <input type="button" value="测试返回json格式" onclick="test3();"/> <div id="news">
</div> </body> </html> |
