使用jQuery实现Ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/shiyeqiangldh/article/details/36190647

本文介绍了如何使用Ajax技术在不刷新页面的情况下实现与服务器端的通信，详细讲解了使用XMLHttpRequest对象及jQuery中的Ajax操作，并提供了实例演示，包括如何使用load()、get()和getJSON()方法加载HTML、XML和JSON数据。

使用Ajax，不用刷新页面，但可以和服务器端进行通信。使用ajax的主要方式是：XMLHttpRequest对象

1 jQuery中的 Ajax

jQuery 对Ajax 操作进行了封装，常用的方法是load(),$.get() 和 $.post()。

2：load(url, [data], [callback])方法介绍

载入远程 HTML 文件代码并插入至 DOM 中，参数：

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

例1：点击超链接时将超链接内的内容加载到div中.

<html>
	<head>
	<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
	<script type="text/javascript">
	$(function(){
	  $("a").click(function(){
	   var url=this.href; 
	   $("#content").load(url);
	   return false;
	  });
	});
	</script>
	</head>
	<body>
		<a href="helloAjax.txt">helloAjax</a>
		<div id="content"></div>
	</body>
</html>

借助缓存的效果能够将超链接中的笑脸也加载到html页面中来。

<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()}; //参数类型为json数据
	   $("#content").load( url ,args );
	   return false;
	  });
	});
	</script>

注意：url中可以使用selector选择器来加载使用的内容，注意空格即可。

var url=this.href+" a"; //" a"注意a前面有一个空格啊

任何一个html代码都可以使用load方法来加载ajax，结果直接插入到html代码中。

3: jQuery.get(url, [data], [callback], [type])

通过远程 HTTP GET 请求载入信息。

jQuery.post(url, [data], [callback], [type])与$.get()方法类似

参数：url,[data],[callback],[type]

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

例2：点击超链接，将超链接中的xml代码解析出来添加到id=details的节点中

<html>
	<head>
	<script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>
	<!-- "../scripts/jquery-1.7.2.js"表示script在上一级别的目录中 -->
	<script type="text/javascript">
	    $(function(){
	      $("a").click(function(){
	        var url = this.href;
	        var agrs={"time":new Date()};  //json格式
	        $.get(url,agrs,function(data){  //回调函数，当相应结束时候，回调函数被触发，相应结果在data中
	           var name=$(data).find("name").text();   //解析xml中的代码
	           var website=$(data).find("website").text(); //解析xml中的代码
	           var email=$(data).find("email").text(); //解析xml中的代码
	           $("#details").empty().append("<h1>"+name+"</h1>")
	                                .append("<h2>"+website+"</h2>")
	                                .append("<h3>"+email+"</h3>");
	        });
	        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>

4: jQuery.getJSON(url, [data], [callback])

$.getJSON()：通过 HTTP GET 请求载入 JSON 数据。

url,[data],[callback]：

url:发送请求地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

例3：点击超链接，将超链接中的jsonl代码解析出来添加到id=details的节点中

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
</style>
		<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 agrs={"time":new Date()};  //json格式
	        $.getJSON(url,agrs,function(data){  //回调函数，当相应结束时候，回调函数被触发，相应结果在data中
	           var name=data.person.name;   //解析xml中的代码
	           var website=data.person.website; //解析xml中的代码
	           var email=data.person.email; //解析xml中的代码
	           $("#details").empty().append("<h1>"+name+"</h1>")
	                                .append("<h2>"+website+"</h2>")
	                                .append("<h3>"+email+"</h3>");
	        });
	        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>