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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
jquery选择器简述
Aug 31 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
微信小程序实现商城倒计时
Nov 01 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
ftp类(myftp.php)
2006/10/09 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
用php解析html的实现代码
2011/08/08 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
destoon各类调用汇总
2014/06/20 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
详解Python中的文本处理
2015/04/11 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Python适配器模式代码实现解析
2019/08/02 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
参观邀请函范文
2015/02/02 职场文书