Ajax返回值之XML、json类型
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> |
?
?
?
?
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
