<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Lisong&#039;s Blog &#187; Javascript</title>
	<atom:link href="http://www.imwls.com/tag/javascript/feed?" rel="self" type="application/rss+xml" />
	<link>http://www.imwls.com</link>
	<description>stay away from the programming</description>
	<lastBuildDate>Tue, 08 Nov 2011 01:09:47 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>关于JavaScript/jQuery事件冒泡</title>
		<link>http://www.imwls.com/about-javascript-jquery-event-propagation</link>
		<comments>http://www.imwls.com/about-javascript-jquery-event-propagation#comments</comments>
		<pubDate>Sun, 13 Jun 2010 12:30:11 +0000</pubDate>
		<dc:creator>木公</dc:creator>
				<category><![CDATA[Learning]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.imwls.com/about-javascript-jquery-event-propagation/</guid>
		<description><![CDATA[JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

目标元素: 任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。

<span class="readmore"><a href="http://www.imwls.com/about-javascript-jquery-event-propagation" title="关于JavaScript/jQuery事件冒泡">阅读全文——共2603字</a></span><table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Javascript中===与==区别" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal&from=http%3A%2F%2Fwww.imwls.com%2Fabout-javascript-jquery-event-propagation">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617345.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Javascript中===与==区别</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="使用jQuery进行MD5加密" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjquery-md5&from=http%3A%2F%2Fwww.imwls.com%2Fabout-javascript-jquery-event-propagation">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617342.png" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">使用jQuery进行MD5加密</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="jQuery CheckBox全选" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjquery-checkbox-checkall-checknone&from=http%3A%2F%2Fwww.imwls.com%2Fabout-javascript-jquery-event-propagation">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617319.png" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jQuery CheckBox全选</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="为jQuery Validator插件增加日期比较" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjquery-validator-date-compare-function&from=http%3A%2F%2Fwww.imwls.com%2Fabout-javascript-jquery-event-propagation">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617342.png" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">为jQuery Validator插件增加日期比较</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="最全的jQuery表格插件" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fthe-most-jquery-table-plugins&from=http%3A%2F%2Fwww.imwls.com%2Fabout-javascript-jquery-event-propagation">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2011/05/06/7738696.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">最全的jQuery表格插件</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。</p>
<p>事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。</p>
<p><span id="more-1363"></span>目标元素: 任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。</p>
<p><strong>事件的冒泡和捕获</strong></p>
<p>捕获是从上级元素到下级元素，冒泡是从下级元素到上级元素.</p>
<p>在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()。attachEvent()用来给一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。Eg.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> fnClick <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>“Clicked<span style="color: #339933;">!</span>”<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> oDiv <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span>“div1”<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
oDiv.<span style="color: #660066;">attachEvent</span><span style="color: #009900;">&#40;</span>“onclick”<span style="color: #339933;">,</span> fnClick<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
oDiv.<span style="color: #660066;">detachEvent</span><span style="color: #009900;">&#40;</span>“onclick”<span style="color: #339933;">,</span> fnClick<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p><strong>事件的冒泡有什么好处呢？</strong></p>
<p>想象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理的话，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。</p>
<p>代码很简单，我们所要关心的只是如何检测目标元素而已。比方说我们有一个 table元素，ID是“report”，我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断出传到table 来的事件的目标元素。考虑到我们要写的几个函数中都有可能用到这一功能，所以我们把它单独放到一个名为getEventTarget的函数中：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> getEventTarget<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   e <span style="color: #339933;">=</span> e <span style="color: #339933;">||</span> window.<span style="color: #660066;">event</span><span style="color: #339933;">;</span>
   <span style="color: #000066; font-weight: bold;">return</span> e.<span style="color: #660066;">target</span> <span style="color: #339933;">||</span> e.<span style="color: #660066;">srcElement</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>e这个变量表示的是一个事件对象，我们只需要写一点点跨浏览器的代码来返回目标元素，在IE里目标元素放在srcElemtn属性或event.toElement属性中，而在其它浏览器里则是target或event.relatedTarget属性。</p>
<p>接下来就是editCell函数了，这个函数调用到了 getEventTarget函数。一旦我们得到了目标元素之后，剩下的事情就是看看它是否是我们所需要的那个元素了。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> editCell<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #003366; font-weight: bold;">var</span> target <span style="color: #339933;">=</span> getEventTarget<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>target.<span style="color: #660066;">tagName</span>.<span style="color: #660066;">toLowerCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">'td'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     <span style="color: #006600; font-style: italic;">// DO SOMETHING WITH THE CELL</span>
   <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>在editCell函数中，我们通过检查目标元素标签名称的方法来确定它是否是一个表格的单元格。这种检查也许过于简单了点；如果它是这个目标元素单元格里的另一个元素呢？我们需要为代码做一点小小的修改以便于其找出父级的td 元素。如果说有些单元格不需要被编辑怎么办呢？此种情况下我们可以为那些不可编辑的单元格添加一个指定的样式名称，然后在把单元格变成可编辑状态之前先检查它是否不包含那个样式名称。选择总是多样化的，你只需找到适合你应用程序的那一种。</p>
<p><strong>事件冒泡的优点和缺点:</strong></p>
<p>1.那些需要创建的以及驻留在内存中的事件处理器少了。</p>
<p>这是很重要的一点，这样我们就提高了性能，并降低了崩溃的风险。</p>
<p>2.在DOM更新后无须重新绑定事件处理器了。</p>
<p>如果你的页面是动态生成的，比如说通过Ajax，你不再需要在元素被载入或者卸载的时候来添加或者删除事件处理器了。</p>
<p>潜在的问题也许并不那么明显，但是一旦你注意到这些问题，你就可以轻松地避免它们：你的事件管理代码有成为性能瓶颈的风险，所以尽量使它能够短小精悍。</p>
<p><strong>不是所有的事件都能冒泡</strong></p>
<p>blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）。</p>
<p><strong>需要注意的是:</strong></p>
<p>如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。</p>
<p><strong>如何避免事件冒泡:</strong></p>
<p><strong>1.方法</strong></p>
<p><a href="http://www.imwls.com/wp-content/uploads/2010/06/Untitled1.png" target="_blank"><img style="display: inline; border: 0px;" title="Untitled" src="http://www.imwls.com/wp-content/uploads/2010/06/Untitled_thumb.png" border="0" alt="Untitled" width="644" height="453" /></a></p>
<p>2.方法</p>
<p>在IE下解决问题很简单，用onMouseEnter、 onMouseLeave来代替onMouseOver、onMouseOut就行了，他们的作用基本相同，前者不会发生冒泡。但是 firefox下没有这两个事件.</p>
<p>3.方法:</p>
<p>window.event.cancelBubble = true (IE)   event.stopPropagation()  event.preventDefault() (Firefox)</p>
<p><strong>阻止jQuery事件冒泡</strong></p>
<p>jQuery对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码，但有时候我们又不希望事件冒泡。这个时候就要阻止 jQuery.Event冒泡。</p>
<p>在<a href="http://docs.jquery.com/Events/jQuery.Event">jQuery.Event的文档</a>中的开头得知，jQuery.Event对象是符合W3C标准的一个事件对象，同时jQuery.Event免去了检查兼容IE的步骤。</p>
<p>jQuery.Event提供了一个非常简单的方法来阻止事件冒泡：<strong>event.stopPropagation();</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;p&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
     event.<span style="color: #660066;">stopPropagation</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
     <span style="color: #006600; font-style: italic;">// do something</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></div></div>

<p>但是这个方法对使用<a href="http://docs.jquery.com/Events/live">live</a>绑定的事件没有作用，需要一个更简单的方法阻止事件冒泡：<strong>return false;</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">after</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Another paragraph!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Javascript中===与==区别" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal&from=http%3A%2F%2Fwww.imwls.com%2Fabout-javascript-jquery-event-propagation">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617345.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Javascript中===与==区别</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="使用jQuery进行MD5加密" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjquery-md5&from=http%3A%2F%2Fwww.imwls.com%2Fabout-javascript-jquery-event-propagation">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617342.png" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">使用jQuery进行MD5加密</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="jQuery CheckBox全选" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjquery-checkbox-checkall-checknone&from=http%3A%2F%2Fwww.imwls.com%2Fabout-javascript-jquery-event-propagation">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617319.png" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">jQuery CheckBox全选</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="为jQuery Validator插件增加日期比较" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjquery-validator-date-compare-function&from=http%3A%2F%2Fwww.imwls.com%2Fabout-javascript-jquery-event-propagation">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617342.png" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">为jQuery Validator插件增加日期比较</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="最全的jQuery表格插件" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fthe-most-jquery-table-plugins&from=http%3A%2F%2Fwww.imwls.com%2Fabout-javascript-jquery-event-propagation">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2011/05/06/7738696.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">最全的jQuery表格插件</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.imwls.com/about-javascript-jquery-event-propagation/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Javascript中===与==区别</title>
		<link>http://www.imwls.com/javascript-difference-equal</link>
		<comments>http://www.imwls.com/javascript-difference-equal#comments</comments>
		<pubDate>Sun, 25 Apr 2010 01:20:09 +0000</pubDate>
		<dc:creator>木公</dc:creator>
				<category><![CDATA[Learning]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.imwls.com/javascript-difference/</guid>
		<description><![CDATA[在 Javascript 中，可以使用 == 来比较两个数据是否相等，如果两个数据的类型不同，那么，将在进行转换后进行比较，转换的规则如下：

 



<span class="readmore"><a href="http://www.imwls.com/javascript-difference-equal" title="Javascript中===与==区别">阅读全文——共927字</a></span><table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="关于JavaScript/jQuery事件冒泡" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fabout-javascript-jquery-event-propagation&from=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2011/08/23/16499891.png" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">关于JavaScript/jQuery事件冒泡</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Asp.net动态加载用户自定义控件,并转换成HTML代码" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html&from=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617308.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Asp.net动态加载用户自定义控件,并转换成HTML代码</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JSON in .NET" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet&from=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617394.gif" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JSON in .NET</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="8个你未见过的HTＭL5动画效果" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2F8-simply-amazing-html5-canvas-and-javascript-animations&from=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617312.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">8个你未见过的HTＭL5动画效果</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="爆发" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2F%25E7%2588%2586%25E5%258F%2591&from=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617542.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">爆发</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>在 Javascript 中，可以使用 == 来比较两个数据是否相等，如果两个数据的类型不同，那么，将在进行转换后进行比较，转换的规则如下：</p>
<p> <span id="more-1292"></span>
<ol>
<li>如果其中一个操作数的类型为 Boolean ，那么，首先将它转换为数字类型，false 转换为 0, true 将转换为 1。</li>
<li>如果其中一个操作数的类型是字符串，另外一个为数字类型，那么，将字符串转换为数字进行比较。</li>
<li>如果其中一个操作数的类型是字符串，另外一个为 object 类型，那么，将调用对象的 toString 方法之后，比较字符串。</li>
<li>如果其中一个操作数的类型是数字类型，另外一个为 object 类型，那么，将对象转换为数值后进行数字比较。</li>
</ol>
<p>以下的规定了一些特殊的比较：</p>
<ol>
<li>null 和 undefined 是相等的。</li>
<li>null 和 undefined 不会转换为任何其他类型</li>
<li>如果任何一个操作的结果为 NaN，那么相等比较返回 false，不相等比较返回 true。注意，即使两个操作数都为 NaN，返回结果一样是 false，也就是说，NaN 不等于 NaN。</li>
<li>如果两个操作数都是对象，那么比较它们引用的值，如果引用同一个对象，那么，返回真，否则，返回假。</li>
</ol>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span> <span style="color: #339933;">==</span> undefined<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>   <span style="color: #006600; font-style: italic;">// true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>undefined <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>   <span style="color: #006600; font-style: italic;">// true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">true</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>   <span style="color: #006600; font-style: italic;">// true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">false</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  <span style="color: #006600; font-style: italic;">// true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">true</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>   <span style="color: #006600; font-style: italic;">// false</span>
<span style="color: #003366; font-weight: bold;">var</span> obj <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">10</span> <span style="color: #339933;">==</span> obj<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>   <span style="color: #006600; font-style: italic;">// false</span></pre></div></div>

<p>完全相同的比较 === 和不完全相等 !==</p>
<p>完全相同的比较用来比较不进行转换是否相等，例如：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;100&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> b <span style="color: #339933;">=</span> <span style="color: #CC0000;">100</span><span style="color: #339933;">;</span> 
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>a <span style="color: #339933;">==</span> b<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>      <span style="color: #006600; font-style: italic;">// true</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>a <span style="color: #339933;">===</span> b<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>     <span style="color: #006600; font-style: italic;">// false</span></pre></div></div>

<p>== 比较将返回真，因为 “100” 首先转换为数字 100, 然后与数字 100 进行比较，结果相等。</p>
<p>=== 比较将返回假，因为字符串 ”100” 不经过转换的话，与数字 100 不相等。</p>
<p>!== 用于比较在不转换的情况下，是否不相等。</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>a <span style="color: #339933;">!=</span> b<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>      <span style="color: #006600; font-style: italic;">// false</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>a <span style="color: #339933;">!==</span> b<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>     <span style="color: #006600; font-style: italic;">// true</span></pre></div></div>

<p>第一种情况将返回假，因为转换后是相等的。第二种情况将返回真，因为不经过转换的话，他们一个是字符串，一个是数字，是不相等的。</p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="关于JavaScript/jQuery事件冒泡" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fabout-javascript-jquery-event-propagation&from=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2011/08/23/16499891.png" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">关于JavaScript/jQuery事件冒泡</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Asp.net动态加载用户自定义控件,并转换成HTML代码" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html&from=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617308.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Asp.net动态加载用户自定义控件,并转换成HTML代码</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JSON in .NET" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet&from=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617394.gif" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JSON in .NET</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="8个你未见过的HTＭL5动画效果" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2F8-simply-amazing-html5-canvas-and-javascript-animations&from=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617312.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">8个你未见过的HTＭL5动画效果</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="今天已挂（¯﹃¯）" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Ftoday-die&from=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617386.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">今天已挂（¯﹃¯）</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.imwls.com/javascript-difference-equal/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>JSON in .NET</title>
		<link>http://www.imwls.com/json-in-dotnet</link>
		<comments>http://www.imwls.com/json-in-dotnet#comments</comments>
		<pubDate>Tue, 23 Mar 2010 23:40:38 +0000</pubDate>
		<dc:creator>木公</dc:creator>
				<category><![CDATA[Learning]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Asp.NET]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JSON]]></category>

		<guid isPermaLink="false">http://www.imwls.com/?p=1259</guid>
		<description><![CDATA[JSON简介

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它易于编程人员阅读和编写，同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

<span class="readmore"><a href="http://www.imwls.com/json-in-dotnet" title="JSON in .NET">阅读全文——共6569字</a></span><table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Asp.net动态加载用户自定义控件,并转换成HTML代码" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html&from=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617308.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Asp.net动态加载用户自定义控件,并转换成HTML代码</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="ASP.NET(C#)生成柱状图和饼图" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-csharp-histogram-pie&from=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617352.gif" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">ASP.NET(C#)生成柱状图和饼图</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="在ASP.NET中使用Windows身份验证" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-using-windows-authentication&from=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617310.png" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">在ASP.NET中使用Windows身份验证</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="ASP.NET提供哪些身份验证方式？" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-authenticaton-overview&from=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617308.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">ASP.NET提供哪些身份验证方式？</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Javascript中===与==区别" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal&from=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617345.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Javascript中===与==区别</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<h3>JSON简介</h3>
<p>JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它易于编程人员阅读和编写，同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。<br />
<span id="more-1259"></span></p>
<h3>客户端</h3>
<h4>使用JSON方式创建对象</h4>
<h5>Object方式</h5>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> Person<span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #339933;">,</span> age<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
     <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066;">Name</span> <span style="color: #339933;">=</span> <span style="color: #000066;">name</span><span style="color: #339933;">;</span>
     <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">Age</span> <span style="color: #339933;">=</span> age<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">var</span> p <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Person<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Sunny D.D&quot;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">25</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>alert(p.Name) //输出Sunny D.D<br />
alert(p.Age) //输出25<br />
使用上述代码创建对象，需要先写出对象的类，使用new关键字来创建对象。下面将介绍JSON创建对象的方式，它更像C#中的匿名类。</p>
<h5>JSON方式</h5>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> json <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;Name&quot;</span><span style="color: #339933;">:</span><span style="color: #3366CC;">&quot;Sunny D.D&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Age&quot;</span><span style="color: #339933;">:</span><span style="color: #CC0000;">25</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>alert(p.Name) //输出Sunny D.D<br />
alert(p.Age) //输出25<br />
可以看出，上述两种方式创建的对象实际上是一样的，但使用JSON方式创建对象更简便，非常适合创建一个临时的用来存储数据的对象。使用JSON方式创建的对象是不是与c#的匿名对象很相似呢？<br />
为什么说使用JSON方式创建的对象与c#的匿名对象很相似，而不是相同呢？因为在C#中，匿名对象是不能传递的，也就是说不能通过参数的形式传递给另一个方法进行处理。但根据JavaScript语言的特点，对于Object对象没有严格的类型限制，这样就可以进行方便的传递了：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> showName<span style="color: #009900;">&#40;</span>person<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
     <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>person.<span style="color: #000066;">Name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>showName(json) //输出Sunny D.D</p>
<h4>获取JSON对象的字符串表示</h4>
<p>使用json.js可以方便的将对象转换为JSON的字符串形式。<a href="http://www.json.org/json.js" target="_blank">下载地址</a><br />
在 json.js文件的最下面，可以看到这样一段代码：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>Object.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">toJSONString</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    Object.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">toJSONString</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>filter<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> JSON.<span style="color: #660066;">stringify</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> filter<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
    Object.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">parseJSON</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>filter<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> JSON.<span style="color: #660066;">parse</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> filter<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>可以看到，它将判断对象类型是否有toJSONString这样一个方法，如果没有，将会为对象加入toJSONString方法与parseJSON这两个方法。<br />
引入了这个js文件后，就可以简单地调用toJSONString方法来获取对象的JSON字符串形式：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> jsonStr <span style="color: #339933;">=</span> p.<span style="color: #660066;">toJSONString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>输出jsonStr，可以获得字符串<span style="color: red;">"{"Name":"Sunny D.D","Age":25}"</span>。</p>
<h4>将字符串转换为JSON对象</h4>
<p>在引入了json.js后，可以简单地调用JSON.parse(text)，或者text.parseJSON()来将字符串转换为对象，<span style="color: red;"><strong>但是需要注意的是，在一个string对象上调用parseJSON()时，会报一个错误“illegal access”</strong></span>，这是因为在代码“return JSON.parse(this, filter);”处，this的类型是一个Object，这可能是一个bug，稍加改动即可通过：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>Object.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">toJSONString</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    Object.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">toJSONString</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>filter<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> JSON.<span style="color: #660066;">stringify</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> filter<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
    Object.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">parseJSON</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>filter<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> JSON.<span style="color: #660066;">parse</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">,</span> filter<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>这样就可以确保传递给JSON.parse方法的第一个参数是string类型的对象。</p>
<h3>服务器端</h3>
<h4>LINQ to JSON</h4>
<p>获取LINQ to JSON的开源资源，可以访问<a href="http://json.codeplex.com/" target="_blank">http://json.codeplex.com/</a>。<br />
如果仅使用，可以下载Newtonsoft.Json.dll。<br />
在项目中引用Newtonsoft.Json.dll就可以获得LINQ to JSON的能力了。在下面的示例中，我使用到了Northwind数据库，使用LINQ to SQL方式读取所有产品类别数据，创建一个JObject对象：</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008000;">&#40;</span>NorthwindDataContext  db <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> NorthwindDataContext<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span>
<span style="color: #008000;">&#123;</span>
        JObject json <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> JObject<span style="color: #008000;">&#40;</span> <span style="color: #008080; font-style: italic;">//创建JSON对象</span>
        db<span style="color: #008000;">.</span><span style="color: #0000FF;">Categories</span><span style="color: #008000;">.</span><span style="color: #0600FF; font-weight: bold;">Select</span><span style="color: #008000;">&#40;</span>
            c <span style="color: #008000;">=&gt;</span>
            <span style="color: #008000;">new</span> JProperty<span style="color: #008000;">&#40;</span> <span style="color: #008080; font-style: italic;">//创建JSON属性</span>
                c<span style="color: #008000;">.</span><span style="color: #0000FF;">CategoryName</span>, <span style="color: #008080; font-style: italic;">//属性名称（在这里是产品类别名称）</span>
                <span style="color: #008000;">new</span> JArray<span style="color: #008000;">&#40;</span> <span style="color: #008080; font-style: italic;">//属性的值（在这里是该类别下的所有产品名称）</span>
                    c<span style="color: #008000;">.</span><span style="color: #0000FF;">Products</span><span style="color: #008000;">.</span><span style="color: #0600FF; font-weight: bold;">Select</span><span style="color: #008000;">&#40;</span>
                        p <span style="color: #008000;">=&gt;</span>
                        p<span style="color: #008000;">.</span><span style="color: #0000FF;">ProductName</span>
                    <span style="color: #008000;">&#41;</span>
                <span style="color: #008000;">&#41;</span>
            <span style="color: #008000;">&#41;</span>
        <span style="color: #008000;">&#41;</span>
    <span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    ltrJson<span style="color: #008000;">.</span><span style="color: #0000FF;">Text</span> <span style="color: #008000;">=</span> json<span style="color: #008000;">.</span><span style="color: #0000FF;">ToString</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span></pre></div></div>

<p>上述代码生成的数据结构如下：</p>
<blockquote><p>“类别名称” : [“产品名称”, “产品名称”, “产品名称”,…]<br />
, “类别名称” : [“产品名称”, “产品名称”, “产品名称”,…]<br />
,……</p></blockquote>
<p>在前台页面获取ltrJson.Text，然后调用JSON.parse(ltrJson.Text)，就可以获取到生成的对象了。<br />
可以看出，LINQ to JSON提供程序支持我们以习惯的LINQ方式读取、创建对象，简化了开发过程，让我们的注意力可以集中在业务流程上。<br />
下面简单地介绍LINQ to JSON中常用的几个类。</p>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="158" valign="top"><strong>LINQ to JSON</strong></td>
<td width="295" valign="top"><strong>JavaScript</strong></td>
<td width="204" valign="top"><strong>描述</strong></td>
</tr>
<tr>
<td width="158" valign="top">JObject</td>
<td width="295" valign="top">Object</td>
<td width="204" valign="top">对象</td>
</tr>
<tr>
<td width="158" valign="top">JProperty</td>
<td width="295" valign="top">string</td>
<td width="204" valign="top">属性名</td>
</tr>
<tr>
<td width="158" valign="top">JArray</td>
<td width="295" valign="top">Array</td>
<td width="204" valign="top">数组</td>
</tr>
<tr>
<td width="158" valign="top">JValue</td>
<td width="295" valign="top">string,number,object,array,true,false,null</td>
<td width="204" valign="top">属性的值</td>
</tr>
</tbody>
</table>
<p>使用LINQ to JSON创建的对象，都可以简单地调用ToString方法来获取JSON字符串。此方法有两个重载形式，第一个是无参形式，可以按照默认格式获取JSON字符串；也可以调用有参格式，使用自定义格式来生成JSON字符串。</p>
<h4>将字符串转换为JObject对象</h4>
<p>在后台程序中可以通过JObject的静态方法Parse将字符串转换为一个JObject对象：</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;">JObject o <span style="color: #008000;">=</span> JObject<span style="color: #008000;">.</span><span style="color: #0000FF;">Parse</span><span style="color: #008000;">&#40;</span>json<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span></pre></div></div>

<p>转换成功后，就可以利用LINQ to JSON的特性来进行相关操作了。</p>
<h4>LINQ to JSON中的查询</h4>
<p>要使用LINQ to JSON进行查询，就必须要了解它的数据结构：<br />
<img alt="" src="http://images.cnblogs.com/cnblogs_com/sunnycoder/WindowsLiveWriter/JSONin.NET_DFFF/clip_image002_2.gif" title="linq to json" class="alignnone" width="640" height="402" /><br />
可以看出，其所有的类都派生于JToken，也就是说所有的LINQ to JSON对象都可以用JToken来表示，即JObject、JProperty还是JArray都可以利用李氏替换原则而用JToken来表示。认清这一点是非常必要的，因为接下来的示例中将多次用到他们之间的类型转换。</p>
<p>遍历一个JToken中所包含的元素，可以使用JTokenObj. Children方法，例如：</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008000;">&#40;</span>ProductDataContext db <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> ProductDataContext<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span>
<span style="color: #008000;">&#123;</span>
    JObject json <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> JObject<span style="color: #008000;">&#40;</span> <span style="color: #008080; font-style: italic;">//创建JSON对象</span>
        db<span style="color: #008000;">.</span><span style="color: #0000FF;">Categories</span><span style="color: #008000;">.</span><span style="color: #0600FF; font-weight: bold;">Select</span><span style="color: #008000;">&#40;</span>
            c <span style="color: #008000;">=&gt;</span>
            <span style="color: #008000;">new</span> JProperty<span style="color: #008000;">&#40;</span> <span style="color: #008080; font-style: italic;">//创建JSON属性</span>
                c<span style="color: #008000;">.</span><span style="color: #0000FF;">CategoryName</span>, <span style="color: #008080; font-style: italic;">//属性名称（在这里是产品类别名称）</span>
                <span style="color: #008000;">new</span> JArray<span style="color: #008000;">&#40;</span> <span style="color: #008080; font-style: italic;">//属性的值（在这里是该类别下的所有产品名称）</span>
                    c<span style="color: #008000;">.</span><span style="color: #0000FF;">Products</span><span style="color: #008000;">.</span><span style="color: #0600FF; font-weight: bold;">Select</span><span style="color: #008000;">&#40;</span>
                        p <span style="color: #008000;">=&gt;</span>
                        p<span style="color: #008000;">.</span><span style="color: #0000FF;">ProductName</span>
                    <span style="color: #008000;">&#41;</span>
                <span style="color: #008000;">&#41;</span>
            <span style="color: #008000;">&#41;</span>
        <span style="color: #008000;">&#41;</span>
    <span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
&nbsp;
    <span style="color: #0600FF; font-weight: bold;">foreach</span> <span style="color: #008000;">&#40;</span>JProperty i <span style="color: #0600FF; font-weight: bold;">in</span> json<span style="color: #008000;">.</span><span style="color: #0000FF;">Children</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span> <span style="color: #008080; font-style: italic;">//遍历JSON对象的所有属性</span>
    <span style="color: #008000;">&#123;</span>
        Console<span style="color: #008000;">.</span><span style="color: #0000FF;">WriteLine</span><span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;类别为{0}的产品列表&quot;</span>, i<span style="color: #008000;">.</span><span style="color: #0000FF;">Name</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span> <span style="color: #008080; font-style: italic;">//输出属性的名称</span>
        JArray arr <span style="color: #008000;">=</span> <span style="color: #008000;">&#40;</span>JArray<span style="color: #008000;">&#41;</span>i<span style="color: #008000;">.</span><span style="color: #0000FF;">Value</span><span style="color: #008000;">;</span> <span style="color: #008080; font-style: italic;">//获取属性的值（在这里是该类别下的所有产品名称）</span>
&nbsp;
        <span style="color: #0600FF; font-weight: bold;">foreach</span> <span style="color: #008000;">&#40;</span>JValue j <span style="color: #0600FF; font-weight: bold;">in</span> arr<span style="color: #008000;">&#41;</span> <span style="color: #008080; font-style: italic;">//遍历产品名称集合</span>
        <span style="color: #008000;">&#123;</span>
            Console<span style="color: #008000;">.</span><span style="color: #0000FF;">WriteLine</span><span style="color: #008000;">&#40;</span>j<span style="color: #008000;">.</span><span style="color: #0000FF;">Value</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span> <span style="color: #008080; font-style: italic;">//输出产品名称</span>
        <span style="color: #008000;">&#125;</span>
        Console<span style="color: #008000;">.</span><span style="color: #0000FF;">WriteLine</span><span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;-----------------------------------------------------&quot;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #008000;">&#125;</span></pre></div></div>

<p>上述示例运行后，将输出所有的产品类别，以及属于对应类别的所有产品信息。</p>
<p>既然讲LINQ to JSON，那么就可以在其所有的对象上使用LINQ to Object（标准查询操作符）的方式进行查询。在下面的示例中，演示了如何使用LINQ to Object（标准查询操作符）的方式对JSON对象进行查询：</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008000;">&#40;</span>ProductDataContext db <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> ProductDataContext<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span>
<span style="color: #008000;">&#123;</span>
    JObject json <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> JObject<span style="color: #008000;">&#40;</span> <span style="color: #008080; font-style: italic;">//创建JSON对象</span>
        db<span style="color: #008000;">.</span><span style="color: #0000FF;">Categories</span><span style="color: #008000;">.</span><span style="color: #0600FF; font-weight: bold;">Select</span><span style="color: #008000;">&#40;</span>
            c <span style="color: #008000;">=&gt;</span>
            <span style="color: #008000;">new</span> JProperty<span style="color: #008000;">&#40;</span> <span style="color: #008080; font-style: italic;">//创建JSON属性</span>
                c<span style="color: #008000;">.</span><span style="color: #0000FF;">CategoryName</span>, <span style="color: #008080; font-style: italic;">//属性名称（在这里是产品类别名称）</span>
                <span style="color: #008000;">new</span> JArray<span style="color: #008000;">&#40;</span> <span style="color: #008080; font-style: italic;">//属性的值（在这里是该类别下的所有产品名称）</span>
                    c<span style="color: #008000;">.</span><span style="color: #0000FF;">Products</span><span style="color: #008000;">.</span><span style="color: #0600FF; font-weight: bold;">Select</span><span style="color: #008000;">&#40;</span>
                        p <span style="color: #008000;">=&gt;</span>
                        p<span style="color: #008000;">.</span><span style="color: #0000FF;">ProductName</span>
                    <span style="color: #008000;">&#41;</span>
                <span style="color: #008000;">&#41;</span>
            <span style="color: #008000;">&#41;</span>
        <span style="color: #008000;">&#41;</span>
    <span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    var q <span style="color: #008000;">=</span>
        json<span style="color: #008000;">.</span><span style="color: #0000FF;">Children</span><span style="color: #008000;">&lt;</span>jproperty<span style="color: #008000;">&gt;</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span> <span style="color: #008080; font-style: italic;">//获取JSON对象的所有属性</span>
        <span style="color: #008000;">.</span><span style="color: #0600FF; font-weight: bold;">Where</span><span style="color: #008000;">&#40;</span>j <span style="color: #008000;">=&gt;</span> j<span style="color: #008000;">.</span><span style="color: #0000FF;">Name</span><span style="color: #008000;">.</span><span style="color: #0000FF;">StartsWith</span><span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;C&quot;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span> <span style="color: #008080; font-style: italic;">//结果只包含属性名称以&quot;C&quot;开头的</span>
        <span style="color: #008000;">.</span><span style="color: #0000FF;">OrderBy</span><span style="color: #008000;">&#40;</span>j <span style="color: #008000;">=&gt;</span> <span style="color: #008000;">&#40;</span><span style="color: #008000;">&#40;</span>JArray<span style="color: #008000;">&#41;</span>j<span style="color: #008000;">.</span><span style="color: #0000FF;">Value</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">.</span><span style="color: #0000FF;">Count</span><span style="color: #008000;">&#41;</span> <span style="color: #008080; font-style: italic;">//以属性的值中包含的元素个数排序</span>
        <span style="color: #008000;">.</span><span style="color: #0600FF; font-weight: bold;">Select</span><span style="color: #008000;">&#40;</span>j <span style="color: #008000;">=&gt;</span> j<span style="color: #008000;">.</span><span style="color: #0000FF;">Name</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span> <span style="color: #008080; font-style: italic;">//查询结果仅包含属性名称</span>
    <span style="color: #0600FF; font-weight: bold;">foreach</span> <span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">string</span> i <span style="color: #0600FF; font-weight: bold;">in</span> q<span style="color: #008000;">&#41;</span> <span style="color: #008080; font-style: italic;">//遍历并输出属性名称</span>
    <span style="color: #008000;">&#123;</span>
        Console<span style="color: #008000;">.</span><span style="color: #0000FF;">WriteLine</span><span style="color: #008000;">&#40;</span>i<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #008000;">&#125;</span>
<span style="color: #008000;">&#125;</span>
<span style="color: #008000;">&lt;/</span>jproperty<span style="color: #008000;">&gt;</span></pre></div></div>

<h4>LINQ to JSON与XmlDocument之间的转换</h4>
<p>使用LINQ to JSON，可以方便地在JSON对象与XmlDocument对象间进行转换。在以下两个示例中，演示了转换过程：</p>
<h5>将XmlDocument对象转换为JSON字符串</h5>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #6666cc; font-weight: bold;">string</span> xml <span style="color: #008000;">=</span> <span style="color: #666666;">@&quot;&lt; ?xml version=&quot;</span><span style="color: #666666;">&quot;1.0&quot;</span><span style="color: #666666;">&quot; standalone=&quot;</span><span style="color: #666666;">&quot;no&quot;</span><span style="color: #666666;">&quot;?&gt;
                &lt;root&gt;
                  &lt;person id=&quot;</span><span style="color: #666666;">&quot;1&quot;</span><span style="color: #666666;">&quot;&gt;
                  &lt;name&gt;Alan&lt;/name&gt;
                  &lt;url&gt;http://www.google.com&lt;/url&gt;
                  &lt;/person&gt;
                  &lt;person id=&quot;</span><span style="color: #666666;">&quot;2&quot;</span><span style="color: #666666;">&quot;&gt;
                  &lt;name&gt;Louis&lt;/name&gt;
                  &lt;url&gt;http://www.yahoo.com&lt;/url&gt;
                  &lt;/person&gt;
                &lt;/root&gt;&quot;</span><span style="color: #008000;">;</span>
XmlDocument xdoc <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> XmlDocument<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
xdoc<span style="color: #008000;">.</span><span style="color: #0000FF;">LoadXml</span><span style="color: #008000;">&#40;</span>xml<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
<span style="color: #6666cc; font-weight: bold;">string</span> jsonText <span style="color: #008000;">=</span> JsonConvert<span style="color: #008000;">.</span><span style="color: #0000FF;">SerializeXmlNode</span><span style="color: #008000;">&#40;</span>xdoc<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
Console<span style="color: #008000;">.</span><span style="color: #0000FF;">WriteLine</span><span style="color: #008000;">&#40;</span>jsonText<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span></pre></div></div>

<h5>将JSON字符串转换为XmlDocument对象</h5>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #6666cc; font-weight: bold;">string</span> json <span style="color: #008000;">=</span> <span style="color: #666666;">@&quot;{
              &quot;</span><span style="color: #666666;">&quot;?xml&quot;</span><span style="color: #666666;">&quot;: {
                &quot;</span><span style="color: #666666;">&quot;@version&quot;</span><span style="color: #666666;">&quot;: &quot;</span><span style="color: #666666;">&quot;1.0&quot;</span><span style="color: #666666;">&quot;,
                &quot;</span><span style="color: #666666;">&quot;@standalone&quot;</span><span style="color: #666666;">&quot;: &quot;</span><span style="color: #666666;">&quot;no&quot;</span><span style="color: #666666;">&quot;
              },
              &quot;</span><span style="color: #666666;">&quot;root&quot;</span><span style="color: #666666;">&quot;: {
                &quot;</span><span style="color: #666666;">&quot;person&quot;</span><span style="color: #666666;">&quot;: [
                  {
                    &quot;</span><span style="color: #666666;">&quot;@id&quot;</span><span style="color: #666666;">&quot;: &quot;</span><span style="color: #666666;">&quot;1&quot;</span><span style="color: #666666;">&quot;,
                    &quot;</span><span style="color: #666666;">&quot;name&quot;</span><span style="color: #666666;">&quot;: &quot;</span><span style="color: #666666;">&quot;Alan&quot;</span><span style="color: #666666;">&quot;,
                    &quot;</span><span style="color: #666666;">&quot;url&quot;</span><span style="color: #666666;">&quot;: &quot;</span><span style="color: #666666;">&quot;http://www.google.com&quot;</span><span style="color: #666666;">&quot;
                  },
                  {
                    &quot;</span><span style="color: #666666;">&quot;@id&quot;</span><span style="color: #666666;">&quot;: &quot;</span><span style="color: #666666;">&quot;2&quot;</span><span style="color: #666666;">&quot;,
                    &quot;</span><span style="color: #666666;">&quot;name&quot;</span><span style="color: #666666;">&quot;: &quot;</span><span style="color: #666666;">&quot;Louis&quot;</span><span style="color: #666666;">&quot;,
                    &quot;</span><span style="color: #666666;">&quot;url&quot;</span><span style="color: #666666;">&quot;: &quot;</span><span style="color: #666666;">&quot;http://www.yahoo.com&quot;</span><span style="color: #666666;">&quot;
                  }
                ]
              }
            }&quot;</span><span style="color: #008000;">;</span>
&nbsp;
XmlDocument doc <span style="color: #008000;">=</span> <span style="color: #008000;">&#40;</span>XmlDocument<span style="color: #008000;">&#41;</span>JsonConvert<span style="color: #008000;">.</span><span style="color: #0000FF;">DeserializeXmlNode</span><span style="color: #008000;">&#40;</span>json<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span></pre></div></div>

<h5>LINQ to JSON &#038; LINQ to XML</h5>
<p>在本文前面的讨论中，已经包含了JSON字符串、LINQ to JSON对象和XmlDocument之间的转换方法，那么LINQ to JSON与 LINQ to XML之间也是可以互相操作的。但是其具体操作方法及是否必要将在以后讨论，大家也可以进行试验。</p>
<h3>AJAX</h3>
<h4>使用AJAX获取JSON</h4>
<p>在实际应用中，常会使用Ajax从后台程序中获取数据，然后呈现在页面中。在本示例中为了简化操作，创建了一个“一般处理程序”（.ashx文件）作为后台数据的提供程序，然后在页面中使用Ajax访问它获取一个JSON对象，然后访问JSON对象的AllProducts属性：</p>
<h5>Command/GetProductsByCategoryIDHandler.ashx文件：</h5>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #008000;">&lt;</span> <span style="color: #008000;">%</span>@ WebHandler Language<span style="color: #008000;">=</span><span style="color: #666666;">&quot;C#&quot;</span> <span style="color: #6666cc; font-weight: bold;">Class</span><span style="color: #008000;">=</span><span style="color: #666666;">&quot;GetProductsByCategoryIDHandler&quot;</span>  <span style="color: #008000;">%&gt;</span> 
<span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008080;">System</span><span style="color: #008000;">;</span>
<span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008080;">System.Web</span><span style="color: #008000;">;</span>
<span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008080;">System.Linq</span><span style="color: #008000;">;</span>
<span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008080;">Newtonsoft.Json.Linq</span><span style="color: #008000;">;</span> 
&nbsp;
<span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #6666cc; font-weight: bold;">class</span> GetProductsByCategoryIDHandler <span style="color: #008000;">:</span> IHttpHandler <span style="color: #008000;">&#123;</span>
    <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #6666cc; font-weight: bold;">void</span> ProcessRequest <span style="color: #008000;">&#40;</span>HttpContext context<span style="color: #008000;">&#41;</span> <span style="color: #008000;">&#123;</span>
        HttpResponse response <span style="color: #008000;">=</span> context<span style="color: #008000;">.</span><span style="color: #0000FF;">Response</span><span style="color: #008000;">;</span>
        HttpRequest request <span style="color: #008000;">=</span> context<span style="color: #008000;">.</span><span style="color: #0000FF;">Request</span><span style="color: #008000;">;</span>
        <span style="color: #6666cc; font-weight: bold;">int</span> categoryID <span style="color: #008000;">=</span> Int32<span style="color: #008000;">.</span><span style="color: #0000FF;">Parse</span><span style="color: #008000;">&#40;</span>request<span style="color: #008000;">&#91;</span><span style="color: #666666;">&quot;categoryID&quot;</span><span style="color: #008000;">&#93;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span> <span style="color: #008080; font-style: italic;">//传递过来的类别ID</span>
        JObject json <span style="color: #008000;">=</span> <span style="color: #0600FF; font-weight: bold;">null</span><span style="color: #008000;">;</span>
&nbsp;
        <span style="color: #0600FF; font-weight: bold;">using</span> <span style="color: #008000;">&#40;</span>NorthwindDataContext db<span style="color: #008000;">=</span><span style="color: #008000;">new</span> NorthwindDataContext<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span>
        <span style="color: #008000;">&#123;</span>
            <span style="color: #6666cc; font-weight: bold;">string</span><span style="color: #008000;">&#91;</span><span style="color: #008000;">&#93;</span> productNames <span style="color: #008000;">=</span>
                db<span style="color: #008000;">.</span><span style="color: #0000FF;">Categories</span> <span style="color: #008080; font-style: italic;">//访问Northwind数据库的产品类别表</span>
                <span style="color: #008000;">.</span><span style="color: #0000FF;">Single</span><span style="color: #008000;">&#40;</span>c <span style="color: #008000;">=&gt;</span> c<span style="color: #008000;">.</span><span style="color: #0000FF;">CategoryID</span> <span style="color: #008000;">==</span> categoryID<span style="color: #008000;">&#41;</span> <span style="color: #008080; font-style: italic;">//根据ID获取唯一实例</span>
                <span style="color: #008000;">.</span><span style="color: #0000FF;">Products</span> <span style="color: #008080; font-style: italic;">//获取此类别的所有产品</span>
                <span style="color: #008000;">.</span><span style="color: #0600FF; font-weight: bold;">Select</span><span style="color: #008000;">&#40;</span>p <span style="color: #008000;">=&gt;</span> p<span style="color: #008000;">.</span><span style="color: #0000FF;">ProductName</span><span style="color: #008000;">&#41;</span> <span style="color: #008080; font-style: italic;">//结果只包含产品名称</span>
                <span style="color: #008000;">.</span><span style="color: #0000FF;">ToArray</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span> <span style="color: #008080; font-style: italic;">//转换为数组</span>
            <span style="color: #008080; font-style: italic;">//实例化JObject对象，同时为其加入一个名为AllProducts的属性</span>
            json <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> JObject<span style="color: #008000;">&#40;</span>
                <span style="color: #008000;">new</span> JProperty<span style="color: #008000;">&#40;</span><span style="color: #666666;">&quot;AllProducts&quot;</span>, <span style="color: #008000;">new</span> JArray<span style="color: #008000;">&#40;</span>productNames<span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span>
            <span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
        <span style="color: #008000;">&#125;</span>
        response<span style="color: #008000;">.</span><span style="color: #0000FF;">ContentType</span> <span style="color: #008000;">=</span> <span style="color: #666666;">&quot;text/plain&quot;</span><span style="color: #008000;">;</span>
        response<span style="color: #008000;">.</span><span style="color: #0000FF;">Write</span><span style="color: #008000;">&#40;</span>json<span style="color: #008000;">.</span><span style="color: #0000FF;">ToString</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
    <span style="color: #008000;">&#125;</span> 
    <span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #6666cc; font-weight: bold;">bool</span> IsReusable <span style="color: #008000;">&#123;</span>
        get <span style="color: #008000;">&#123;</span>
            <span style="color: #0600FF; font-weight: bold;">return</span> <span style="color: #0600FF; font-weight: bold;">false</span><span style="color: #008000;">;</span>
        <span style="color: #008000;">&#125;</span>
    <span style="color: #008000;">&#125;</span>
<span style="color: #008000;">&#125;</span></pre></div></div>

<h5>页面代码：</h5>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span> xmlns<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>JsonAjax Demo<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;CommonFiles/JavaScript/jQuery/jquery-1.4.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;CommonFiles/JavaScript/json.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;</span>
        var commandLocation = &quot;Command/GetProductsByCategoryIDHandler.ashx&quot;;
        function getProductsByStandard(categoryID) {
            $.ajax({
                url: commandLocation,
                dataType: &quot;json&quot;,
                data: &quot;categoryID=&quot; + categoryID,
                success: function(json) {
                    show.innerHTML = json.AllProducts;
                }
            })
        }
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;show&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></pre></div></div>

<p>然后，在脚本中调用getProductsByStandard(1)，就会在页面中显示类别ID为1的所有产品的产品名称了。要显示其他类别的产品，只需要改变getProductsByStandard方法的参数即可。<br />
<div class="note"><div class="notehelp"></p>
<p>本文中使用到的资源</p>
<p><a href="http://msdn.microsoft.com/zh-cn/library/ms143221.aspx" target="_blank">Northwind数据库下载</a></p>
<p><a href="http://www.json.org/json.js" target="_blank">json.js下载</a></p>
<p><a href="http://docs.google.com/leaf?id=0B9T0APtVi1fyMDAxNGJjOTEtNjczMy00OWNlLWIwNmUtY2JiOTViOTg0MGE1&#038;hl=zh_CN" target="_blank">Newtonsoft.Json.dll下载</a></p>
<p><a href="http://json.codeplex.com/" target="_blank">Json.NET资源浏览</a></p>
<p></div></div><br />
<div class="note"><div class="notetip">
<p>原文：<a href="http://www.cnblogs.com/sunnycoder/archive/2010/03/21/1691008.html" target="_blank">http://www.cnblogs.com/sunnycoder/archive/2010/03/21/1691008.html</a></p>
<p><a href="http://docs.google.com/fileview?id=0B9T0APtVi1fyZmM4YzljM2QtZTIyMy00MjA5LTgxODItNGUzYjU0ODZmZjk1&#038;hl=zh_CN" target="_blank">本文PDF下载</a></p>
<p></div></div></p>
<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="Asp.net动态加载用户自定义控件,并转换成HTML代码" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html&from=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617308.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Asp.net动态加载用户自定义控件,并转换成HTML代码</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="ASP.NET(C#)生成柱状图和饼图" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-csharp-histogram-pie&from=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617352.gif" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">ASP.NET(C#)生成柱状图和饼图</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="在ASP.NET中使用Windows身份验证" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-using-windows-authentication&from=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617310.png" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">在ASP.NET中使用Windows身份验证</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="ASP.NET提供哪些身份验证方式？" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-authenticaton-overview&from=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617308.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">ASP.NET提供哪些身份验证方式？</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="Javascript中===与==区别" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjavascript-difference-equal&from=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617345.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">Javascript中===与==区别</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.imwls.com/json-in-dotnet/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Asp.net动态加载用户自定义控件,并转换成HTML代码</title>
		<link>http://www.imwls.com/asp-net-ajax-load-usercontrol-convert-html</link>
		<comments>http://www.imwls.com/asp-net-ajax-load-usercontrol-convert-html#comments</comments>
		<pubDate>Sat, 13 Mar 2010 08:29:04 +0000</pubDate>
		<dc:creator>木公</dc:creator>
				<category><![CDATA[Learning]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Asp.NET]]></category>
		<category><![CDATA[C#]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.imwls.com/?p=1216</guid>
		<description><![CDATA[Ajax现在已经是相当流行的技术了，Ajax不仅是想服务器端发送消息，更重要的是无刷新的重载页面。

如果页面单纯的使用js来创建，要写大量的代码，而且不直观。

在asp.net中，其实我们可以创建用户自定义控件，通过Ajax请求返回用户自定义控件HTML代码。

<span class="readmore"><a href="http://www.imwls.com/asp-net-ajax-load-usercontrol-convert-html" title="Asp.net动态加载用户自定义控件,并转换成HTML代码">阅读全文——共529字</a></span><table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="ASP.NET(C#)生成柱状图和饼图" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-csharp-histogram-pie&from=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617352.gif" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">ASP.NET(C#)生成柱状图和饼图</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="在ASP.NET中使用Windows身份验证" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-using-windows-authentication&from=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617310.png" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">在ASP.NET中使用Windows身份验证</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JSON in .NET" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet&from=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617394.gif" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JSON in .NET</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="ASP.NET提供哪些身份验证方式？" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-authenticaton-overview&from=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617308.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">ASP.NET提供哪些身份验证方式？</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="ASP常用自定义函数--ShowMsg" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-function-showmsg&from=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617349.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">ASP常用自定义函数--ShowMsg</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></description>
			<content:encoded><![CDATA[<p>Ajax现在已经是相当流行的技术了，Ajax不仅是想服务器端发送消息，更重要的是无刷新的重载页面。</p>
<p>如果页面单纯的使用js来创建，要写大量的代码，而且不直观。</p>
<p>在asp.net中，其实我们可以创建用户自定义控件，通过Ajax请求返回用户自定义控件HTML代码。</p>
<p><span id="more-1216"></span></p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #0600FF; font-weight: bold;">public</span> <span style="color: #0600FF; font-weight: bold;">static</span> <span style="color: #6666cc; font-weight: bold;">string</span> RangerUsControl<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">string</span> controlName<span style="color: #008000;">&#41;</span>
<span style="color: #008000;">&#123;</span>
      StringBuilder build <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> StringBuilder<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
      HtmlTextWriter htmlWriter <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> HtmlTextWriter<span style="color: #008000;">&#40;</span><span style="color: #008000;">new</span> StringWriter<span style="color: #008000;">&#40;</span>build<span style="color: #008000;">&#41;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
      UserControl uc <span style="color: #008000;">=</span> <span style="color: #008000;">new</span> UserControl<span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
      Control ctrl<span style="color: #008000;">=</span>uc<span style="color: #008000;">.</span><span style="color: #0000FF;">LoadControl</span><span style="color: #008000;">&#40;</span>controlName<span style="color: #008000;">+</span><span style="color: #666666;">&quot;.ascx&quot;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span><span style="color: #008080; font-style: italic;">//加载用户定义控件</span>
      htmlWriter<span style="color: #008000;">.</span><span style="color: #0000FF;">Flush</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
      <span style="color: #6666cc; font-weight: bold;">string</span> result<span style="color: #008000;">;</span>
      <span style="color: #0600FF; font-weight: bold;">try</span>
      <span style="color: #008000;">&#123;</span>
           ctrl<span style="color: #008000;">.</span><span style="color: #0000FF;">RenderControl</span><span style="color: #008000;">&#40;</span>htmlWriter<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
      <span style="color: #008000;">&#125;</span>
      <span style="color: #0600FF; font-weight: bold;">catch</span> <span style="color: #008000;">&#123;</span> <span style="color: #008000;">&#125;</span>
      <span style="color: #0600FF; font-weight: bold;">finally</span>
      <span style="color: #008000;">&#123;</span>
           htmlWriter<span style="color: #008000;">.</span><span style="color: #0000FF;">Flush</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
           result<span style="color: #008000;">=</span>build<span style="color: #008000;">.</span><span style="color: #0000FF;">ToString</span><span style="color: #008000;">&#40;</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span>
      <span style="color: #008000;">&#125;</span>
      <span style="color: #0600FF; font-weight: bold;">return</span> result<span style="color: #008000;">;</span><span style="color: #008080; font-style: italic;">//返回控件的HTML代码</span>
<span style="color: #008000;">&#125;</span></pre></div></div>

<table class="wumii-related-items" cellspacing="0" cellpadding="3" border="0"  style="clear: both;">
    
    <tr>
        <td colspan="5"><b><font size="-1"  style="display: block !important; padding: 20px 0 5px !important;">您可能也喜欢：</font></b></td>
    </tr>
    
        <tr>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important;">
                    <a target="_blank" title="ASP.NET(C#)生成柱状图和饼图" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-csharp-histogram-pie&from=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617352.gif" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">ASP.NET(C#)生成柱状图和饼图</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="在ASP.NET中使用Windows身份验证" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-using-windows-authentication&from=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617310.png" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">在ASP.NET中使用Windows身份验证</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="JSON in .NET" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fjson-in-dotnet&from=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617394.gif" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">JSON in .NET</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="ASP.NET提供哪些身份验证方式？" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-net-authenticaton-overview&from=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617308.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">ASP.NET提供哪些身份验证方式？</font>
                    </a>
                </td>
                <td width="94" valign="top" style="padding: 5px !important; margin: 0 !important; border-left: 1px solid #DDDDDD !important;">
                    <a target="_blank" title="ASP常用自定义函数--ShowMsg" style="text-decoration: none !important; cursor: pointer !important;" href="http://app.wumii.com/ext/redirect.htm?url=http%3A%2F%2Fwww.imwls.com%2Fasp-function-showmsg&from=http%3A%2F%2Fwww.imwls.com%2Fasp-net-ajax-load-usercontrol-convert-html">
                        <img style="margin: 0 !important; padding: 2px !important; border: 1px solid #DDDDDD !important; width: 88px !important; height: 88px !important;" src="http://static.wumii.com/site_images/2010/12/28/1617349.jpg" width="88px" height="88px" /><br />
                        <font size="-1" color="#333333" style="display: block !important; line-height: 15px !important; width: 94px !important; font: 12px/15px arial !important; height: 60px !important; margin: 3px 0 0 0 !important; padding: 0 !important; overflow: hidden !important;">ASP常用自定义函数--ShowMsg</font>
                    </a>
                </td>
        </tr>
    
    <tr>
        <td colspan="5" align="right">
            <a style="text-decoration: none !important;" href="http://www.wumii.com/widget/relatedItems.htm" target="_blank" title="无觅相关文章插件">
                <font size="-1" color="#bbbbbb" style="display: block !important; font-family: arial !important; padding: 5px 0 !important; font-size: 12px !important; color: #bbb !important;">无觅</font>
            </a>
        </td>
    </tr>
</table>]]></content:encoded>
			<wfw:commentRss>http://www.imwls.com/asp-net-ajax-load-usercontrol-convert-html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

