jquery ajax请求实例深入解析


Posted in Javascript onNovember 26, 2012

jquery中封装了一些ajax请求的方法,很实用。
比如.ajaxComplete()——请求完成时.ajaxError()——请求失败时.ajaxSend()——在Ajax请求发送时附加一个function去执行.ajaxStart()——请求开始时,.ajaxStop()——请求结束时.ajaxSuccess()——请求成功时.load()——从服务端加载数据并将返回的HTML替换到选择的元素中jQuery.post()——使用HTTP POST请求加载服务端数据.serialize()——将form元素集编码成一个字符串以便提交.serializeArray()——将form元素集编码成一个键值对数组jQuery.param()——创建一个序列化的数组或对象,使得适用于一个URL查询字符串或者Ajax请求jQuery.getScript()——从服务端加载一个js文件,然后执行它jQuery.getJSON()——从服务端加载用JSON编码过的数据jQuery.get()——从服务端加载数据简单说其中两点一、.ajaxStart()和.ajaxStop()

<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript" src="test/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.log1').ajaxStart(function() { 
$(this).text('Triggered ajaxStart handler.'); 
}); 
$('.log2').ajaxStop(function() { 
$(this).text('Triggered ajaxStop handler.'); 
}); 
$('.trigger').click(function() { 
$('.result').load('xixi.html'); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="trigger">Trigger</div> 
<div class="result"></div> 
<div class="log1"></div> 
<div class="log2"></div> 
</body> 
</html>

代码中class为result的元素load了一个xixi.html,此文件中的内容随便,只要存在这个文件就行。js执行方法的顺序是先
$(this).text('Triggered ajaxStart handler.');

然后
加载晚xixi.html里的内容到class为result的元素中
最后
$(this).text('Triggered ajaxStop handler.');

二、
.ajaxSend()、.ajaxComplete()、.ajaxSuccess()以及.ajaxError()

[html]
<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript" src="test/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('.log1').ajaxStart(function() { 
$(this).text('Triggered ajaxStart handler.');//【1】 
}); 
$('.log2').ajaxStop(function() { 
$(this).text('Triggered ajaxStart handler.');//【5】 
}); 
$('.result').ajaxSend(function() { 
$(this).text('Triggered ajaxSend handler.');//【2】 
}); 
$('.result').ajaxComplete(function() { 
$(this).text('Triggered ajaxComplete handler.');//【4】 
}); 
$('.result').ajaxSuccess(function() { 
$(this).text('Triggered ajaxSuccess handler.');//【3】 
}); 
$(".result").ajaxError(function() { 
$(this).text( "Triggered ajaxError handler." ); 
}); 
$('.trigger').click(function() { 
$('.result').load('xixi.html'); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="trigger">Trigger</div> 
<div class="result"></div> 
<div class="log1"></div> 
<div class="log2"></div> 
</body> 
</html>

上述代码中还是class为result的加载一个html文件。
执行顺序代码中已经标出
如果请求过程中出现什么错误,比如说文件不存在等,就会执行.ajaxError()中的方法而不是.ajaxSuccess()中的。
以前总是对ajax认识很乱,现在有个全面的认识,总结一下,希望共同学习,另外请求中的方式是HTTP GET还是HTTP POST也是值得研究的。
jquery中介绍ajax的地址ajax的使用
Andy_能力越到责任越大
Javascript 相关文章推荐
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
js html实现计算器功能
Nov 13 Javascript
jquery validate poshytip 自定义样式
Nov 26 #Javascript
一个可拖拽列宽表格实例演示
Nov 26 #Javascript
JS编程小常识很有用
Nov 26 #Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 #Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 #Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 #Javascript
JavaScript mapreduce工作原理简析
Nov 25 #Javascript
You might like
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
javascript实用小函数使用介绍
2013/11/11 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
在Python中使用成员运算符的示例
2015/05/13 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
路政管理专业个人自荐信范文
2013/11/30 职场文书
法律六进活动方案
2014/03/13 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
《去年的树》教学反思
2016/02/18 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
Python操作CSV格式文件的方法大全
2021/07/15 Python