AJAX之三种数据传输格式详解

发布时间：2023-09-06 02:04责任编辑：傅花花关键词：暂无标签

一、HTML

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

①、html文本

andy.html

<h2><a href="andy@qq.com">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>jandy@qq.com</email></details>

jeremy.xml

<?xml version="1.0" encoding="UTF-8"?><details> ???<name>jeremy keith</name> ???<website>http://adsds.com/</website> ???<email>jeryem@qq.com</email></details>

richar.xml

<?xml version="1.0" encoding="UTF-8"?><details> ???<name>richard keith</name> ???<website>http://richard.com/</website> ???<email>richard@qq.com</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="andy@qq.com">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 包，下载https://github.com/douglascrockford/JSON-js后，使用JSON.parse()方法将字符串解析为JOSN对象

①、json文档

andy.js

{"person":{ ???"name":"andy budd", ???"website":"http://andy.com", ???"email":"andy@qq.com"}}

jeremy.js

{"person":{ ???"name":"jeremy budd", ???"website":"http://jeremy.com", ???"email":"jeremy@qq.com"}}

richard.js

{"person":{ ???"name":"richard budd", ???"website":"http://richard.com", ???"email":"richard@qq.com"}}

②、解析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="andy@qq.com">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之三种数据传输格式详解

原文地址：https://www.cnblogs.com/aaronthon/p/9319941.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。垃圾信息处理邮箱 tousu563@163.com 网站地图