javascript浏览模式: 标准 | 列表

运用JQuery框架实现的局部更新

Posted by 欧阳振华 on 2008-8-6 16:26:08

    今天下午没事就在家里看了看JQuery的AJAX,学JQuery最主要的就是想用用她的AJAX,所以在看完相关的知识点以后,就写了个实例,没想到一次就成功了,现挂出来作个笔记.

    Default.aspx文件:

  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml" > 
  7. <head runat="server"> 
  8.     <title>Ajax 留言板</title> 
  9.     <script type="text/javascript" src="jquery-1.2.6.pack.js"></script> 
  10.     <script type="text/javascript"> 
  11.         $(document).ready(function(){  
  12.                GetAllMsg();           
  13.         });    
  14.         function GetAllMsg(){  
  15.             $("#AllMsg").html("&nbsp;&nbsp;<img src='images/loading.gif'/>");  
  16.             $.ajax({  
  17.                 type:"POST",  
  18.                 url:"ajaxAllMsg.aspx?act=getAll",  
  19.                 dataType:"html",  
  20.                 data:"",  
  21.                 success:function(result)  
  22.                 {  
  23.                     $("#AllMsg").html(result);  
  24.                 }  
  25.             });  
  26.         }  
  27.     </script> 
  28. </head> 
  29. <body> 
  30.  <form id="form1" runat="server"> 
  31.                               
  32.         <div id="AllMsg">             
  33.         </div>                
  34. </form>       
  35.  
  36. </body> 
  37. </html> 

Read the rest of this article »
javascript| Comments:0 | Viewvers:221

用上JQuery的登陆例子

Posted by 欧阳振华 on 2008-8-5 17:42:23

     今天刚接触JQuery,做了一个小小的实例,效果还是出来了,等有机会了把现在用的prototype框架换成jquery框架.

    jquery.aspx文件:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="jquery.aspx.cs" Inherits="jquery" %> 
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml" > 
  7. <head runat="server"> 
  8.     <title>无标题页</title> 
  9.      <script type="text/javascript" src="JavaScript/jquery-1.2.6.pack.js" ></script> 
  10.        <script type="text/javascript" src="JavaScript/postmethod.js" ></script> 
  11. </head> 
  12. <body> 
  13.     <form id="form1" runat="server"> 
  14.     <div> 
  15.       <input name="writer" id="writer" type="text" value="" />   
  16.         <input name="pass" id="pass" type="password" value="" />   
  17.         <input type="submit" name="button" id="button" value="提交"  />    
  18.       </div> 
  19.       <div id="login_confirm" > </div>   
  20.  
  21.     </form> 
  22. </body> 
  23. </html> 

Read the rest of this article »
javascript| Comments:0 | Viewvers:428

jquery简介

Posted by 欧阳振华 on 2008-7-27 17:40:15

    Ajax，2007年至今还是最火的一个词。最近我也在学习ajax技术，更准确的是想用一个比较省事的方法学习学习。可是就在这个节骨眼上我犹豫了，不知道如何选择ajax框架（库）。对于目前ajax资源的如此丰富，纯JavaScript的有Prototype/jQuery/Mootools，基于asp.netr的ajax框架有MS的东东。但MS的东东几乎都是控件,所以用起来感觉怪怪的,至少是没有成就感,玩笑了.其它用MS的AJAX框架最主要的就是调节不方面.最后,问了很多人,最后获知还是纯Javascript的比较好，说的最多的就是Prototype和jQuery.Prototype我之前接触过.由于自己的风格问题,我现在打算转向jquery了.在百度词条里搜到了jquery简介,现转过来备不时之需.

jquery

    jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的J&ouml;rn Zaefferer，罗马尼亚的Stefan Petre等等。
jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
Jquery是继prototype之后又一个优秀的Javascrīpt框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像ruby.实际上我比较喜欢java（少接触Ruby 罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。


Read the rest of this article »
javascript| Comments:0 | Viewvers:169

五月份暂停博客的开发,安心看书准备考试.

Posted by 欧阳振华 on 2008-5-12 13:04:05

     近段时间一直在优化和完善这个博客系统,所以功课有点点落下了,今天已经是五月12号了,电子商务设计师考试马上快到了所以现在要放下手头的其它工作专心看书做题.昨天一天都在拼命的解决博客中已发现的问题,最主要的就是解决了在留言和评论提交时因网速慢导致写留言或写评论的人重复提交的问题.尽管现在博客还有很多不如意的地方,现在也只能暂时的停止开发了.待到六月初的时候再来完善它.现我将防重复提交的思路和方法写出来:

实现的方法很普通,思路是当点击提交按钮以后,把按钮禁用.等到后台返回提交结果的时候再启用按钮.部分代码如下:


Read the rest of this article »
javascript| Comments:0 | Viewvers:290

人性化设计体现在细节上面——文章的自动保存

Posted by 欧阳振华 on 2008-5-11 11:33:33

    今天在看博易博客的源代码的时候,发现了一个我这博客还未曾考虑的功能——自动保存文章.我想很多朋友都会有一个体会就是通过 WEB 写文章的时候会出现误操作或是其它的一些突发事件而丢失辛辛苦苦写的内容，我自己也曾有过这种不幸,所以开发一个跟 Word 一样每隔几分钟自动保存一次输入内容的功能就十分有必要了！在自动保存方面,我印象最深的就是在163的邮箱里写邮件时每隔一段时间就保存一次.让我在写邮件的时间再也不用当心因某种突发原因而丢失内容/怎么实现像163邮箱一样的功能呢?我想,博易里的代码应该能给我们一些提示:

  1. <% if (Request.QueryString["id"] == null){ %>    
  2.   <script type="text/javascript"> 
  3.     setTimeout("AutoSave()", 5000);  
  4.   script> 
  5. <%} %> 

Read the rest of this article »
javascript| Comments:1 | Viewvers:287