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,用button按钮来触发ajax事件:
2.筛选载入的html文档
如果只要加载test.html页面内的某些元素:
load()的url参数语法结构为：url selector
3.传递方式:
load()方法的传递方式根据参数data来自动指定。如是果没有参数传递，则采用get方式传递;反之用post
4.回调参数
对于必须在加载完成后才能继续的操作，load()方法提供了回调函数(callback),该函数有3个参
数，分别代表请求返回的内容、请求状态和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>标签
jquery提供了更为理想的方法$.getScript()来直接加载.js文件
$.getJSON()
用于加载json文件
在回调函数中对返回的数据进行处理
需要对返回的数据进行遍历。这里使用$.each()函数.
$.each()不同于jquery对象的each(),它是一个全局函数，不操作jquery对象。而是以一个数组
或者对象作为第１个参数，以一个回调函数作为第２个参数。
回调函数有两个参数：
第1个为对象的成员或数组的索引。
第2个为对应变量或内容
$.ajax()方法
是 jquery最底层的ajax 实现
$.ajax(options)
6.序列化元素
serialize()
当表单元素很多时可采用这种写法：
即使表单中再增加字段，脚本仍然可以使用
需要注意，$.get()中的data参数不仅可以使用映射方式:
也可以使用字符串方式:
serializeArray()
将dom元素序列化后，返回json格式数据
$param()
用来对一个数组或对象按照key/value进行序列化
jquery中的ajax全局事件
jquery简化ajax操作不仅体现在调用ajax方法和处理响应方面，而且还体现在对调用ajax方法的
过程中的http请求的控制。
请求开始时会触发ajaxStart()方法的回调函数；当请求结束时会触发ajaxStop()方法的回调函数
ajaxComplete(callback) ajax请求完成时执行的函数
ajaxError(callback) ajax请求发生错误时执行的函数，捕捉到错误可以作为最后一个参数传递
ajaxSend(callback) ajax请求发送前执行的函数
ajaxSuccess(callback) ajax请求成功时执行的函数
如果 想使某个ajax请求不受全局方法的影响，那么可以在使用$.ajax(options)方法时，将参数
中的global设置为false:
和$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
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
