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 相关文章推荐
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
JS实现简易日历效果
Jan 25 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 无限级缓存的类的扩展
2009/03/16 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
Python 文件重命名工具代码
2009/07/26 Python
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python pdb调试方法分享
2014/01/21 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
外企求职信范文分享
2013/12/31 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
应届毕业生自荐信
2014/05/28 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
党员民主评议总结
2014/10/20 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书