用创建XMLHttpRequest对象与jQuery框架对文本为HTTP、JSON、XML的ajax实现比较

用创建XMLHttpRequest对象，来实现HTTP文本解析

<scripttype="text/javascript">
window.οnlοad=function(){
var aNodes= document.getElementsByTagName("a");
for(var i=0; i < aNodes.length; i++){
aNodes[i].οnclick=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;
}
}
}
returnfalse;
}
}
}
</script>

用jQuery框架实现的HTTP文本解析

<scripttype="text/javascript"src="../scripts/jquery-1.7.2.js"></script>
<scripttype="text/javascript">
$(function(){
$("a").click(function(){
//注意下面的“h2 a”部分，很特别，很神奇
var url=this.href+"h2 a";
var args={"time":new Date()};
//任何一个html节点都可以使用load方法加载Ajax,结果将直接插入html节点中
$("#details").load(url,args);
returnfalse;
});
});
</script>

用创建XMLHttpRequest对象，来实现XML文本解析

<scripttype="text/javascript">
window.οnlοad=function(){
var aNodes= document.getElementsByTagName("a");
for(var i=0; i < aNodes.length; i++){
aNodes[i].οnclick=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);
}
}
}
returnfalse;
}
}
}
</script>

用jQuery框架实现的XML文本解析

<scripttype="text/javascript"src="scripts/jquery-1.7.2.js"></script>
<scripttype="text/javascript">
$(function(){
$("a").click(function(){
var url=this.href;
var args={"time":new Date()};
//url:
//args: JSON格式
//function: 回到函数：当响应结束时，回调函数被触发，响应结果在data中
$.get(url, args,function(data){
var name= $(data).find("name").text();
var email= $(data).find("email").text();
var adress= $(data).find("adress").text();
$("#details").empty()
.append("<h2><a href="+ email+">"+name+"</a></h2>")
.append("<a href='"+ website+"'>"+ website+ "</a>");
});
returnfalse;
});
});
</script>

用创建XMLHttpRequest对象，来实现JSON文本解析

<scripttype="text/javascript">
window.οnlοad=function(){
var aNodes= document.getElementsByTagName("a");
for(var i=0; i < aNodes.length; i++){
aNodes[i].οnclick=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.responseText;
var object = eval("("+ result+")");
//2,结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
//目标格式为：
/*
<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com">http://andybudd.com</a>
*/
var name = object.person.name;
var website =
object.person.website;
var email =
object.person.email;
//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);
}
}
}
returnfalse;
}
}
}
</script>

用jQuery框架实现的JSON文本解析

<scripttype="text/javascript"src="scripts/jquery-1.7.2.js"></script>
<scripttype="text/javascript">
$(function(){
$("a").click(function(){
var url=this.href;
var args={"time":new Date()};
//url:
//args: JSON格式
//function: 回到函数：当响应结束时，回调函数被触发，响应结果在data中
$.getJSON(url, args,function(data){
var name= data.person.name;
var email= data.person.email;
var adress= data.person.adress;
$("#details").empty()
.append("<h2><a href="+ email+">"+name+"</a></h2>")
.append("<a href='"+ website+"'>"+ website+ "</a>");
});
returnfalse;
});
});
</script>