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 相关文章推荐
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
tracking.js页面人脸识别插件使用方法
Apr 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页面中文乱码分析
2013/10/29 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
js的三种继承方式详解
2017/01/21 Javascript
几行js代码实现自适应
2017/02/24 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
python3抓取中文网页的方法
2015/07/28 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
python IP地址转整数
2020/11/20 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
心理学专业毕业生推荐信范文
2013/11/21 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
大学校庆策划书
2014/01/31 职场文书
工作证明英文模板
2014/10/21 职场文书
保研推荐信格式
2015/03/25 职场文书
宇宙与人观后感
2015/06/05 职场文书
八年级物理教学反思
2016/02/19 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
oracle重置序列从0开始递增1
2022/02/28 Oracle