Ajax学习笔记-Ajax数据格式
2014-10-09 09:44
519 查看
HTML
HTML由一些普通文本组成。如果服务器通过XMLHttpRequest发送HTML,文本将存储在responseText属性中。不必从responseText属性中读取数据,它已经是期望的格式,可以直接将其插入到页面中。插入HTML代码最简单的方法是更新这个元素的innerTHML属性。
-从服务器端发送的HTML代码在浏览器端不需要用Javascript进行解析。
-HTML的可读性好
-HTML代码块与innerHTML属性搭配,效率高。
缺点
-若需要通过Ajax更新一篇文档的多个部分,HTML不合适
-innerHTML不是DOM标准
XML
优点 -XML是一种通用的数据格式
-不必把数据强加到已定义好的格式中,而是要为数据自定义合适的标记
-利用DOM可以完全掌控文档
缺点 -如果文档来自服务器,就必须保证文档含有正确的首部信息。若文档类型不正确,那么responseXML的值将是空的
-当浏览器接收到长的XML文件后,DOM解析可能会很复杂
JSON
JSON(JavaScript Object Notation)是一种简单的数据格式,比XML更轻巧,是JavaScript原生格式,这意味着在JavaScript中处理JSON不需要任何特殊的API或工具包。
-json不需要从服务器端发送含有特定内容类型的首部信息缺点 -语法过于严谨
-代码不易读 -eval函数存在风险小结
-若应用程序不需要与其他应用程序共享数据的时候,使用HTML片段来返回数据是最简单的。
-如果数据需要重用,JSON文件是个不错的选择,其在性能和大小方面有优势。
-当远程应用程序未知时,XML文档是首选,因为XML是web服务领域的“世界语”
本文出自 “优赛工作室” 博客,请务必保留此出处http://shamrock.blog.51cto.com/2079212/1561511
HTML由一些普通文本组成。如果服务器通过XMLHttpRequest发送HTML,文本将存储在responseText属性中。不必从responseText属性中读取数据,它已经是期望的格式,可以直接将其插入到页面中。插入HTML代码最简单的方法是更新这个元素的innerTHML属性。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</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 || request.status == 304) { document.getElementById("details").innerHTML = request.responseText; } } } return false; } } } </script> </head> <body> <ul> <li><a href="a.html">百度</a></li> </ul> <div id="details"></div> </body> </html>a.html
<a href="http://www.baidu.com">http://www.baidu.com</a>优点
-从服务器端发送的HTML代码在浏览器端不需要用Javascript进行解析。
-HTML的可读性好
-HTML代码块与innerHTML属性搭配,效率高。
缺点
-若需要通过Ajax更新一篇文档的多个部分,HTML不合适
-innerHTML不是DOM标准
XML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</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 || request.status == 304) { //结果为XML格式,需要使用responseXML var result = request.responseXML; //结果不能直接用,必须先创建对应的结点,再把结点放入到details中 var name = result.getElementsByTagName("name")[0].firstChild.nodeValue; var website = result.getElementsByTagName("website")[0].firstChild.nodeValue; var email = result.getElementsByTagName("email")[0].firstChild.nodeValue; 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(name)); aNode2.href = website; var detailsNode = document.getElementById("details"); detailsNode.innerHTML = ""; detailsNode.appendChild(h2Node); detailsNode.appendChild(aNode2); } } } return false; } } } </script> </head> <body> <ul> <li><a href="andy.xml">andy</a></li> </ul> <div id="details"></div> </body> </html>andy.xml
<?xml version="1.0" encoding="UTF-8"?> <details> <name>Andy Budd</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或工具包。
<script type="text/javascript"> var object = { "name" : "umgsai", "age" : 12, "address" : { "city" : "beijing", "school" : "ctgu" }, "teaching" : function() { alert("这是一个方法"); } }; alert(object.name); alert(object.age); alert(object.address.city); object.teaching(); /*将字符串当做语句来执行 var testStr = "alert('hello')"; eval(testStr); */ /* var jsonStr = "{'name':'umgsai'}"; var testObject = eval("("+jsonStr+")");//字符串转成json对象 alert(testObject.name); */ </script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</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 || request.status == 304) { //使用json var result = request.responseText; var object = eval("("+result+")"); //结果不能直接用,必须先创建对应的结点,再把结点放入到details中 var name = object.person.name; var website = object.person.website; var email = object.person.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(name)); aNode2.href = website; var detailsNode = document.getElementById("details"); detailsNode.innerHTML = ""; detailsNode.appendChild(h2Node); detailsNode.appendChild(aNode2); } } } return false; } } } </script> </head> <body> <ul> <li><a href="andy.json">andy</a></li> </ul> <div id="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文件是个不错的选择,其在性能和大小方面有优势。
-当远程应用程序未知时,XML文档是首选,因为XML是web服务领域的“世界语”
本文出自 “优赛工作室” 博客,请务必保留此出处http://shamrock.blog.51cto.com/2079212/1561511
相关文章推荐
- php学习笔记(三十)ajax请求和接收参数的实现方式(包括json数据格式的简单处理)
- Ajax学习笔记-Ajax数据格式
- Ajax基础学习笔记二—支持的数据格式
- 学习笔记--Ajax:html格式返回数据
- 学习笔记--Ajax:JSON格式返回数据
- [ajax 学习笔记] json数据格式
- c语言学习笔记_数据格式_int与char的存储方式小节
- 以XML格式传输数据 (1)--Ajax学习笔记
- jQuery学习笔记之 Ajax操作篇(二) - 数据传递
- jQuery学习笔记--ajax查询,jQuery解析返回的json数据 详解
- 数据交换格式 学习笔记
- 以XML格式传输数据 (2)--Ajax学习笔记
- 以XML格式传输数据 (1)--Ajax学习笔记
- dhtmlxtree学习笔记三(ajax动态获取数据)
- SpringMVC学习笔记(7) 返回Json格式数据
- SAS学习笔记(六)——关于数据格式的SAS函数
- 【AJAX学习笔记】JSON数据编码解码技术
- Javascript学习指南(第2版)笔记(六) DOM、Ajax及其数据
- Ajax处理接收到的xml数据【学习笔记】
- Ajax处理JSON数据参考【学习笔记】