Ajax与JQuery框架学习blog知识点总结
用创建XMLHttpRequest对象与jQuery框架对文本为HTTP、JSON、XML的ajax实现比较
一、Ajax简介:
AJAX =Asynchronous JavaScript and XML(异步的JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
Ajax工作原理图:
![](https://img-blog.csdn.net/20140217210337859?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvbmd3ZW43NzEw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
二、Ajax学习参考网址
W3School: http://www.w3school.com.cn/ajax/
Ajax中国: http://www.okajax.com/
维基百科: http://zh.wikipedia.org/zh-cn/AJAX
jQueryAPI: http://api.jquery.com/jQuery.ajax/
Ajax教程: http://wenku.it168.com/redian/ajax/
三、案例描述
![](https://img-blog.csdn.net/20140217210420968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvbmd3ZW43NzEw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
A、创建XMLHttpRequest对象,链接的文本为HTTP的形式实现
B、创建XMLHttpRequest对象,链接的文本为XML的形式实现
C、创建XMLHttpRequest对象,链接的文本为JSON的形式实现
D、链接的文本为HTTP、XML、JSON用jQuery框架实现(重点)
注解:为了便于理解代码,快速学习jQuery框架,本文将用创建XMLHttpRequest对象与用jQuery框架实现ajax功能放在一起,便于比较学习。
四、代码实现及相关代码的含义解析
![](https://img-blog.csdn.net/20140217210457218?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvbmd3ZW43NzEw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20140217210516484?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvbmd3ZW43NzEw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20140217210542359?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvbmd3ZW43NzEw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
注解:如果要用jQuery框架实现还要在上文本代码中的<head></head>中添加如下脚本代码,即引入jQuery框架脚本,
<script type="text/javascript"src="../scripts/jquery-1.7.2.js"></script>
并在工程中的WebRoot创建scripts文件夹,并将jquery-1.7.2.js文件拷贝到其中
第一部分:数据格式为HTTP进行解析
用创建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> |
第二部分:数据格式为XML进行解析
用创建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> |
第三部分:数据格式为JSON进行解析
用创建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>
|
五、优缺点总结
优点:
XML是一种通用的数据格式,不必把数据强加到已定义好的格式中,而是要为定义合适的标记,利用DOM可以完成掌控文档。
JSON作为一种数据传输格式,JSON与XML很相似,但是它更加灵巧,JSON不需要从服务器端发送含有特定内容类型的首部信息。
缺点:
对于XML数据格式,如果文档来自服务器,就必须得保证文档含有正确的首部信息。若文档类型不正确,那么responseXML的值将是空的,当浏览器收到长的XML文件后,DOM解析可能会很复杂。
JSON语法过于严谨(很像python语言的元组的书法格式),代码不易读,eval函数存在风险。
整体设计分析:
若应用程序不需要与其他应用程序共享数据的时候,使用HTML片段来返回数据时最简单,如果数据需要重用,JSON文件是个不错的选择,其在性能和文件大小方面有优势,当远程应用程序未知时,XML文档时首选,因为XML是Web服务领域的“世界语”。