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.="<res><mes>true</mes></res>";
}else{
$info.="<res><mes>false</mes></res>";
}
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演示結構如下]
<scripttype="text/javascript">
var dogs=[{"name":"小黃","age":"8"},{"name":"小花","age":"3"}];
window.alert(dogs[0].name);
window.alert(dogs[1].age);
</script>
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演示結構如下]
<scriptlanguage="JavaScript">
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);
</script>
實例5
l JSON最爲複雜的混合式[用js演示結構如下]
<scriptlanguage="JavaScript">
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);
</script>