jQuery Ajax

1. 什么是Ajax

• Asynchronous Javascript And XML（异步JavaScript和XML）
• Ajax并不是一种语言，而是一种基于JavaScript的技术
• Ajax技术使浏览器不用刷新页面，就可以和服务器进行通信的方式（局部刷新）

2. Ajax传输的数据格式

• XML
• JSON
• HTML

3. 使用jQuery进行Ajax开发

• jQuery对Ajax操作进行了封装，再jQuery最底层使用的方法是$.ajax()，第二层使用的是load()，$.get()，$.post()，第三层使用的是$.getScript()和$.getJSON()

最常用的是第二层

3.1 load()方法使用

load(url,[data],[callback])

• url：请求地址（必选），类型
• data：请求key/value参数（可选），类型Object（json格式的变量）
• callback：回调函数（当请求响应成功后，回调函数被触发，可选），类型Function

代码示例（模拟）

<script type="text/javascript" src="scripts/jquery-1.7.2.js">
<script type="text/javascript">
	$(function){
		//选择<a>标签，加入点击触发函数
		$("a").click(function(){
			//使用load方法处理Ajax
			//使用选择器，最前面必须有一个空格来表示是选择器
			//表示的是选择<h2>标签里的<a>标签
			var url = this.href + " h2 a";
			//解决缓存
			var args = {"time":new Date()}
			//选择id为context的标签
			//任何一个html节点都可以使用load方法来加载Ajax，结果将直接插入html节点中
			$("#context").load(url，args);
			return false;
		});
	}
</script>

3.2 $.get()或者$.post方法

$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[type])
$.getJSON(url,[data],[callback])

• url：请求地址（必选），类型String
• data：请求key/value参数（可选），类型Object（json格式的变量）
• callback：回调函数（当请求响应成功后，回调函数被触发，可选），类型Function
• type：格式（可选，默认_default），包括xml、html、script、json、text和_default

代码示例（模拟）

get方法

<script type="text/javascript" src="scripts/jquery-1.7.2.js">
<script type="text/javascript">
	$(function){
		//选择<a>标签，加入点击触发函数
		$("a").click(function(){
			//使用选择器，最前面必须有一个空格来表示是选择器
			//表示的是选择<h2>标签里的<a>标签
			var url = this.href + " h2 a";
			//解决缓存
			var args = {"time":new Date()}
			//function回调函数，当响应结束时，回调函数被触发，响应结果再data中
			$.get(url,args,function(data){
				var name = $(data).find("name").text();
				var eaml= $(data).find("email").text();
				var website= $(data).find("website").text();

				$("#details").empty()
							 .append("<h2><a href='mailto:"+ email +"'>" + name +"></a></h2>")	
							 .append("<a href='"+ website +"'>"+ website +"</a>")				 
			});
			return false;
		});
	}
</script>

post方法

<script type="text/javascript" src="scripts/jquery-1.7.2.js">
<script type="text/javascript">
	$(function){
		//选择<a>标签，加入点击触发函数
		$("a").click(function(){
			//使用选择器，最前面必须有一个空格来表示是选择器
			//表示的是选择<h2>标签里的<a>标签
			var url = this.href + " h2 a";
			//解决缓存
			var args = {"time":new Date()}
			//function回调函数，当响应结束时，回调函数被触发，响应结果再data中
			$.post(url,args,function(data){
				var name = $(data).find("name").text();
				var eaml= $(data).find("email").text();
				var website= $(data).find("website").text();

				$("#details").empty()
							 .append("<h2><a href='mailto:"+ email +"'>" + name +"></a></h2>")	
							 .append("<a href='"+ website +"'>"+ website +"</a>")				 
			});
			return false;
		});
	}
</script>

json格式响应数据

<script type="text/javascript" src="scripts/jquery-1.7.2.js">
<script type="text/javascript">
	$(function){
		//选择<a>标签，加入点击触发函数
		$("a").click(function(){
			//使用选择器，最前面必须有一个空格来表示是选择器
			//表示的是选择<h2>标签里的<a>标签
			var url = this.href + " h2 a";
			//解决缓存
			var args = {"time":new Date()}
			//function回调函数，当响应结束时，回调函数被触发，响应结果再data中
			$.get(url,args,function(data){
				var name = data.person.name;
				var eaml= ata.person.email;
				var website= ata.person.website;

				$("#details").empty()
							 .append("<h2><a href='mailto:"+ email +"'>" + name +"></a></h2>")	
							 .append("<a href='"+ website +"'>"+ website +"</a>")				 
			},"JSON");
			return false;
		});
	}
</script>

或者直接使用$.getJSON

<script type="text/javascript" src="scripts/jquery-1.7.2.js">
<script type="text/javascript">
	$(function){
		//选择<a>标签，加入点击触发函数
		$("a").click(function(){
			//使用选择器，最前面必须有一个空格来表示是选择器
			//表示的是选择<h2>标签里的<a>标签
			var url = this.href + " h2 a";
			//解决缓存
			var args = {"time":new Date()}
			//function回调函数，当响应结束时，回调函数被触发，响应结果再data中
			$.getJSON(url,args,function(data){
				var name = $(data).find("name").text();
				var eaml= $(data).find("email").text();
				var website= $(data).find("website").text();

				$("#details").empty()
							 .append("<h2><a href='mailto:"+ email +"'>" + name +"></a></h2>")	
							 .append("<a href='"+ website +"'>"+ website +"</a>")				 
			});
			return false;
		});
	}
</script>