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.="<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": "brett@newInstance.com" },

       { "firstName": "Jason",  "email":"jason@servlets.com" },

       { "firstName": "Elliotte","lastName":"Harold", "email":"elharo@macfaq.com" }

    ],

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