欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQuery的Ajax学习(1)

程序员文章站 2022-07-12 09:23:42
...

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 )专门再研究.(个人认为上面这些方法已经足够用了,这个方法的用处不大).

 

今天就先写到这吧.

 

 

上一篇: 动态dp

下一篇: HTML实体字符