<?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"
	>

<channel>
	<title>FV.Zone &#187; JQuery Ajax</title>
	<atom:link href="http://www.fvzone.com/blog/category/jquery-ajax/feed" rel="self" type="application/rss+xml" />
	<link>http://www.fvzone.com/blog</link>
	<description>生命最快乐时,就是与你分享时!</description>
	<pubDate>Fri, 25 Jul 2008 17:40:45 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.6</generator>
	<language>en</language>
			<item>
		<title>JQuery 试用</title>
		<link>http://www.fvzone.com/blog/jquery-test.fv</link>
		<comments>http://www.fvzone.com/blog/jquery-test.fv#comments</comments>
		<pubDate>Mon, 11 Jun 2007 08:41:56 +0000</pubDate>
		<dc:creator>Fvart</dc:creator>
		
		<category><![CDATA[JQuery Ajax]]></category>

		<category><![CDATA[Flash]]></category>

		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.raidybor.com/blog/jquery-ajax/jquery-%e8%af%95%e7%94%a8/</guid>
		<description><![CDATA[
一直想学js可是觉得那很难,直到wp 升级到2.2的时候很多介绍提到jquery这个东西,于是我就看了一下,结果才知道是一个JS框架,看完说明以后觉得很好用,而且WP默认也提供了她,我将我以后一直喜欢... ]]></description>
			<content:encoded><![CDATA[<p><img src="/blog/wp-content/uploads/images/icons/jquery.png" alt="JQuery" /><br />
一直想学js可是觉得那很难,直到wp 升级到2.2的时候很多介绍提到jquery这个东西,于是我就看了一下,结果才知道是一个JS框架,看完说明以后觉得很好用,而且WP默认也提供了她,我将我以后一直喜欢的边栏收起与展开效果改成了jquery来实现,不过也遇到很多麻烦,因为不太懂JS的原因吧,现在我Blog有两处用了jquery.<span id="more-65"></span></p>
<p>一是边栏收起与展开,代码如下</p>
<pre class="syntax-highlight:js">
$(document).ready(function(){

/**** 边栏效果开始 ****/
$(&quot;h3&quot;).toggle(function(){
$(this).parents(&quot;.flex&quot;).find(&quot;.fvbox&quot;).hide(&#039;slow&#039;);
},function(){
$(this).parents(&quot;.flex&quot;).find(&quot;.fvbox&quot;).show(&#039;fast&#039;);
});
});// end ready
</pre>
<p>这代码还是jquery中文网站的一位高人给我写的,在此谢谢他了,相信你也看到了很简单的一点点代码,结合我的Blog边栏的写法就可以实现了,</p>
<p>演示效果请看:</p>
<div class="flex">
<h3><a href="#">演示效果A</a></h3>
<div class="fvbox">
<ul>内容一</ul>
</div>
</div>
<div class="flex">
<h3><a href="#">演示效果B</a></h3>
<div class="fvbox">
<ul>内容二</ul>
</div>
</div>
<p>第二个应用是在网页中插入MP3文件,然后让jquery的插件是一个为flash播放器写的插件,有了他就可以很容易的在网页中放MP3了,再也不用写很多没用的代码:</p>
<pre class="syntax-highlight:js">
$(&#039;a[@href$=&quot;mp3&quot;]&#039;).flash(
{ src: &#039;/blog/wp-content/themes/lonely-age/play.swf&#039;, height: 20, width: 200 },
{ version: 7 },
function(htmlOptions) {
$this = $(this);
htmlOptions.flashvars.file = $this.attr(&#039;href&#039;);
$this.before($.fn.flash.transform(htmlOptions));
}
);</pre>
<p>想用这个代码你先得有一个插件的名字叫flash.jquery.js这个插件jquery的官方网站上有下载<br />
现在只要我们在网页上写上这样的代码就OK了</p>
<pre class="syntax-highlight:html">&lt;a href=&quot;http://www.raidybor.com/Plugins/Home/music.mp3&quot;&gt;&lt;/a&gt;</pre>
<p>演示:<a href="http://www.raidybor.com/Plugins/Home/music.mp3"></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.fvzone.com/blog/jquery-test.fv/feed</wfw:commentRss>
<enclosure url="http://www.raidybor.com/Plugins/Home/music.mp3" length="1827152" type="audio/mpeg" />
		</item>
		<item>
		<title>AJAXPress充满ajax气息的BLOG</title>
		<link>http://www.fvzone.com/blog/ajaxpress%e5%85%85%e6%bb%a1ajax%e6%b0%94%e6%81%af%e7%9a%84blog%e7%b3%bb%e7%bb%9f.fv</link>
		<comments>http://www.fvzone.com/blog/ajaxpress%e5%85%85%e6%bb%a1ajax%e6%b0%94%e6%81%af%e7%9a%84blog%e7%b3%bb%e7%bb%9f.fv#comments</comments>
		<pubDate>Fri, 10 Mar 2006 15:38:33 +0000</pubDate>
		<dc:creator>Fvart</dc:creator>
		
		<category><![CDATA[JQuery Ajax]]></category>

		<category><![CDATA[Ajax]]></category>

		<category><![CDATA[PHP]]></category>

		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.osye.com/blog/?p=41</guid>
		<description><![CDATA[AJAXPress充满ajax气息的BLOG系统
介绍:
AJAXPress的目标是打造一个精小但功能强大的blog系统.
AJAXPress 关注于易用,web标准,速度.
AJAXPress没有那些只会使用户糊涂的多余的功能.
AJAXPress 是轻量,快速,并... ]]></description>
			<content:encoded><![CDATA[<p>AJAXPress充满ajax气息的BLOG系统<br />
介绍:<br />
AJAXPress的目标是打造一个精小但功能强大的blog系统.<span id="more-41"></span><br />
AJAXPress 关注于易用,web标准,速度.<br />
AJAXPress没有那些只会使用户糊涂的多余的功能.<br />
AJAXPress 是轻量,快速,并且简单的.<br />
And best of all<br />
100% 开源!<br />
(介绍译自官方,在下E文不好翻译能只有这样了)<br />
好像支持wordpress导入.看了他的JS好像是用的prototype和scriptaculous<br />
运行环境:<br />
服务器:php+mysql<br />
客户端:ie6+,FF1.5+</p>
<p><a href="http://www.ajaxpress.org/demo/">查看DEMO</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.fvzone.com/blog/ajaxpress%e5%85%85%e6%bb%a1ajax%e6%b0%94%e6%81%af%e7%9a%84blog%e7%b3%bb%e7%bb%9f.fv/feed</wfw:commentRss>
		</item>
		<item>
		<title>Ajax基础教程</title>
		<link>http://www.fvzone.com/blog/ajax%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b.fv</link>
		<comments>http://www.fvzone.com/blog/ajax%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b.fv#comments</comments>
		<pubDate>Wed, 01 Feb 2006 07:46:09 +0000</pubDate>
		<dc:creator>Fvart</dc:creator>
		
		<category><![CDATA[JQuery Ajax]]></category>

		<category><![CDATA[Ajax]]></category>

		<category><![CDATA[技术开发]]></category>

		<guid isPermaLink="false">http://www.rcsky.org/blog/?p=6</guid>
		<description><![CDATA[      AJAX (异步 JavaScript 和 XML) 是个新产生的术语,专为描述JavaScript的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail, Google suggest和google Maps的横空出世才使人们开始意... ]]></description>
			<content:encoded><![CDATA[<p>      AJAX (异步 JavaScript 和 XML) 是个新产生的术语,专为描述JavaScript的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail, Google suggest和google Maps的横空出世才使人们开始意识到其重要性.<span id="more-6"></span></p>
<p>这两项被忽视的性能是:</p>
<p>• 无需重新装载整个页面便能向服务器发送请求.</p>
<p>• 对XML文档的解析和处理．</p>
<p>步骤 1 – &#8220;请!&#8221; &#8212; 如何发送一个HTTP请求</p>
<p>为了用JavaScript向服务器发送一个HTTP请求, 需要一个具备这种功能的类实例. 这样的类首先由Internet Explorer以ActiveX对象引入, 被称为XMLHTTP. 后来Mozilla, Safari 和其他浏览器纷纷仿效, 提供了XMLHttpRequest类,它支持微软的ActiveX对象所提供的方法和属性.</p>
<p>因此, 为了创建一个跨浏览器的这样的类实例(对象), 可以应用如下代码:</p>
<pre class="syntax-highlight:php">if (window.XMLHttpRequest) { // Mozilla, Safari, ...

http_request = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE

http_request = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);

}
</pre>
<p>(上例对代码做了一定简化,这是为了解释如何创建XMLHTTP类实例. 实际的代码实例可参阅本篇步骤3.)</p>
<p>如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作. 为了解决这个问题, 如果服务器响应的header不是text/xml,可以调用其它方法修改该header.</p>
<pre class="syntax-highlight:php">http_request = new XMLHttpRequest();

http_request.overrideMimeType(&#039;text/xml&#039;);</pre>
<p>接下来要决定当收到服务器的响应后,需要做什么.这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应.可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:</p>
<pre class="syntax-highlight:php">http_request.onreadystatechange = nameOfTheFunction;

注意:在函数名后没有括号,也无需传递参数.另外还有一种方法,可以在扉页(fly)中定义函数及其对响应要采取的行为,如下所示:

[php]http_request.onreadystatechange = function(){

// do the thing

};</pre>
<p>在定义了如何处理响应后,就要发送请求了.可以调用HTTP请求类的open()和send()方法, 如下所示:</p>
<pre class="syntax-highlight:php">http_request.open(&#039;GET&#039;, &#039;http://www.example.org/some.file&#039;, true);

http_request.send(null);</pre>
<p>• open()的第一个参数是HTTP请求方式 – GET, POST, HEAD 或任何服务器所支持的您想调用的方式. 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求.有关HTTP请求方法的详细信息可参考http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html W3C specs</p>
<p>• 第二个参数是请求页面的URL.由于自身安全特性的限制,该页面不能为第三方域名的页面.同时一定要保证在所有的页面中都使用准确的域名,否则调用open()会得到&#8221;permission denied&#8221;的错误提示.一个常见的错误是访问站点时使用domain.tld,而当请求页面时,却使用www.domain.tld.</p>
<p>• 第三个参数设置请求是否为异步模式.如果是TRUE, JavaScript函数将继续执行,而不等待服务器响应.这就是&#8221;AJAX&#8221;中的&#8221;A&#8221;.</p>
<p>如果第一个参数是&#8221;POST&#8221;,send()方法的参数可以是任何想送给服务器的数据. 这时数据要以字符串的形式送给服务器,如下所示:<br />
name=value&amp;anothername=othervalue&amp;so=on<br />
步骤 2 – &#8220;收到!&#8221; &#8212; 处理服务器的响应</p>
<p>当发送请求时,要提供指定处理响应的JavaScript函数名.</p>
<pre class="syntax-highlight:php">http_request.onreadystatechange = nameOfTheFunction;</pre>
<p>我们来看看这个函数的功能是什么.首先函数会检查请求的状态.如果状态值是4,就意味着一个完整的服务器响应已经收到了,您将可以处理该响应.</p>
<pre class="syntax-highlight:php">if (http_request.readyState == 4) {

// everything is good, the response is received

} else {

// still not ready

}</pre>
<p>readyState的取值如下:</p>
<p>• 0 (未初始化)</p>
<p>• 1 (正在装载)</p>
<p>• 2 (装载完毕)</p>
<p>• 3 (交互中)</p>
<p>• 4 (完成)</p>
<p>(Source)</p>
<p>接着,函数会检查HTTP服务器响应的状态值. 完整的状态取值可参见 W3C site. 我们着重看值为200 OK的响应.</p>
<pre class="syntax-highlight:php">if (http_request.status == 200) {

// perfect!

} else {

// there was a problem with the request,

// for example the response may be a 404 (Not Found)

// or 500 (Internal Server Error) response codes

}</pre>
<p>在检查完请求的状态值和响应的HTTP状态值后, 您就可以处理从服务器得到的数据了.有两种方式可以得到这些数据:</p>
<p>• http_request.responseText – 以文本字符串的方式返回服务器的响应</p>
<p>• http_request.responseXML – 以XMLDocument对象方式返回响应.处理XMLDocument对象可以用JavaScript DOM函数</p>
<p>步骤 3 – &#8220;万事俱备!&#8221; - 简单实例</p>
<p>我们现在将整个过程完整地做一次,发送一个简单的HTTP请求. 我们用JavaScript请求一个HTML文件, test.html, 文件的文本内容为&#8221;I&#8217;m a test.&#8221;.然后我们&#8221;alert()&#8221;test.html文件的内容.</p>
<pre class="syntax-highlight:php">style=&quot;cursor: pointer; text-decoration: underline&quot;
onclick=&quot;makeRequest(&#039;test.html&#039;)&quot;&amp;gt;

Make a request
</pre>
<p>本例中:</p>
<p>• 用户点击浏览器上的&#8221;请求&#8221;链接;</p>
<p>• 接着函数makeRequest()将被调用.其参数 – HTML文件test.html在同一目录下;</p>
<p>• 这样就发起了一个请求.onreadystatechange的执行结果会被传送给alertContents();</p>
<p>• alertContents()将检查服务器的响应是否成功地收到,如果是,就会&#8221;alert()&#8221;test.html文件的内容.<br />
步骤 4 – &#8220;X-文档&#8221; &#8212; 处理XML响应</p>
<p>在前面的例子中,当服务器对HTTP请求的响应被收到后,我们会调用请求对象的reponseText属性.该属性包含了test.html文件的内容.现在我们来试试responseXML属性.</p>
<p>首先,我们新建一个有效的XML文件,后面我们将使用这个文件.该文件(test.xml)源代码如下所示:</p>
<p>I&#8217;m a test.</p>
<p>在该脚本中,我们只需修改请求部分:</p>
<pre class="syntax-highlight:php">...

onclick=&quot;makeRequest(&#039;test.xml&#039;)&quot;&amp;gt;

...
</pre>
<p>接着,在alertContents()中,我们将alert()的代码alert(http_request.responseText);换成:</p>
<pre class="syntax-highlight:php">var xmldoc = http_request.responseXML;

var root_node = xmldoc.getElementsByTagName(&#039;root&#039;).item(0);

alert(root_node.firstChild.data);</pre>
<p>这里,我们使用了responseXML提供的XMLDocument对象并用DOM方法获取存于XML文件中的内容.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.fvzone.com/blog/ajax%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b.fv/feed</wfw:commentRss>
		</item>
	</channel>
</rss>
