从零开始学习jQuery (六) AJAX快餐(10)_H5之家 - 中国HTML5教程资源分享第一站

用一个示例讲解各个事件的触发顺序:

<!DOCTYPE　html　PUBLIC　"-//W3C//DTD　XHTML　1.0　Transitional//EN"　"">
<html　xmlns="">
<head>
<title>jQuery　Ajax　-　AjaxEvent</title>

<script　type="text/javascript"　src="../scripts/jquery-1.3.2.min.js"></script>

<script　type="text/javascript">
$(document).ready(function()
{

　$("#btnAjax").bind("click",function(event)
　{
　　$.get("../data/AjaxGetMethod.aspx");
　})

　$("#divResult").ajaxComplete(function(evt,request,settings)　{　$(this).append('<div>ajaxComplete</div>');　})
　$("#divResult").ajaxError(function(evt,request,settings)　{　$(this).append('<div>ajaxError</div>');　})
　$("#divResult").ajaxSend(function(evt,request,settings)　{　$(this).append('<div>ajaxSend</div>');　})
　$("#divResult").ajaxStart(function()　{　$(this).append('<div>ajaxStart</div>');　})
　$("#divResult").ajaxStop(function()　{　$(this).append('<div>ajaxStop</div>');　})
　$("#divResult").ajaxSuccess(function(evt,request,settings)　{　$(this).append('<div>ajaxSuccess</div>');　})

});

</script>

</head>
<body>
　<br　/><button　id="btnAjax">发送Ajax请求</button><br/>
　<div　id="divResult"></div>
</body>
</html>

结果如图:

我们可以通过将默认options的global属性设置为false来取消全局Ajax事件的触发.

七.注意事项

1. 如果在Get请求发送的url中有两个同名参数,比如两个param参数:

?param=Multiple&param=Multiple3

使用服务器端方法获取param参数:

if　(!String.IsNullOrEmpty(HttpContext.Current.Request["Param"]))
{
　param　=　HttpContext.Current.Request["Param"];
}

此时获取到得param是一个用","分隔多个值的字符串:

Multiple,Multiple3

八.总结

本文介绍如何使用jquery实现Ajax功能.　用于发送Ajax请求的相关函数如load,get,getJSON和post这些渐变Ajax方法,对于核心的ajax 方法没有过多介绍,主要是通过配置复杂的参数实现完全控制Ajax请求. 另外讲解了ajax的辅助函数比如用于序列化表单对象为字符串的serialize()方法,用于将表单对象序列化为JSON对象的serializeArray()方法. 这些在使用脚本获取数据实现与服务器端交互是很有用,JSON格式的数据在处理大对象编程时将我们从混乱的属性字符串中解放出来.

jQuery还提供录入全局ajax事件这一个特殊的事件,并且可以在一个对象上设置这些事件,在发送Ajax请求的各个生命周期上会调用这些事件,可以通过修改默认的options对象的global属性打开或关闭全局事件.

本文配套源码