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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
javascript常用方法总结
May 14 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
window.location.hash知识汇总
Nov 09 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
德生PL330测评
2021/03/02 无线电
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
Script的加载方法小结
2011/01/12 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python骚操作之动态定义函数
2019/03/26 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
大学自我鉴定
2013/12/20 职场文书
自考生自我评价分享
2014/01/18 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
红色故事演讲稿
2014/05/22 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
党员心得体会范文2016
2016/01/23 职场文书
2016年学校招生广告语
2016/01/28 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang