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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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
模仿OSO的论坛(二)
2006/10/09 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
python实现的防DDoS脚本
2011/02/08 Python
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python编写Windows Service服务程序
2018/01/04 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
python实现汉诺塔算法
2021/03/01 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python面试题之列表声明实例分析
2019/07/08 Python
Python目录和文件处理总结详解
2019/09/02 Python
Python如何用filter函数筛选数据
2020/03/05 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
跟单业务员岗位职责
2014/03/08 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android