Ajax学习笔记-Ajax数据格式

2025-01-22 技术教程

HTML

HTML由一些普通文本组成。如果服务器通过XMLHttpRequest发送HTML，文本将存储在responseText属性中。不必从responseText属性中读取数据，它已经是期望的格式，可以直接将其插入到页面中。插入HTML代码最简单的方法是更新这个元素的innerTHML属性。

a.html

<ahref="http://www.baidu.com">http://www.baidu.com</a>

优点

-从服务器端发送的HTML代码在浏览器端不需要用Javascript进行解析。

-HTML的可读性好

-HTML代码块与innerHTML属性搭配，效率高。

缺点

-若需要通过Ajax更新一篇文档的多个部分，HTML不合适

-innerHTML不是DOM标准

XML

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><scripttype="text/javascript">window.onload=function(){varaNodes=document.getElementsByTagName("a");for(vari=0;i<aNodes.length;i++){aNodes[i].onclick=function(){varrequest=newXMLHttpRequest();varmethod="GET";varurl=this.href;request.open(method,url);request.send(null);request.onreadystatechange=function(){if(request.readyState==4){if(request.status==200||request.status==304){//结果为XML格式，需要使用responseXMLvarresult=request.responseXML;//结果不能直接用，必须先创建对应的结点，再把结点放入到details中varname=result.getElementsByTagName("name")[0].firstChild.nodeValue;varwebsite=result.getElementsByTagName("website")[0].firstChild.nodeValue;varemail=result.getElementsByTagName("email")[0].firstChild.nodeValue;varaNode=document.createElement("a");aNode.appendChild(document.createTextNode(name));aNode.href="mailto:"+email;varh3Node=document.createElement("h3");h3Node.appendChild(aNode);varaNode2=document.createElement("a");aNode2.appendChild(document.createTextNode(name));aNode2.href=website;vardetailsNode=document.getElementById("details");detailsNode.innerHTML="";detailsNode.appendChild(h3Node);detailsNode.appendChild(aNode2);}}}returnfalse;}}}</script></head><body><ul><li><ahref="andy.xml">andy</a></li></ul><divid="details"></div></body></html>

andy.xml

<?xmlversion="1.0"encoding="UTF-8"?><details><name>AndyBudd</name><website>http://www.baidu.com</website><email>umgsai@126.com</email></details>

优点

-XML是一种通用的数据格式

-不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记

-利用DOM可以完全掌控文档

缺点

-如果文档来自服务器，就必须保证文档含有正确的首部信息。若文档类型不正确，那么responseXML的值将是空的

-当浏览器接收到长的XML文件后，DOM解析可能会很复杂

JSON

JSON（JavaScript Object Notation）是一种简单的数据格式，比XML更轻巧，是JavaScript原生格式，这意味着在JavaScript中处理JSON不需要任何特殊的API或工具包。

<scripttype="text/javascript">varobject={"name":"umgsai","age":12,"address":{"city":"beijing","school":"ctgu"},"teaching":function(){alert("这是一个方法");}};alert(object.name);alert(object.age);alert(object.address.city);object.teaching();/*将字符串当做语句来执行vartestStr="alert('hello')";eval(testStr);*//*varjsonStr="{'name':'umgsai'}";vartestObject=eval("("+jsonStr+")");//字符串转成json对象alert(testObject.name);*/</script>

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><scripttype="text/javascript">window.onload=function(){varaNodes=document.getElementsByTagName("a");for(vari=0;i<aNodes.length;i++){aNodes[i].onclick=function(){varrequest=newXMLHttpRequest();varmethod="GET";varurl=this.href;request.open(method,url);request.send(null);request.onreadystatechange=function(){if(request.readyState==4){if(request.status==200||request.status==304){//使用jsonvarresult=request.responseText;varobject=eval("("+result+")");//结果不能直接用，必须先创建对应的结点，再把结点放入到details中varname=object.person.name;varwebsite=object.person.website;varemail=object.person.email;varaNode=document.createElement("a");aNode.appendChild(document.createTextNode(name));aNode.href="mailto:"+email;varh3Node=document.createElement("h3");h3Node.appendChild(aNode);varaNode2=document.createElement("a");aNode2.appendChild(document.createTextNode(name));aNode2.href=website;vardetailsNode=document.getElementById("details");detailsNode.innerHTML="";detailsNode.appendChild(h3Node);detailsNode.appendChild(aNode2);}}}returnfalse;}}}</script></head><body><ul><li><ahref="andy.json">andy</a></li></ul><divid="details"></div></body></html>

andy.json

{"person":{"name":"umgsai","website":"http://www.baidu.com","email":"umgsai@126.com"}}

优点

-作为一种数据传输格式，json与xml很相似，但是json更加灵巧。

-json不需要从服务器端发送含有特定内容类型的首部信息

缺点

-语法过于严谨

-代码不易读

-eval函数存在风险

小结

-若应用程序不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据是最简单的。

-如果数据需要重用，JSON文件是个不错的选择，其在性能和大小方面有优势。