AJAX学习（二）AJAX的三种交互格式

来源：互联网发布：虚拟机centos安装教程编辑：程序博客网时间：2024/06/06 18:10

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 html</a></li>        <li><a  href="file/kitty.html">kitty html</a></li>        <li><a  href="file/tony.html">tony html</a></li>      </ol>       <div id="showDiv" style="height: 200px;width: 300px;border: 1px solid red">null</div>      <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);//<a href="website">name</a>                  h2Node.appendChild(aNode);//<h2><a href="website">name</a></h2>                  //<a href="website">website</a>                  var a2Node=document.createElement("a");                  a2Node.href=website;                  var a2NodeText=document.createTextNode(website);                  a2Node.appendChild(a2NodeText);//<a href="website">website</a>                  // 且放到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);     </script>

【说明】返回的数据格式是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);              //获取到值之后可以根据实际情况来对获取的数据在界面进行显示            }        }

阅读全文

0 0