惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

F
Full Disclosure
V
Vulnerabilities – Threatpost
Attack and Defense Labs
Attack and Defense Labs
N
News and Events Feed by Topic
SecWiki News
SecWiki News
S
Security @ Cisco Blogs
Schneier on Security
Schneier on Security
B
Blog
TaoSecurity Blog
TaoSecurity Blog
The Last Watchdog
The Last Watchdog
H
Hacker News: Front Page
Hacker News - Newest:
Hacker News - Newest: "LLM"
博客园_首页
D
Docker
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Y
Y Combinator Blog
W
WeLiveSecurity
N
News and Events Feed by Topic
F
Fortinet All Blogs
PCI Perspectives
PCI Perspectives
WordPress大学
WordPress大学
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Recent Announcements
Recent Announcements
Forbes - Security
Forbes - Security
T
Tailwind CSS Blog
Hacker News: Ask HN
Hacker News: Ask HN
爱范儿
爱范儿
腾讯CDC
Last Week in AI
Last Week in AI
月光博客
月光博客
C
Cybersecurity and Infrastructure Security Agency CISA
P
Proofpoint News Feed
Help Net Security
Help Net Security
V
V2EX
C
Cyber Attacks, Cyber Crime and Cyber Security
C
CXSECURITY Database RSS Feed - CXSecurity.com
H
Heimdal Security Blog
L
LINUX DO - 最新话题
GbyAI
GbyAI
The Hacker News
The Hacker News
罗磊的独立博客
S
SegmentFault 最新的问题
H
Hackread – Cybersecurity News, Data Breaches, AI and More
博客园 - 【当耐特】
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
V2EX - 技术
V2EX - 技术
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
O
OpenAI News
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻

博客园 - symjie

每天学一点AS3.0(五)---声音的控制(5) 每天学一点AS3.0(四)---声音的控制(4) 每天学一点AS3.0(三)---声音的控制(3) 每天学一点AS3.0(二)---声音的控制(2) 每天学一点AS3.0(一)---声音的控制 Jquery json的超强组合 - symjie - 博客园 javascript分页程序 - symjie - 博客园 delegate——委派 - symjie - 博客园 sql 分页 Ajax.net和GridView交互 Ajax.net实现loading登陆的效果 - symjie - 博客园 Ajax.net+模态窗口的登陆简单例子 GridView自定义分页(vb) - symjie - 博客园 用下拉列表控制gridview的分页 DataView数据组件 (转) c#冒泡程序 Atlas学习笔记 getElementByTagsName和相关函数的学习 基于Ajax.net的验证
初试jquery制作一个简单的loading
symjie · 2007-09-22 · via 博客园 - symjie

