Ajax-jQuery实现

在现网开发中我们更多是使用jQuery来实现Ajax技术
jQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(),第二层是 load(),$.get() 和 $.post(),第三层是 $.getScript() 和 $.getJSON()
load()：
load() 方法是 jQuery 中最为简单和常用的 Ajax 方法,能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是: load(url[,data][,callback])
程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置,然后将要加载的文件的 url 做为参数传递给 load() 方法即可
如果只需要加载目标 HTML 页面内的某些元素,则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符,就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和选择器之间有一个空格)
传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递,采用 GET 方式传递,否则采用 POST 方式
对于必须在加载完才能继续的操作,load() 方法提供了回调函数,该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象和 XMLHttpRequest 对象
$.get():
$.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url[,callback][,type]);
$.get() 方法的回调函数只有两个参数: data 代表返回的内容,可以是 XML 文档,JSON 文件,HTML 片段等; textstatus 代表请求状态,其值可能为: succuss,error,notmodify,timeout 4 种.
$.get() 和 $.post() 方法时 jQuery 中的全局函数,而 find() 等方法都是对 jQuery 对象进行操作的方法
序列化元素：
jQuery 为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法: serialize(). 该方法作用于一个 jQuery 对象,能将 DOM 元素内容序列化为字符串,用于 Ajax 请求.
使用 serialize() 方法可以自动完成对参数的 url 编码因为该方法作用于 jQuery 对象,所以不光只要表单能使用,其它选择器选取的元素也能使用它.

案例一：lode()方法使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function()
				{
					$("a").click(function()
							{
								var url = this.href;
								var args = {"time":new Date()};
								$("#content").load(url,args);
								return false;
							});
				})
		
	</script>
	
</head>
<body>
	<a href="../helloAjax.txt">TEST</a>
	<div id="content"></div>
</body>
</html>

案例二：使用jQuery发送ajax请求，并处理返回的三种不同数据：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="../scripts/jquery-1.7.2.js" ></script>
<script type="text/javascript">

	$(function()
			{
				$("a").click(function()
						{
							var $content = $(this).text();
							
							if($content=="Andy")
							{
								var url = this.href + " h2 a";
								var args = {"time":new Date()}
								//任何一个html节点都可以使用load加载Ajax,结果将直接插入html
								$("#details").load(url,args);
							}
							if($content=="Richard")
							{
								
								var url = this.href;
								//args是json格式
								var args = {"time":new Date()};
								//function回调函数，响应结果在data中
								$.post(url,args,function(data)
										{
											var $name = $(data).find("name").text();
											var $website = $(data).find("website").text();
											var $email = $(data).find("email").text();
											//alert(data.getElementsByTagName("name")[0].firstChild.nodeValue); 
											alert($name);
										});
							}
							
							if($content=="Jeremy")
							{
								var url = this.href;
								//args是json格式
								var args = {"time":new Date()};
								//function回调函数，响应结果在data中
								$.getJSON(url,function(data)
										{
											var $name = data.person.name;
											var $age = data.person.age;
											var $email = data.person.email;
											alert($name); 
										});
								//也可以使用get(url,function(){},"JSON")
							}
							
							return false;
						});
			});

</script>

</head>
<body>
	<h1>People</h1>
	<ul>
		<li><a href="../files/andy.html">Andy</a></li>
		<li><a href="../files/richard.xml">Richard</a></li>
		<li><a href="../files/jeremy.json">Jeremy</a></li>
	</ul>	
	<div id="details"></div>
</body>
</html>

原文链接：https://www.f2er.com/ajax/162889.html

猜你在找的Ajax相关文章