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