Ajax返回值之XML、json类型

Ajax返回值之XML、json类型

2015-01-29

注意：Ajax默认是不能跨域的，在最新的2.0里是可以跨域，但是需要对方应答、

Ajax返回值之XML类型

<HTML代码>

<html>

<head>

<title>Ajax返回return</title>

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/>

</body>

</html>

return.php 代码

<?php

header("Content-Type: text/xml");

<?xml version="1.0" encoding="utf-8"?>

我们点击按钮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>

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/>

</div>

</body>

</html>

posted on 2015-02-05 11:07 Lover雪儿阅读(1283) 评论(0) 编辑收藏举报