用jQuery实现Ajax快速入门教程

Ajax,Asynchronous JavaScript and XML,异步JavaScript和xml。怎么发音呢?传说这是一个希腊文,Aias(Eye-yas),也许可以读作:EYE-yaks,爱牙科斯〜〜〜这两天看到一个教程,上直接念成阿甲克斯,也挺朗朗上口的。其实怎么读,无所谓的。

最近在开发糗微的过程中,不得不学习通过jQuery来实现Ajax。把这个学习过程记录下来,和大家分享。

这个教程使用语言:jQuery,难度:初学者;时间估计:20分钟。

什么是AJAX?

名词解释:XHR,是XML HTTP request的简称。我想大部分人在网上冲浪的时候都体会过Ajax

  • 在GMAIL中,当你从收信箱转换至草稿箱,你会发现,网页的部分改变了,但是网页并没有整体刷新。你还在同一个页面上的感觉,地址栏的地址也没有发生任何变化。有人会问这是不是一个网页框架技术?我们观察原代码,找不到任何iframe的影子。
  • 在Google Reader当中,你点击了一个feed,内容随之改变,但是并没有重定向网页的感觉。
  • 在Google Maps当中,你扩大和缩小地图,地图变化了,但并没有整个的更新网页。
  • 在live spaces当中评论别人的博客,留言提交上去了,网页并未发生大的变化。

对,你感觉不到你在与服务器交换数据的过程,这一过程全部放到后台异步完成。在之前,人们要实现与服务器交换数据,浏览器会这样做,首先产生一个访问请求,这时浏览器刷新成空白页,等待服务器的响应,接到响应之后,全新的呈现一个网页在浏览器上。这样就会看到一个明显的网页变换过程。而有一Ajax之后,网页的显示可能就不需要刷新和重定向了。如果你只是想修改部分的网页内容,而不是全部,这一技术无疑是你最想要的。这有点象动态网页技术DHTML+远程访问。这一技术的最大用处就是,当你与服务器交换数据时,不影响你对网页内其它内容的继续阅读与操作。

上手AJAX

jQuery对于Ajax的全局设置
对于一个静态内容的访问,也许我们希望浏览器缓存网页内容,以便下一次访问的时候能提高效率。但是因为Ajax的大部分应用都是数据库的访问,内容随时变化,这个时候我们不希望浏览器缓存网页内容。jQuery提供了一个全局使用的函数,$.ajaxSetup ();我们可以把自己需要的全局操作以参数的形式传进去就可以了。

1
2
3
$.ajaxSetup({
  cache: false
});

1. load(): 远程调取html内容,并将其插入至指定的位置;

事实上,大部分的Ajax的应用都是实现这个过程,动态地在网页的某个位置加入一段互动显示效果。使用jQuery当中的load()函数可以很方便地实现这一过程。

基本实现

假设网页上有一个load按钮,它会响应鼠标click事件。我们需要写一段代码来具体如何响应这个click事件。最基本的,我们需要点击按钮后有一个等待的动画,消除人们的误会,让人看到正在响应鼠标单击事件,这时后台向服务器提交一个指定网页的请求。当网页内容返回以后,将这段网页内容加载至结果显示区域去。

1
2
3
4
5
6
7
8
9
10
	$.ajaxSetup ({
		cache: false
	});
	var ajax_load = "<img src='img/load.gif' alt='loading...' />";
 
//	load() functions
	var loadUrl = "ajax/load.php";
	$("#load_basic").click(function(){
		$("#result").html(ajax_load).load(loadUrl);
	});

1-3行,让浏览器对内容不缓网页内容;
4行,定义一个动画地址,显示正在响应事件;
7行,定义访问请求的地址;
8行,$(“#load_bashic”)相当于getElementById(load_basic),获取网页当中id为load_basic的对象。定义它被点击后,id为result的对象首先显示4行当中定义的动画,同时提交7行定义的请求,当请求返回之后替换刚才显示的动画,显示在result对象当中。

只调用部分远程文件

上面的例子当中,会把返回的整个内容显示在result对象当中。如果这时我们并不希望显示返回内容的全部,而只是其中指定的部分呢?比如说,返回的内容是一段html格式的文件:

1
2
3
4
5
6
7
8
<h4>nothing</h4>
<h4>nothing</h4>
<div id="picture">
  <h4>a picture.</h4>
  <a href="http://blog.qiuworld.com">
      <img src="http://www.qiuworld.com/images/c5.jpg"></img>
   </a>
</div>

我们只希望显示图层picture当中的内容。这个时候,我们可以使用load(url + “#DOM”)来实现这个想法:

8
9
10
11
12
	$("#load_basic").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl + " #picture");
	});

通过Get方法提交数据

有时候,我们想通过Get方法向服务器提交一些数据,然后等待其响应结果。当然我们也可以使用上面的方法,修改提交地址,让它带有需要提交的数据就可以了。其实jQuery的load方法也是这么干的,只不过书写起来会比修改网页地址让人更容易懂:

8
9
10
11
12
	$("#load_basic").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl, "language=php&version=5");
	});

对,我们只需要把需要提交的数据以load(url,”data”);的形式提交就可以了。

通过POST方法提交数据

知道POST和GET的区别吗?不知道,那就Google百度一下吧。方法是类似的,load(url,array);的形式就可以了。

8
9
10
11
12
	$("#load_basic").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl, {language: "php", version: 5});
	});

注意这里的数组使用的是冒号,而不是=>的。

load当中使用回调函数

8
9
10
11
12
13
14
	$("#load_basic").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl, null, function(responseText){
				alert("Response:\n"+responseText);
				});
	});

这一方法可以实现当ajax响应成功以后显示一个提醒对话框。但是这样写的程序不漂亮。下面有更好的办法。

发表评论

电子邮件地址不会被公开。 必填项已用*标注