jquery中的ajax

lemo

浏览: 90914 次
性别:
来自: 北京

最近访客更多访客>>

waterfire119

hysun

jboss0324

满长安

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery学习笔记

Ajax jQuery json HTML JSP

jquery对ajax操作进行了封装，在jquery中$.ajax()属性最低层的方法，第2层是load(),$get()

和$post方法，第3层是$.getScript和$.getJSON()方法。

load方法
1.load()是jquery中最常用和简单的ajax方法,能载入远程html代码并插入DOM中.
load(url[,data][,callback])
url:string类型，请求html页面的url地址
data(可选):Object类型，发送至服务器的key/value数据
callback(可选):function,请求完时的回调函数，无论请求成功或失败
test.html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="comment">
 <h6>张三:</h6>
 <p class="para">沙发.</p>
</div>
<div class="comment">
 <h6>李四:</h6>
 <p class="para">板凳.</p>
</div>
<div class="comment">
 <h6>王五:</h6>
 <p class="para">地板.</p>
</div>
</body>
</html>

新建一个html,用button按钮来触发ajax事件:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
 <!--   引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
  $(function(){
	  $("#send").click(function(){
			  $("#resText").load("test.html");
	  })
  })
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />

<div  class="comment">
	已有评论：
</div>
<div id="resText" ></div>
</body>
</html>

2.筛选载入的html文档
如果只要加载test.html页面内的某些元素:
load()的url参数语法结构为：url selector

$("#resText").load("test.html .para");

3.传递方式:
load()方法的传递方式根据参数data来自动指定。如是果没有参数传递，则采用get方式传递;反之用post

$("$resText").load("test.jsp",function(){
});
$("$resText").load("test.jsp",{name:'r',age:'2'},function(){
});

4.回调参数
对于必须在加载完成后才能继续的操作，load()方法提供了回调函数(callback),该函数有3个参

数，分别代表请求返回的内容、请求状态和xmlhttprequest对象

$("$resText").load("test.jsp",function(responseText,textStatus,xmlhttprequest){
});

load()中，无论ajax请求是否成功，只要当请求完成后，回调函数就被触发

$.get()和$.post()
load()通常用来从web服务器上获取静态的数据文件，如果需要传递一些参数给服务器的页面，

可以使用$.get()或者$.post().它们是jquery中的全局函数
1.$.get()
使用get方式进行异步请求
$.get(url[,data][,callback][,type])
url: string类型，请求HTML页面的UTL地址
data:Object,发送到服务器的key/value数据会作为queryString附加到请求url中
callback:function,载入成功时回调函数（只有当response的返回状态是success才调用该方法

）自动将请求结果和状态传递给该方法
type:string,服务端返回内容的格式（xml,html,script,json,text , _default）

$.post()
与$.get()方法的结构和使用方式相同，不同处有：
1.get请求会将参数跟在url后进行传递，而post请求则是作为http消息的实体内容发送给web服

务器。
2.get请求大小有限制(2kb),post理论上不受限制
3.get请求的数据会被浏览器缓存起来，而post方式相对来说可以避免这些问题

$.getScript()和$.getJSON()
1.$.getScript()
有时需要动态的创建<script>标签

$(document.createElement("script")).attr("src","test.js").appendTo("head");或
$("<script type="text/javascript" src="test.js"/>")appendTo("head");

jquery提供了更为理想的方法$.getScript()来直接加载.js文件

$(function(){
    $('#send').click(function(){
	$.getScript('test.js');
    })
})
$.getScript()也有回调函数，它会在js文件成功载入后运行。
$(function(){
	$.getScript('test.js',function(){
	    $("#go").click(function(){
		....;
	    })
       })
})

$.getJSON()
用于加载json文件

$(function(){
    $('#send').click(function(){
	$.getJSON('test.json');
    })
})

在回调函数中对返回的数据进行处理

$(function(){
    $('#send').click(function(){
	$.getJSON('test.json',function(data){
	  //data:返回的数据	
	});
    })
})

需要对返回的数据进行遍历。这里使用$.each()函数.
$.each()不同于jquery对象的each(),它是一个全局函数，不操作jquery对象。而是以一个数组

或者对象作为第１个参数，以一个回调函数作为第２个参数。
回调函数有两个参数：
第1个为对象的成员或数组的索引。
第2个为对应变量或内容

$(function(){
    $('#send').click(function(){
	$.getJSON('test.json',function(data){
	    $('#resText').empty();
	    var html = '';
	    $.each(data,function(commentIndex,comment){
		html +='<div class="comment"><h6>'
			+comment['username']+':</h6><p class="para">'
			+comment['content']+'</p></div>';
	    });
	    $('#resText').html(html);
	});
    })
})

$.ajax()方法
是 jquery最底层的ajax 实现
$.ajax(options)

6.序列化元素
serialize()
当表单元素很多时可采用这种写法：

$("#send").click(function(){
    $.get("get1.jsp",$("#form1").serialize(),function(data,textStatus){
	$("resText").html(data);
    })
})

即使表单中再增加字段，脚本仍然可以使用
需要注意，$.get()中的data参数不仅可以使用映射方式:

{
    name:$('#name').val(),
    content:$('#content').val()
}

也可以使用字符串方式:

"name="+encodeURIComponent($('name').value)
+"&content="+encodeURIComponent($('#content').val())

serializeArray()
将dom元素序列化后，返回json格式数据

$(function(){
    var fields = $(":checkbox,:radio").servializeArray();
    $.each(fields,function(i,field){
	$('#results').append(field.value+",");
    })
})

$param()
用来对一个数组或对象按照key/value进行序列化

var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k); //输出a=1&b=2&c=3

jquery中的ajax全局事件
jquery简化ajax操作不仅体现在调用ajax方法和处理响应方面，而且还体现在对调用ajax方法的

过程中的http请求的控制。
请求开始时会触发ajaxStart()方法的回调函数；当请求结束时会触发ajaxStop()方法的回调函数

<div id="loading">加载中..</div>
$("#loading").ajaxStart(function(){
    $(this).show();
})
$("#loading").ajaxStop(function(){
    $(this).hide();
})

ajaxComplete(callback) ajax请求完成时执行的函数
ajaxError(callback) ajax请求发生错误时执行的函数，捕捉到错误可以作为最后一个参数传递
ajaxSend(callback) ajax请求发送前执行的函数
ajaxSuccess(callback) ajax请求成功时执行的函数

如果想使某个ajax请求不受全局方法的影响，那么可以在使用$.ajax(options)方法时，将参数

中的global设置为false:

$.ajax({
    url:"test.html",
    global:false
})

分享到：

jquery中对form元素的操作 | jquery中的动画

2010-03-18 15:55
浏览 1527
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论