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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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
编译问题
2006/10/09 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
python操作xml文件详细介绍
2014/06/09 Python
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
python scatter函数用法实例详解
2020/02/11 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
毕业生在校学习的自我评价分享
2013/10/08 职场文书
办理信用卡工作证明
2014/01/11 职场文书
小学生打架检讨书
2014/01/26 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
人事文员岗位职责
2015/02/04 职场文书
初中运动会前导词
2015/07/20 职场文书