很多人都为javascript而感到困惑,写个效果太复杂了,有了jquery后,我们就能够很简单的写一些很漂亮的效果。而这次我要说的不是这个,是jquery对ajax的支持,下面先简单说一下jquery对ajax的一些函数
通用方式:
$.ajax(prop)     通过一个ajax请求,回去远程数据,prop是一个hash表,它可以传递的key/value有以下几种
          (String)type:数据传递方式(get或post)。
          ((String)url:数据请求页面的url
          ((String)data:传递数据的参数字符串,只适合post方式
          ((String)dataType:期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")
          ((Boolean)ifModified: 当最后一次请求的相应有变化是才成功返回,默认值是false
          ((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout
          ((Boolean)global:是否为当前请求触发ajax全局事件,默认为true
          ((Function)error:当请求失败时触发的函数。
          ((Function)success:当请求成功时触发函数
          ((Function)complete:当请求完成后出发函数

1$.ajax({url: "ajax.htm",
2           success:function(msg)
3                          $(div"#a").html(msg);
4                 }
 
5     }
);

将ajax.htm返回的内容作为id为a的div内容

1$.ajax({ url: "ajax.aspx",
2               type:"get",           
3              dataType:"html",
4              data: "name=John&location=Boston",
5              success:function(msg)
6                                  $("#a").html(msg);
7                               }
 
8          }
);

用get方式向ajax.aspx页面传参数,并将返回内容负给id为a的对象。
$.ajaxTimeout(time) 设置请求结束时间
    $.ajaxTimeout( 5000 )

其它简化方式:

$.get(url, params, callback)   用get方式向远程页面传递参数,请求完成后处理函数,除了url外,其它参数任意选择

$.get( "ajax.htm" , function(data){ $("#a").html(data)   })

$.get(   "ajax.asp",
             { name:
"young", age: "25"
},
             function(data){ alert("Data Loaded: " +
data); }
         )

$.getIfModified(url, params, callback)   用get方式向远程页面传递参数,从最后一次请求后如果数据有变化才作出响应,执行函数callback
$.getJSON(url, params, callback)   用get方式向远程json对象传递参数,请求完成后处理函数callback。
$.getScript(url, callback)   用get方式载入并运行一个远程javascript文件。请求完成后处理函数callback。
$.post(url, params, callback)   用post方式向远程页面传递参数,请求完成后处理函数callback
load(url, params, callback)   载入一个远程文件并载入页面DOM中,并执行函数callback

$("#a").load("ajax.htm", function() { alert("load is done"); } );

向ajax.htm页面发出请求,将返回结果装入id为a的内容中,然后再执行函数callback。
loadIfModified(url, params, callback)   用get方式向远程页面传递参数,从最后一次请求后如果数据有变化才作出响应,将返回结果载入页面DOM中,并执行函数callback
ajaxStart(callback) 当ajax请求发生错误是时执行函数callback
ajaxComplete(callback)   当ajax请求完成时执行函数callback
ajaxError(callback)   当ajax请求发生错误时执行函数callback
ajaxStop(callback)   当ajax请求停止时执行函数callback
ajaxSuccess(callback)   当ajax请求成功时执行函数callback

下面就把我的简单的loading写一下
建立一个html页面

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml" >
 3<head>
 4    <title>Untitled Page</title>
 5     <script src="../jquery.js"></script>
 6    <script language=javascript>
 7    $(document).ready(
 8                       function()
 9                       {
10                          $("#ajbt").click(
11                                                function()
12                                                {
13                                                  $("#loadimg").ajaxStart(
14                                                             function()
15                                                             {
16                                                              $("#loadimg").css("display","block");
17                                                             }

18                                                  );
19                                                
20                                                // $.ajaxTimeout( 500000000 );
21                                                  $.ajax(
22                                                  {
23                                                    type: "get",
24                                                    url: "Default2.aspx",
25                                                    datatype:"text",
26                                                    data: "name=John",
27                                                    complete:function()                                                    
28                                                    {
29                                                    $("#loadimg").css("display","none");
30                                                    }
,
31                                                   success: function(msg)
32                                                                           
33                                                                         
34                                                                          $("#a").html(msg); 
35                                                                          }
 
36                                                  }

37                                                  );
38                                                }

39                          );
40                          $("#loadimg").css("display","none");
41                       }

42    );
43    
44    
</script>
45</head>
46<body>
47<input type=button value="ajaxdata" id="ajbt"/>
48<div id="a"><img src=2.gif id="loadimg" ></div>
49</body>
50</html>
51


下面是default.aspx页面的代码

 1 protected void Page_Load(object sender, EventArgs e)
 2    {
 3       System.Threading.Thread.Sleep(3000);
 4        if (!this.IsPostBack)
 5        {
 6            if (Request["name"].ToString() != "")
 7            {
 8                httpresponse(Request["name"].ToString());
 9            }

10            else
11            {
12                httpresponse(Request["name"].ToString());
13            }

14        }

15    }

16    public void httpresponse(string name)
17    {
18        //HttpContext.Current.Response;
19       HttpContext.Current.Response.Write(name);
20    }

21    


这样效果就出来了,感觉非常不错的jquery,继续关注jquery