Ajax-数据格式-xml,json

时间：2023-03-08 19:48:39

Ajax-数据格式-xml,json

xml demo

testDataXml 
 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>test html data</title>

 <script type="text/javascript">

     window.onload=function(){

         var aNodes=document.getElementsByTagName("a");

         for(var i=0;i<aNodes.length;i++)

         {

             aNodes[i].onclick=function()

             {

                 var request=new XMLHttpRequest();

                 //4.准备发送请求的数url,加上时间戳

                 var url=this.href;

                 var method="GET";

                 //5.调用XMLHttpRequest的open方法

                 request.open(method,url);

                 //6.调用XMLHttpRequest的send方法

                 request.send(null);

                 request.onreadystatechange=function(){

                     if(request.readyState==4)

                     {

                         if(request.status==200||request.status==304)

                             {

                             //1.目标格式为XML文件，用request.responseXML获取

                             var result=request.responseXML;

                             //2.结果不能址接使用，必须先创建对应的节点，再把节点加入到#details中

                             /***

                             目标格式为：

                             <h2><a href="mailto:andy@clearleft.com">Jeremy Budd</a></h2>

                             <a href="http://andybudd.com/">http://JeremyBudd.com</a>

                            ***/

                             var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;

                             var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;

                             var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;

                             //document.getElementById("details").innerHTML=request.responseText;

                             var aNode=document.createElement("a");

                             aNode.appendChild(document.createTextNode(name));

                             aNode.href="mailto:"+email;

                             var h2Node=document.createElement("h2");

                             h2Node.appendChild(aNode);

                             var aNode2=document.createElement("a");

                             aNode2.appendChild(document.createTextNode(website));

                             aNode2.href=website;

                             var detailNode=document.getElementById("details");

                             detailNode.innerHTML="";

                             detailNode.appendChild(h2Node);

                             detailNode.appendChild(aNode2);

                             }

                     }

                 }

                 return false;

             }

         }

     }

 </script>

 </head>

 <body>

 <h1>People</h1>

 <ul>

     <li><a href="files/andy.xml">Andy</a></li>

     <li><a href="files/richard.xml">Richard</a></li>

     <li><a href="files/jeremy.xml">Jeremy</a></li>

 </ul>

 <div id="details"></div>

 </body>

 </html>

 <?xml version="1.0" encoding="UTF-8"?>

 <details>

     <name>Richard Bubb</name>

     <website>http://adactio.com/</website>

     <email>richard@sohu.com</email>

 </details>

Richard

Ajax-数据格式-xml,json

Json 示例

 <script type="text/javascript">

 var jsonObject={

         "name":"atgugu",

         "age":34,

         "address":{"city":"Beijing","school":"bjtu"},

         "teaching":function(){

             alert("javaee,python.....");

         }

 };

 alert(jsonObject.name);

 alert(jsonObject.address.city);

 alert(jsonObject.teaching());

 </script>

json示例

Ajax-数据格式-xml,json

Ajax-数据格式-xml,json

Ajax-数据格式-xml,json

Ajax-数据格式-xml,json

Json Demo

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>test json data</title>

 <script type="text/javascript">

 /*

 var jsonObject={

         "name":"atgugu",

         "age":34,

         "address":{"city":"Beijing","school":"bjtu"},

         "teaching":function(){

             alert("javaee,python.....");

         }

 };

 alert(jsonObject.name);

 alert(jsonObject.address.city);

 alert(jsonObject.teaching());

 */

     window.onload=function(){

         var aNodes=document.getElementsByTagName("a");

         for(var i=0;i<aNodes.length;i++)

         {

             aNodes[i].onclick=function()

             {

                 var request=new XMLHttpRequest();

                 //4.准备发送请求的数url,加上时间戳

                 var url=this.href;

                 var method="GET";

                 //5.调用XMLHttpRequest的open方法

                 request.open(method,url);

                 //6.调用XMLHttpRequest的send方法

                 request.send(null);

                 request.onreadystatechange=function(){

                     if(request.readyState==4)

                     {

                         if(request.status==200||request.status==304)

                             {

                             //1.目标格式为XML文件，用request.responseXML获取

                             var jsonresult=request.responseText;

                             var result=eval("("+ jsonresult + ")");

                             //2.结果不能址接使用，必须先创建对应的节点，再把节点加入到#details中

                             /***

                             目标格式为：

                             <h2><a href="mailto:andy@clearleft.com">Jeremy Budd</a></h2>

                             <a href="http://andybudd.com/">http://JeremyBudd.com</a>

                            ***/

                             var name=result.person.name;

                             var website=result.person.website;

                             var email=result.person.email;

                             //document.getElementById("details").innerHTML=request.responseText;

                             var aNode=document.createElement("a");

                             aNode.appendChild(document.createTextNode(name));

                             aNode.href="mailto:"+email;

                             var h2Node=document.createElement("h2");

                             h2Node.appendChild(aNode);

                             var aNode2=document.createElement("a");

                             aNode2.appendChild(document.createTextNode(website));

                             aNode2.href=website;

                             var detailNode=document.getElementById("details");

                             detailNode.innerHTML="";

                             detailNode.appendChild(h2Node);

                             detailNode.appendChild(aNode2);

                             }

                     }

                 }

                 return false;

             }

         }

     }

 </script>

 </head>

 <body>

 <h1>People</h1>

 <ul>

     <li><a href="files/andy.js">Andy</a></li>

     <li><a href="files/richard.js">Richard</a></li>

     <li><a href="files/jeremy.js">Jeremy</a></li>

 </ul>

 <div id="details"></div>

 </body>

 </html>

testDatajson.jsp

 {

     "person":{

     "name":"Richard Bubb",

     "website":"http://adactio.com/",

     "email":"Richard@sohu.com"

         }

 }

richard.js

Ajax-数据格式-xml,json

相关文章