jQuery Ajax 异步加载显示等待效果代码分享

AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它并非一种新的技术，而是以下几种原有技术的结合体。

1) 使用CSS和XHTML来表示。

2) 使用DOM模型来交互和动态显示。

3) 使用XMLHttpRequest来和服务器进行异步通信。

4) 使用javascript来绑定和调用。

通过AJAX异步技术，可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型：

1) 不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。界面不会出现白板，在得到服务器响应之前还可以友好的给出一个加载提示。

2) 不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数，待服务器响应到达时，触发回调函数，并且传递所需的少量数据。“按需取数据”也降低了服务器的压力。

3) 不需要使用隐藏或内嵌的框架。在XHR对象之前，模拟Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架(<iframe>标签)。

css：

#loading {
width:170px;
height:25px;
border:3px solid #C3DAF9;
position:absolute;
top:300px;
left:600px;
z-index:10000;
background-color:#F7F9FC;
line-height:25px;
vertical-align:middle;
font-size:11pt;
display:none;
}

html：

<div id="loading"><img src="${path}/map/image/2012032811155512.gif" alt=""/>正在加载数据,请稍候...</div>

js：

$.ajax({
async: true,
beforeSend: function () {
ShowDiv();
},
complete: function () {
HiddenDiv();
},
type : 'POST' ,
url : '',
data : {
},
success: function (data) {
//var obj = JSON.parse(data);
//var str = JSON.stringify(obj);
}
});
//显示加载数据
function ShowDiv() {
$("#loading").show();
}
//隐藏加载数据
function HiddenDiv() {
$("#loading").hide();
}

图片效果图如下所示：

以上所述是小编给大家介绍的jQuery Ajax 异步加载显示等待效果代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JQuery Ajax 异步操作之动态添加节点功能

    异步操作动态添加节点,导致在代码中给添加的节点全局绑定事件或者获取元素无效,上代码: $(function () { var IP = '...'; // 页面中的默认编号起始值 和 公用IP前缀 showData(); function showData() { if ($('.content')) $('.content').remove(); $.ajax({ url:IP + '/get', type:'get', success:function (data) { var newInf

  • jQuery使用$.ajax进行异步刷新的方法(附demo下载)

    jQuery使用$.ajax进行异步刷新的方法(附demo下载)

    本文实例讲述了jQuery使用$.ajax进行异步刷新的方法.分享给大家供大家参考,具体如下: 最近要用到jquery进行异步读取数据的功能,jquery提供了许多内置的异步读取函数,给大家演示下最常用的$.ajax用法 在客户端文本框输入一个内容,然后在服务器端返回时间 在DEMO中要用到ashx文件,用于获取服务器的信息 效果图片 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 客户端代码 <%@ Page Language="C#" Au

  • jQuery 中ajax异步调用的四种方式

    <script type="text/javascript" language="javascript" src="JS/jquery-1[1].2.3.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ //Jquery

  • Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值

    Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值

    首先来看工程结构图: 项目所需要的包,如下所示: JSP代码: <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServe

  • MVC+jQuery.Ajax异步实现增删改查和分页

    MVC+jQuery.Ajax异步实现增删改查和分页

    本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; usin

  • 基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #

  • jQuery Ajax 加载数据时异步显示加载动画

    jQuery Ajax 加载数据时异步显示加载动画

    ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码 <div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;"> <img alt="加载中..." src="../../Images/loading1.gif"/> </div> 在js脚本文件中首先把这个图片动画

  • jQuery Ajax 异步加载显示等待效果代码分享

    jQuery Ajax 异步加载显示等待效果代码分享

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

  • jquery zTree异步加载、模糊搜索简单实例分享

    本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下 一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data:

  • ajax异步加载图片实例分析

    本文实例讲述了ajax异步加载图片的方法.分享给大家供大家参考,具体如下: 图片一般比较大,所以他们都是在基本网页加载后才逐渐加载上的,整个加载的过程非常不雅观,或者是从模糊逐渐变清晰,或者是从上往下拓展开(当然你也可以认为这些都是不错的特效).如果是通过定时更换img的src属性来实现图片的动态更换,由此带来的闪烁更让它难以接受,这可不是用alt属性就能让人愉快的. 联系时下比较热门的,号称"无"刷新的AJAX技术,利用XMLHttpRequest对象发起异步请求,待图像加载完毕再动

  • Ajax全局加载框(Loading效果)的配置

    在Ajax进行后台数据请求的过程中,我们有时候会希望用户能知道页面后台还在做一些事情,这时候就需要给用户一个非常明确的提示,也就是我们所谓的进度条 实现原理: Jquery可以对ajax进行全局的设置,实现类似于C#中面向切面的效果,即对在Ajax提交之前和提交完成之后,我们均可以对其进行一系列的操作,所以我们可以在ajax开始的时候,把Loading框显示出来,在ajax请求完成之后,把loading框关闭掉,基本上就完美实现这个效果了. Jquery全局配置Ajax的方式为: $.ajaxS

  • jquery zTree异步加载简单实例讲解

    本文实例讲解了jquery zTree异步加载,分享给大家供大家参考,具体内容如下 web.xml中Servlet配置如下: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XM

  • jQuery zTree 异步加载添加子节点重复问题

    zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(MIT 许可证).如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助. zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 兼容 IE.FireFox.Chrome.Opera.

  • 关于 jQuery Easyui异步加载tree的问题解析

    关于 jQuery Easyui异步加载tree的问题解析

    想要实现从本地中加载json文件,通过事件来动态的插入到ul中时,遇到了一小bug html中代码是这样的 <ul class="easyui-tree" id="tt"></ul> js中的代码 $(".next-menu:nth-child(1) a").click(function() { var $IDstr = $(this).attr("id"), $treeIDNum = parseInt

  • jquery ajax局部加载方法详解(实现代码)

    在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&

  • JQuery Ajax动态加载Table数据的实例讲解

    我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. <select id="type" name="type" onchange="reloadTable(this)"></select> <table id="import-table" class="table table-striped table-bordered table

  • 异步加载JS、CSS代码（推荐）

    我的风格你懂得,具体详情介绍如下 关键代码如下所示: function AsyncLoad(V_tag,V_src) { if (V_tag == "script") { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = V_src; var x = document.getElementsByTagName('script')[0]; x.pare

随机推荐