Ajax数据格式
来源:互联网 发布:key-value数据库 编辑:程序博客网 时间:2024/06/05 03:07
从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下3种格式返回数据:(1)XML (2)JSON (3)HTML
1.HTML由一些普通的文本组成。如果服务器通过XMLHttpRequest发送HTML,文本将存储在responseText属性中。
2.不必从responseText中读取数据。它已经是希望的格式,可以直接将它插入到页面中。
3.插入HTML代码最简单的方法是更新这个元素的innerHTML属性。
HTML格式:
在html文件中新建一个index.html和files文件,files文件中有三个html,目录结构如下:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>People at Clear</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> <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>
andy.html
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2><a href="http://andybudd.com">http://andybudd.com"</a>
richard.html
<h2><a href="mailto:richard@clearleft.com">richard</a></h2><a href="http://richard.com">http://richard.com"</a>
jeremy
<h2><a href="mailto:jeremy@clearleft.com">jeremy</a></h2><a href="http://jeremy.com">http://jeremy.com"</a>
优点:
(1)从服务器发送的HTML代码在浏览器端不需要用JavaScript进行解析。
(2)HTML的可读性好
(3)HTML代码块与innerHTML属性搭配,效率高
缺点:
若需要通过AJAX更新一篇文档的多个部分,HTML不合适
XML格式:
在xml文件中新建一个files文件,其中有2个xml文件,andy.xml,jeremy.xml和richard.xml
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>People at Clear</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){ //1.结果为XML格式,所以需要使用responseXML,来获取 var result = request.responseXML; //2.结果不能直接使用,必须先创建对应的节点,再把节点加入到#details中 //目标格式为: /* <h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2> <a href="http://andybudd.com">http://andybudd.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>
andy.xml
<?xml version="1.0" encoding="UTF-8"?><details> <name>Andy fgsjr</name> <website>http://gritr.com</website> <email>andy@sina.com</email></details>
jeremy.xml
<?xml version="1.0" encoding="UTF-8"?><details> <name>Jeremy gfago</name> <website>http://dfhaifj.com</website> <email>jeremy@sina.com</email></details>
richard.xml
<?xml version="1.0" encoding="UTF-8"?><details> <name>Richard sgserg</name> <website>http://eretd.com</website> <email>Richard@sina.com</email></details>
XML优点:
(1)XML 是一种通用的数据格式
(2)不必把数据强加到已定义好的格式中,而是要为数据定义合适的标记
(3)利用DOM可以完全掌控文档
缺点:
如果文档来自于服务器,就必须保证文档含有正确的首部信息。若文档类型不正确,那么responseXML的值是空的。
- Ajax数据格式
- 数据格式[[]]//ajax
- json数据格式+ajax[实例]
- Ajax之数据格式
- ajax原理和数据格式
- Ajax数据格式摘要
- Ajax数据格式HTML
- Ajax使用JSON数据格式
- ajax的数据格式
- Ajax-03-JSON数据格式
- ajax返回数据格式分析
- Ajax数据格式—HTML
- AJAX-数据格式提要
- Ajax data数据格式
- ajax数据格式分析
- AJAX数据格式之HTML
- AJAX数据格式之XML
- AJAX数据格式之JSON
- Bzoj 1251: 序列终结者(splay)
- 前端关于屏幕的不同属性
- java模板方法模式
- 新手实现Python mysql数据库增删改查
- 基本数据结构--表、栈和队列
- Ajax数据格式
- jquery仿IOS弹出框插件
- 属性动画
- 常见前端面试题及答案(下)
- 最短路径问题
- 模拟实现库函数atoi
- Java集合系列(6)--HashMap
- notifyItemRemoved,notifyItemRangeRemoved和notifyItemRangeChanged(int positionStart, int itemCount, Ob
- PAT 1011