AJAX学习(二)AJAX的三种交互格式

ajax常用的交互格式有三种,分别是:html、xml、json。本文章将讲解ajax针对于这三种的交互方式的实现方法。

**

1、html

【说明】返回的数据格式是html的,可以直接使用,但是不能将返回的数据进行拆分显示
【方法】和返回TXT文件一样同样都是通过 var result=xhr.responseText;进行接收
【案例】
**

//前台demo
 <body>
      <h3>ajax的HTML的交互格式h3>
      <ol>
        <li><a href="file/andy.html">andy htmla>li>
        <li><a  href="file/kitty.html">kitty htmla>li>
        <li><a  href="file/tony.html">tony htmla>li>
      ol>
       <div id="showDiv" style="height: 200px;width: 300px;border: 1px solid red">nulldiv>
      <h3>我是占位的,就是打酱油的h3>
  body>

接收:

 var result=xhr.responseText;//代表接收的是字符串内容,可以包含片段html代码,和接收TXT文件一样(可参考上一篇文章)

2、xml

【说明】返回的数据格式是xml的,xml是通用数据格式,但是不可以直接使用,需要将结果当作dom进行解析,他能将返回的数据进行拆分显示
【方法】var result=xhr.responseXML;
【案例】

xhr.onreadystatechange=function(){
          if(xhr.readyState==4){
             if(xhr.status==200||xhr.status==304){
               //返回的数据格式是xml的,xml是通用数据格式,但是不可以直接使用,需要将结果当作dom进行解析
               var result=xhr.responseXML;//responseXML用于接收数据格式为xml数据

              // alert(result);XMLDocument
              //var name=result.getElementsByTagName("name")[0].innerHTML;//第一种方式
              //var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;//第二种,推介用这种

              var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
              var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;
              var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;
              //alert(name+" "+website+"  "+email);

               //根据用户的需求进行显示控制,将结果放
               //我的要求如下显示,且放到div中

                  var h2Node=document.createElement("h2");
                  var aNode=document.createElement("a");
                  aNode.href=website;
                  var aNodeText=document.createTextNode(name);
                  aNode.appendChild(aNodeText);//name
                  h2Node.appendChild(aNode);//

name

//"website">website var a2Node=document.createElement("a"); a2Node.href=website; var a2NodeText=document.createTextNode(website); a2Node.appendChild(a2NodeText);//website // 且放到div中 //在追加之前进行置空操作 document.getElementById("showDiv").innerHTML=""; document.getElementById("showDiv").appendChild(h2Node); document.getElementById("showDiv").appendChild(a2Node); } //额外的处理(拓展) if(xhr.status==404){ alert("sorry,请求的资源不存在"); } } }

3、json数据

【介绍】JSON是JavaScript原生格式。
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’对”之间使用“,”(逗号)分隔。例如:

 var json={
      "name":"momo", //标准写法
      'age':"28",  //非标准写法
       sex:"男",  //非标准写法
       school:{"sname":"SXT","addr":"XiSanQi"},  //其中还可以嵌套json
       "run":function(){  //还可以包含方法
            alert("我要加速");
       }
};

【特殊情况】与服务器进行交互的时候,返回来的是一个长得像json对象格式的字符串,使用前必须进行转换,转换为js中json对象
转换方法为:

     var jsonStr='{"money":"50","sex":"1"}';
     //转换前的检验
     console.info(jsonStr);
     //引入eval()函数进行转换
     //var json2=eval("("+jsonStr+")");//第一种,json独有的转换方式
     //eval("var json2="+jsonStr);//第二种,不常用

     var json2=JSON.parse(jsonStr);//第三种,常用

     //转换后的检验
     console.info(json2);
     

【说明】返回的数据格式是json的,但是返回来的是一个长得像json对象格式的字符串,使用前必须进行转换,转换为js中json对象
【案例】

  xhr.onreadystatechange=function(){
          if(xhr.readyState==4){//确保与服务器有成功的交互
             if(xhr.status==200||xhr.status==304){//确定得到OK
         //返回的数据格式是json的,但是返回来的是一个长得像json对象格式的字符串,使用前必须进行转换,转换为js中json对象
               var result=xhr.responseText;
               //在控制台检验
               //console.info(result);

               //进行格式转换为json格式对象
               var json=JSON.parse(result);
               console.info(json);

              //获取值
              var name=json.person.name;
              var website=json.person.website;
              var email=json.person.email;
              //alert(name+" "+website+"  "+email);
              //获取到值之后可以根据实际情况来对获取的数据在界面进行显示
            } 
       }

你可能感兴趣的:(ajax)