HTML@H_301_4@
HTML由一些普通文本组成。如果服务器通过XMLHttpRequest发送HTML，文本将存储在responseText属性中。不必从responseText属性中读取数据，它已经是期望的格式，可以直接将其插入到页面中。插入HTML代码最简单的方法是更新这个元素的innerTHML属性。
<!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){ document.getElementById("details").innerHTML=request.responseText; } } } returnfalse; } } } </script> </head> <body> <ul> <li><ahref="a.html">百度</a></li> </ul> <divid="details"></div> </body> </html>
a.html
<ahref="http://www.baidu.com">http://www.baidu.com</a>
优点
-从服务器端发送的HTML代码在浏览器端不需要用Javascript进行解析。
-HTML的可读性好
缺点
-若需要通过Ajax更新一篇文档的多个部分，HTML不合适
-innerHTML不是DOM标准
XML@H_301_4@
<!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格式，需要使用responseXML varresult=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; varh2Node=document.createElement("h2"); h2Node.appendChild(aNode); varaNode2=document.createElement("a"); aNode2.appendChild(document.createTextNode(name)); aNode2.href=website; vardetailsNode=document.getElementById("details"); detailsNode.innerHTML=""; detailsNode.appendChild(h2Node); detailsNode.appendChild(aNode2); } } } returnfalse; } } } </script> </head> <body> <ul> <li><ahref="andy.xml">andy</a></li> </ul> <divid="details"></div> </body> </html>
@H_301_4@andy.xml
<?xmlversion="1.0"encoding="UTF-8"?> <details> <name>AndyBudd</name> <website>http://www.baidu.com</website> <email>umgsai@126.com</email> </details>
@H_301_4@
优点
-XML是一种通用的数据格式
-不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记
-利用DOM可以完全掌控文档
缺点
-如果文档来自服务器，就必须保证文档含有正确的首部信息。若文档类型不正确，那么responseXML的值将是空的
-当浏览器接收到长的XML文件后，DOM解析可能会很复杂
@H_301_4@
JSON@H_301_4@
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){ //使用json varresult=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; varh2Node=document.createElement("h2"); h2Node.appendChild(aNode); varaNode2=document.createElement("a"); aNode2.appendChild(document.createTextNode(name)); aNode2.href=website; vardetailsNode=document.getElementById("details"); detailsNode.innerHTML=""; detailsNode.appendChild(h2Node); 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函数存在风险
小结@H_301_4@
-若应用程序不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据是最简单的。@H_301_4@
-如果数据需要重用，JSON文件是个不错的选择，其在性能和大小方面有优势。@H_301_4@
-当远程应用程序未知时，XML文档是首选，因为XML是web服务领域的“世界语”@H_301_4@
本文出自 “优赛工作室” 博客，请务必保留此出处http://www.jb51.cc/article/p-hxryeksb-qg.html
原文链接：https://www.f2er.com/ajax/162445.html