ajax的原创
发布时间：2020-12-16 01:53:08 所属栏目：百科 来源：网络整理
导读：Ajax : (AsynchronousJavaScript and XML ): 允许浏览器与服务器通信而无须刷新当前页面的技术 都被叫做 Ajax ? 若应用程序 不需要与其他应用程序共享数据的时候 , 使用 HTML 片段来返回数据时最简单的 ? 如果数据需要重用 ,JSON 文件是个不错的选择 , 其在
|
Ajax:(AsynchronousJavaScript and XML): 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax
?
若应用程序
不需要与其他应用程序共享数据的时候
,
使用
HTML
片段来返回数据时最简单的
?
如果数据需要重用
,JSON
文件是个不错的选择
,
其在性能和文件大小方面有优势
? 当远程应用程序未知时 ,XML 文档是首选 , 因为 XML 是 web 服务领域的 “ 世界语” json的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript">
window.onload=function(){
var aNodes=document.getElementsByTagName("a");
var request=new XMLHttpRequest();
var method="GET";
var url=null;
for(var i=0;i<aNodes.length;i++){
aNodes[i].onclick=function(){
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;
//使用eval方法，将json字符串转换为json对象
var object=eval("("+result+")");
//得到xml对应的节点的值
var name=object.person.name;
var website=object.person.website;
var email=object.person.email;
//创建对应的节点
/*
创建节点的格式为
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com/</a>
*/
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));
aNode.href=website;
var details=document.getElementById("details");
details.innerHTML="";
details.appendChild(h2Node);
details.appendChild(aNode2);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.js">Andy</a>
</li>
<li>
<a href="files/richard.js">Richard</a>
</li>
<li>
<a href="files/jeremy.js">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
xml的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript">
window.onload=function(){
var aNodes=document.getElementsByTagName("a");
var request=new XMLHttpRequest();
var method="GET";
var url=null;
for(var i=0;i<aNodes.length;i++){
aNodes[i].onclick=function(){
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格式的
var result=request.responseXML;
//得到xml对应的节点的值
var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;;
var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;;
//创建对应的节点
/*
创建节点的格式为
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com/</a>
*/
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));
aNode.href=website;
var details=document.getElementById("details");
details.innerHTML="";
details.appendChild(h2Node);
details.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>
html的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript">
window.onload=function(){
var aNodes=document.getElementsByTagName("a");
var request=new XMLHttpRequest();
var method="GET";
var url=null;
var details=document.getElementById("details");
for(var i=0;i<aNodes.length;i++){
aNodes[i].onclick=function(){
url=this.href;
request.open(method,url);
request.send(null);
request.onreadystatechange=function(){
if(request.readyState==4){
if(request.status==200 || request.status==304){
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>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |