JQuery的Ajax学习(1)

Jquery提供了Ajax的前端封装,今天学习了一下,使用还是非常的方便的。

Jquery中的Ajax操作一共提供了6个方法,分别是$.ajax(),load(),$.get(),$.post,$getScript(),$getJSON()。这6个方法中$.ajax()是最底层的,其它的方法都是基于这个方法的.

注:我这里的例子使用的是JSP和Struts2

1.load()方法

load()方法的使用方法是最简单的,可以在元素上直接使用这个方法,load()方法可以有3个参数,分别是url,data,callback,其中url是必须参数,代表接受请求的URL,另外2个是可选参数,其中data是发送至服务器的key:value数据,callback是回调函数.

例子1:

页面上有一个按钮,一个DIV

<input type="button" value="JAjax1" onclick="tryAjax1();"></input>

<div id="JAjax"></div>

 按钮的onclick事件如下:

var url = 'test.html';
function tryAjax1() {
	$('#JAjax').load(url);
}

 test.html的代码如下:

<table id="insert">
	<tr><td>aaa</td></tr>
	<tr><td>aaa</td></tr>
</table>

 就这么几行简单的代码,就完成了一个Ajax示例,点击"JAjax1",id为"insert"的Table就插入了"JAjax"这个DIV中.

例子1这种方式对于载入一些静态的内容是非常好的,像这样只带一个参数的load方法发送的GET请求,但是如果想载入动态内容有时候就会出问题,因为GET方式的请求会数据会被浏览器缓存起来,导致第二次再点击按钮是不再发送请求.(至少我在IE8下试验是这样的,在Firefox中每次点击按钮都会发送请求),但是如果load方法加上了第二个参数,也就是发送到服务器的数据,这样的话,load方法会以PSOT方式发送请求,POST请求每次都会提交到服务器端.

例子2:

页面上依旧还是只有一个DIV和按钮:

<input type="button" value="JAjax1" onclick="tryAjax1();"></input>

<div id="JAjax"></div>

 按钮的onclick事件进行了修改:

var url = 'testajax!testAjax.action';
function tryAjax1() {
	$('#JAjax').load(url, {'content':'Jquery Ajax load1'}, callback1);
}
function callback1(responseText, textStatus, XMLHttpRequest) {
	alert(responseText);
	alert(textStatus);
}

 这次,把请求发到了Struts2的一个Action,传递了一个参数{'content':'Jquery Ajax load1'},并且添加了一个回调函数callback1,这个回调函数没有什么实际意义,纯粹的打印服务器返回的数据而已.

action的代码:

package action;

import com.opensymphony.xwork2.ActionSupport;

public class AjaxAction extends ActionSupport {

	private static final long serialVersionUID = -8023333659379228177L;
	
	private String content;
	
	public String testAjax() {
		System.out.println("%%%%%%%%%" + content);
		return "ajax2";
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}
}

 action里返回的"ajax2"指向了一个JSP页面,这个页面的代码如下:

<table id="insert">
	<tr><td>aaa</td></tr>
	<tr><td>${content}</td></tr>
</table>

 现在再点击按钮,能看到id 为"insert"的这个Table被插入到了id 为"JAjax"这个DIV里"${content}"被替换成了"Jquery Ajax load1".这个例子结合Struts2实现了将动态内容载入页面,在实际中这种方式很使用,使用也非常方便.

load方法还支持id选择器,在load()方法的URL最后加入一个ID选择器,就可以载入指定的元素了,在上面的例子中,在url后加上#insert,url现在变成了"testajax!testAjax.action #insert"这样就载入id为insert的元素了,但是要注意,URL和ID选择器之间有一个空格!

最后,提一下load方法的回调函数,load方法的回调函数有3个参数,第一个是请求返回的内容,第二个是状态:success,error,notmodified,timeout,4种,第三个参数是XMLHttpRequest对象.在load方法中,无论Ajax请求是否成功,回调函数就会被触发.而且回调函数的触发是在内容被插入到页面之后的,从上面的例子中就可以看出来,在alert的时候,内容实际上已经插入页面了.

 

2. $.get()方法

$.get()方法是用GET方式来提交请求的.

$.get()方法最多可以有4个参数,分别是url,data,callback,type

其中url是必选参数,其它三个是可选参数,type参数是指服务器端返回的内容的格式,可以是xml,html,script,json,text或_default.其它几个参数的含义与load方法是一样的.

例子3:

还是和上面的例子一样,这次用$.get()方法来做:

页面上还是一个按钮和一个DIV

<input type="button" value="JAjax2" onclick="tryAjax2();"></input>

<div id="JAjax"></div>

 Javascript代码如下:

var url = testajax!testAjax.action';
function tryAjax2() {
	$.get(url,{'content':'Jquery Ajax load2'},callback2,'html');
}
function callback2(data, textStatus) {
	$('#JAjax').append(data);
}

 Action代码和返回的JSP的代码和例子2的是一样的.

$.get()方法的回调函数有两个参数,分别是服务器返回的数据和请求状态,请求状态和load()方法一样,也是那4种.与load()方法不同的是,$.get()方法的回调函数只有当数据成功返回后才被调用.回调函数中可以根据服务器返回的不同类型数据(html,xml,json等)做相应的处理即可.

 

3. $.post()方法

$.post()方法的形式和使用方法和$.get()方法是完全相同的,只是一个是GET请求,一个是POST请求而已.

 

4. $.getScript()方法

这个方法用来载入JS文件,加载过来的JS文件不需要做任何处理,Javascript文件会自动执行.$.getScript()方法也有回调函数,可以在回调函数中调用载入的JS文件中的方法.回调函数没有参数.

 

5. $.getJSON()方法

这个方法是用来加载JSON文件的,用法与上一个$.getScript()一样.

 

6. $.ajax()方法

这个方法是JQuery里最底层的Ajax方法,方法只有一个参数,但是用法确是最复杂的.虽然这个方法只有一个参数,但是这个参数可以包含很多东西,参数都是以键值对的形式组织到一起的,所有参数都是可选的,例如可以这样写:$.ajax({url:'ajax.html',type:'GET'}).

还可以有很多其它的参数,有关这个方法的用法这里就先不讨论了,下次(已经写了，在这个地址 http://redstarofsleep.iteye.com/blog/857502 )专门再研究.(个人认为上面这些方法已经足够用了,这个方法的用处不大).

 

今天就先写到这吧.