jquery的ajax请求全面了解


Posted in Javascript onMarch 20, 2013

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()
<!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的使用

Javascript 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
js实现模拟购物商城案例
May 18 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 #Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 #Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 #Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 #Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 #Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 #Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 #Javascript
You might like
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JS打印组合功能
2016/08/04 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python实现树形打印目录结构
2018/03/29 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
说明书怎么写
2014/05/06 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
诚信教育主题班会
2015/08/13 职场文书