jquery.ajax之beforeSend方法使用介绍


Posted in Javascript onDecember 08, 2014

常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者“内容加载中..”,用来告知用户正在请求数据。这个就可以用beforeSend方法来实现。

下载demo:ajax loading

代码如下:

function test_ajax(){

   $.ajax(

   {

      type:"GET",//通常会用到两种:GET,POST。默认是:GET

      url:"a.php",//(默认: 当前页地址) 发送请求的地址

      dataType:"html",//预期服务器返回的数据类型。

      beforeSend:beforeSend, //发送请求

      success:callback, //请求成功

      error:error,//请求出错 

      complete:complete//请求完成

   });

}

function error(XMLHttpRequest, textStatus, errorThrown){

  // 通常情况下textStatus和errorThown只有其中一个有值 

  $("#showResult").append("<div>请求出错啦!</div>");

}

function beforeSend(XMLHttpRequest){

  $("#showResult").append("<div><img src='loading.gif' /><div>");

}

function complete(XMLHttpRequest, textStatus){

  $("#showResult").remove();

}

function callback(msg){

  $("#showResult").append("<div>请求成功,回传数:"+msg+"<div>");

}

方法beforeSend,用于在向服务器发送请求前添加一些处理函数。这是一个ajax事件,在ajax请求开始之前就被触发,通常允许用户修改XMLHttpRequest对象(比如说设置附加的头部信息),关于ajax事件的解释可参考文档:http://docs.jquery.com/Ajax_Events

我们还见到一种情况,很多网站在加载内容的过程中给出“数据加载中,请稍候”的提示,当内容被加载完毕后显示内容。可以设置默认文本显示为加载中的提示,当内容加载完毕时,我们可以通过ID选择器,将该标签中的文本替换成最终的内容。以此来取代beforeSend,效率更高。

什么时候用beforeSend,什么时候用文本替换,取决于ajax请求前后你所展示的DOM元素是否一致,如果你所展示的DOM元素在请求之前已经存在,那么通过上述文本替换的方式来处理会好些,如果除此以外你还需增加其他的需求,那么还是用beforeSend来处理吧。

Javascript 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
详解js类型判断
May 22 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
js实现拖动缓动效果
Jan 13 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
详解JavaScript执行模型
Nov 16 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 #Javascript
Jquery实现由下向上展开效果的例子
Dec 08 #Javascript
Javascript常用字符串判断函数代码分享
Dec 08 #Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 #Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 #Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 #Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 #Javascript
You might like
php遍历目录viewDir函数
2009/12/15 PHP
php Static关键字实用方法
2010/06/04 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
js字符串类型String常用操作实例总结
2019/07/05 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python3匿名函数用法示例
2018/07/25 Python
谈谈Python中的while循环语句
2019/03/10 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
公务员年度考核评语
2014/12/31 职场文书
小石潭记导游词
2015/02/03 职场文书
召开会议通知范文
2015/04/15 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
导游词之舟山普陀山
2019/11/06 职场文书