AJAX返回的三种数据格式
AJAX返回的三种数据格式
ajax是一种由多种语言共同组成的解决方案，特别是对JavaScript的应用，从后台可以向前台返回三种常见的数据格式，即HTML[文本格式]，XML通用格式，JSON格式；下面举例说明从后台动态php页面向前台JavaScript传值。
HTML[文本格式]
l 后台PHP页面[check.php]
注意：header("Content-Type:text/html;charset=utf-8");
echo "该用户已被列入黑名单";
l 前台JS页面[login.php]
var myXmlHttpRequest=getXmlHttpObject();
//回调函数
function dealBack(){
if(myXmlHttpRequest.readyState==4){
document.getElementById("checker").value=myXmlHttpRequest.responseText; }
}
XML通用格式
l 后台PHP页面[check.php]
注意：header("Content-Type:text/xml;charset=utf-8");
$info="";
if($username=="LepinHeiker"){
$info.="
}else{
$info.="
}
echo $info;
l 前台JS页面[login.php]
var myXmlHttpRequest=getXmlHttpObject();
//回调函数
function dealBack(){
if(myXmlHttpRequest.readyState==4){
//获取mes节点
varmes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");
//取出mes节点值
varmes_val=mes[0].childNodes[0].nodeValue;
document.getElementById("checker").value=mes_val;
}
}
JSON数据格式
JSON在服务器语言中表现为一个字符串，但是这个字符串是由JavaScript代码构成的，返回给客户端之后，经过eval函数处理，就可以当做JavaScript代码执行，按对象存储的。
实例1
l 后台PHP页面[check.php]
注意： header("Content-Type:text/html;charset=utf-8");
$info="";
if($username=="LepinHeiker"){
$info='{"res":"true"}';
}else{
$info='{"res":"false"}';
}
echo $info;
l 前台JS页面[login.php]
var myXmlHttpRequest=getXmlHttpObject();
//回调函数
function dealBack(){
if(myXmlHttpRequest.readyState==4){
varmes=myXmlHttpRequest.responseText;
//使用eval函数将字符串包起来，转换成对象
varmes_obj=eval("("+mes+")");
window.alert(mes_obj.res);
document.getElementById("checker").value=mes_obj.res;
}
}
实例2
l 将上例后台PHP页面[check.php]修改如下
$info='{"res":"true","id":"001","date":"2011-11-11"}';
l 前台JS页面[login.php]修改如下
window.alert(mes_obj.id);
window.alert(mes_obj.date);
document.getElementById("checker").value=mes_obj.res;
实例3
l 类似于对象数组的格式[用js演示结构如下]
var dogs=[{"name":"小黄","age":"8"},{"name":"小花","age":"3"}];
window.alert(dogs[0].name);
window.alert(dogs[1].age);
l 后台PHP页面[check.php]
$info="";
if($username=="LepinHeiker"){
$info='[{"res":"true","id":"001","date":"2011-11-11"},{"res":"true","id":"002","date":"2015-11-11"}]';
}else{
$info='[{"res":"false","id":"001","date":"2011-11-11"},{"res":"false","id":"002","date":"2014-11-11"}]';
}
echo $info;
l 前台JS页面[login.php]
//回调函数
function dealBack(){
if(myXmlHttpRequest.readyState==4){
varmes=myXmlHttpRequest.responseText;
//使用eval函数将字符串包起来，转换成对象
varmes_obj=eval("("+mes+")");
window.alert(mes_obj[0].id);
window.alert(mes_obj[1].date);
document.getElementById("checker").value=mes_obj[0].res;
}
}
l 若需要遍历，那么像下面这样写
//遍历
for(vari=0;mes_obj.length;i++){
window.alert(mes_obj[i].id);
}
实例4
l JSON数据结构的进一步扩展[用js演示结构如下]
var people={
"programmers":[
{ "firstName":"Brett", "email": "[email protected]" },
{ "firstName": "Jason", "email":"[email protected]" },
{ "firstName": "Elliotte","lastName":"Harold", "email":"[email protected]" }
],
"musicians":[
{ "firstName": "Eric", "instrument": "guitar" },
{ "firstName": "Sergei", "instrument":"piano" }
]};
window.alert(people.programmers[1].firstName);
window.alert(people.musicians[1].instrument);
实例5
l JSON最为复杂的混合式[用js演示结构如下]
var people={
"username":"mary",
"age":"20",
"info":{"tel":"1234566","celltelphone":788666},
"address":[
{"city":"beijing","code":"1000022"},
{"city":"shanghai","code":"2210444"}
]
};
window.alert(people.username);
window.alert(people.info.tel);
window.alert(people.address[0].city);