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

推荐订阅源

小众软件
小众软件
N
News and Events Feed by Topic
A
About on SuperTechFans
aimingoo的专栏
aimingoo的专栏
The Cloudflare Blog
H
Heimdal Security Blog
Schneier on Security
Schneier on Security
Engineering at Meta
Engineering at Meta
Google Online Security Blog
Google Online Security Blog
宝玉的分享
宝玉的分享
AI
AI
The GitHub Blog
The GitHub Blog
MongoDB | Blog
MongoDB | Blog
www.infosecurity-magazine.com
www.infosecurity-magazine.com
The Last Watchdog
The Last Watchdog
T
Troy Hunt's Blog
S
Security @ Cisco Blogs
H
Hacker News: Front Page
F
Fortinet All Blogs
博客园_首页
S
Secure Thoughts
N
News and Events Feed by Topic
P
Proofpoint News Feed
Microsoft Azure Blog
Microsoft Azure Blog
I
InfoQ
Spread Privacy
Spread Privacy
Hacker News - Newest:
Hacker News - Newest: "LLM"
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
C
Check Point Blog
Hugging Face - Blog
Hugging Face - Blog
Hacker News: Ask HN
Hacker News: Ask HN
C
CXSECURITY Database RSS Feed - CXSecurity.com
酷 壳 – CoolShell
酷 壳 – CoolShell
Stack Overflow Blog
Stack Overflow Blog
L
LINUX DO - 最新话题
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
S
Schneier on Security
Know Your Adversary
Know Your Adversary
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Scott Helme
Scott Helme
P
Privacy & Cybersecurity Law Blog
S
Securelist
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
O
OpenAI News
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
PCI Perspectives
PCI Perspectives
L
LangChain Blog
雷峰网
雷峰网
Security Archives - TechRepublic
Security Archives - TechRepublic
V2EX - 技术
V2EX - 技术

博客园 - 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