Ajax学习笔记-Ajax数据格式
来源:互联网 发布:淘宝的君羊令页 编辑:程序博客网 时间:2024/06/10 03:17
HTML
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格式,需要使用responseXMLvar 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) {//使用jsonvar 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
- Ajax学习笔记-Ajax数据格式
- [ajax 学习笔记] json数据格式
- Ajax基础学习笔记二—支持的数据格式
- Ajax数据格式
- 数据格式[[]]//ajax
- AJAX学习(1)概念和数据格式
- Ajax学习(3)数据格式提要
- ajax学习笔记---什么是Ajax
- [ajax 学习笔记] ajax初试
- AJAX学习笔记--慕课网Ajax
- json数据格式+ajax[实例]
- Ajax之数据格式
- ajax原理和数据格式
- Ajax数据格式摘要
- Ajax数据格式HTML
- Ajax使用JSON数据格式
- ajax的数据格式
- Ajax-03-JSON数据格式
- Mybatis学习笔记-调用存储过程
- Mybatis学习笔记-一级缓存与二级缓存
- HDU 2509 Be the Winner (Nim博弈)
- Mybatis学习笔记-Mybatis与Spring的整合
- Ajax学习笔记-入门笔记
- Ajax学习笔记-Ajax数据格式
- Ajax学习笔记-JQuery中的Ajax
- Ajax学习笔记-验证用户名是否可用
- Ajax学习笔记-购物车
- Ajax学习笔记-三级联动
- WebService学习笔记-XML&Schema&HTTP
- WebService学习笔记-Hello world
- WebService学习笔记-读取webxml.com.cn的天气服务信息
- WebService学习笔记-使用CXF发布Webservice