Ajax——三种数据传输格式

Posted Wayfo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax——三种数据传输格式相关的知识，希望对你有一定的参考价值。

一、html

  • HTML由一些普通文本组成。如果服务器通过XMLHTTPRequest发送HTML，文本将存储在responseText属性中。
  • 从服务器端发送的HTML的代码在浏览器端不需要用javascript进行解析。
  • 可以直接使用innerHTML属性把服务器传输过来的HTML文本插入到页面中。

①、html文本

andy.html
<h2><a href="[email protected]">Andy Budd</a></h2>
<a href="http://anybudd.com">http://anybudd.com</a>
jeremy.html
<h2><a href="">Jeremy Budd</a></h2>
<a href="">http://Jeremy.com</a>
richard.html
<h2><a href="">Richard Budd</a></h2>
<a href="">http://Richard Budd.com</a>

②、解析HTML文本

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></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();
                var method="GET";
                var url=this.href;
                request.open(method,url);
                request.send(null);
                request.onreadystatechange=function(){
                    if(request.readyState==4){
                        if(request.status==200){
                            document.getElementById("details").innerHTML=request.responseText;
                        }
                    }
                }
                        return false;
                  }
            }
      }
                  
  </script>
  </head>
  
  <body>
    <h1>People</h1>
    <ul>
        <li><a href="files/andy.html">Andy</a></li>
           <li><a href="files/richard.html">Richard</a></li>
           <li><a href="files/jeremy.html">Jeremy</a></li>
    </ul>
    <div id="details"></div>
  </body>
</html>

二、XML

  • XML是一种通用的数据格式
  • 不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记
  • 利用DOM可以完全掌控文档

①、xml文档

andy.xml
<?xml version="1.0" encoding="UTF-8"?>
<details>
    <name>andy keith</name>
    <website>http://andys.com/</website>
    <email>[email protected]</email>
</details>
jeremy.xml
<?xml version="1.0" encoding="UTF-8"?>
<details>
    <name>jeremy keith</name>
    <website>http://adsds.com/</website>
    <email>[email protected]</email>
</details>
richar.xml
<?xml version="1.0" encoding="UTF-8"?>
<details>
    <name>richard keith</name>
    <website>http://richard.com/</website>
    <email>[email protected]</email>
</details>

③、解析XML

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></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();
                var method="GET";
                var url=this.href;
                request.open(method,url);
                request.send(null);
                request.onreadystatechange=function(){
                    if(request.readyState==4){
                        if(request.status==200){
                            //1.结果为xml格式，所以需要使用responsexml来获取
                            var result=request.responseXML;
                            //2.结果不能直接使用，必须先创建对应的节点，再把节点加入到details里面
                            //目标格式为
                            /*
                            <h2><a href="[email protected]">Andy Budd</a></h2>
                            <a href="http://anybudd.com">http://anybudd.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;
                            //alert(name);
                            //alert(website);
                            //alert(email);
                            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 detailsNode=document.getElementById("details");
                            detailsNode.innerHTML="";
                            detailsNode.appendChild(h2Node);
                            detailsNode.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>

三、JSON

  • JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式。
  • JSON的规则很简单：对象是一个无序的键值对的集合。一个对象以“{” 左括号开始，以“}”右括号结束。每个“名称”后跟一个“：”(冒号)；键值对之间用“，”（逗号分隔 ）
  • JSON只是一种文本字符串。它被存储在responseText属性中
  • 函数eval会把一个字符串当作它的参数。然后这个字符串会被当作JavaScript代码来执行。因为JSON的字符串就是由JavaScript代码构成的所以它本身是可执行的
  • JSON提供了json.js 包，下载http://www.json.org/json.js后，使用parseJSON()方法将字符串解析为JOSN对象

①、js文档

andy.js

{"person":{
    "name":"andy budd",
    "website":"http://andy.com",
    "email":"[email protected]"
}
}

jeremy.js

{"person":{
    "name":"jeremy budd",
    "website":"http://jeremy.com",
    "email":"[email protected]"
}
}

richard.js

{"person":{
    "name":"richard budd",
    "website":"http://richard.com",
    "email":"[email protected]"
}
}

②、解析JSON

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></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();
                var method="GET";
                var url=this.href;
                request.open(method,url);
                request.send(null);
                request.onreadystatechange=function(){
                    if(request.readyState==4){
                        if(request.status==200){
                            //1.结果为JSON格式，所以需要使用responseText来获取
                            var result=request.responseText;
　　　　　　　　　　　　　　　　　//使用json.js API  
　　　　　　　　　　　　        // var object = result.parseJOSN();
                            var object=eval("("+result+")");
                            //2.结果不能直接使用，必须先创建对应的节点，再把节点加入到details里面
                            //目标格式为
                            /*
                            <h2><a href="[email protected]">Andy Budd</a></h2>
                            <a href="http://anybudd.com">http://anybudd.com</a>
                            */
                            var name=object.person.name;
                            var website=object.person.website;
                            var email=object.person.email;
                            //alert(name);
                            //alert(website);
                            //alert(email);
                            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 detailsNode=document.getElementById("details");
                            detailsNode.innerHTML="";
                            detailsNode.appendChild(h2Node);
                            detailsNode.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>

三、三者对比

  • 若应用程序不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据时最简单
  • 如果数据需要重用，JOSN文件是个不错的选择，其在性能和文件大小方面有优势。
  • 当远程应用程序未知时，XML文档是首选

以上是关于Ajax——三种数据传输格式的主要内容，如果未能解决你的问题，请参考以下文章

Ajax的三种数据传输格式

Ajax返回数据格式

图书管理的图书增删改查choices参数MTV与MVC模型多对多关系的三种创建方式Ajax操作前后端传输数据编码格式ajax发送json格式数据ajax发送文件django自带的序列化

图书管理的图书增删改查choices参数MTV与MVC模型多对多关系的三种创建方式Ajax操作前后端传输数据编码格式ajax发送json格式数据ajax发送文件django自带的序列化

AJAX 响应：数据（JSON、XML）还是 HTML 片段？ [关闭]

有关post的三种提交格式