jquery与ajax的应用2
1.两个全局方法
$.getScript(path,function(){}) ;
用途：动态加载script脚本。
path:script地址。
callback:可选。在javascript文件成功载入后运行。
代码：
$(function(){
$.getScript('jquery.color.js',function(){
$("#go").click(function){
$(".block").animate({backgroundColor: 'pink'}, 1000).animate({backgroundColor: 'blue'}, 1000)
});
});
});
$.getJSON(url,function(data){}) ;
用途：当于加载JSON文件。
url:目标url地址
callback:可选。
data：返回的内容的json片段。
代码：
$(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">'+commnet['content']+'</p></div>';
});
$('#resText').html(html);
})
})
});
ps: 全局函数$.each(data, function(commentIndex, comment){})用法。用于遍历数组或对象集合。
data是一个数组或者一个对象。
commentIndex代表索引，comment为索引对应的变量或内容。
2.jQuery最底层的Ajax实现
$.ajax()方法是jQuery最底层的Ajax实现。
它的结构为：$.ajax(options)
options参数以key/value的形式存在。
url: String 发送请求地址。
type:请求方式默认为Get.
timeout:超时时间，毫秒级。
data：发送到服务器的数据，Object或者String.
dataType：预期服务器返回数据类型，如果不指定将根据HTTP包的MIME信息返回reponseXML或reponseText.
beforeSend：发送请求前可以修改XMLHttpRequest对象函数，例如添加自定义HTTP头。返回false可取消此次ajax请求。
complete：请求完成时的回调函数.
success：请求成功时的回调函数。
error：请求失败时的回调函数。
global：是否触发全局Ajax事件。默认为true;
代码：
$(function(){
$('#send').click(function(){
#.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
});
});
3.序列化元素
serialize()方法
用途：作用于一个Jquery对象，将dom元素的内容序列化为字符串。通常用于ajax表单提交。
返回字符串。
<form action="#">
<p>评论：</p>
<p>姓名：<input type="text" name="username" /></p>
<p>内容：<input type="text" name="content" /></p>
<p>内容：<input type="button" value="提交"/></p>
</form>
$('#send').click(function(){
$.get("get1.php", $('#form1').serialize(),function(data,textStatus){
#('#resText').html(data);
})
});
serialize()函数的核心是$.param()方法
用途：对一个数组或对象按照key/value进行序列化。
var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k);//输出a=1&b=2%c=3
4.jQuery中全局Ajax事件
当Ajax开始请求时会触发ajaxStart()方法的回调函数。请求结束时会请求ajaxStop回调函数。
ajaxStart(callback) 开始请求执行
ajaxStop(callback) 请求结束执行
ajaxComplete(callback) 请求完成时执行
ajaxError(callback) 发生错误时执行
ajaxSend(callback) 请求发送前执行
ajaxSuccess(callback) 请求成功时执行
如果想使某个Ajax请求不受全局方法的影响，可以将参数中的global设置为false.
