<?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>潔靜精微 &#187; ajax</title>
	<atom:link href="http://julabs.me/blog/tags/ajax/feed/" rel="self" type="application/rss+xml" />
	<link>http://julabs.me/blog</link>
	<description>想努力创造完美的东西，必须具备心灵的纯洁，同时富于宗教精神。</description>
	<lastBuildDate>Wed, 18 Jan 2012 06:34:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>自动排队的异步Ajax请求</title>
		<link>http://julabs.me/blog/front/queue-asynchronous-ajax-request/</link>
		<comments>http://julabs.me/blog/front/queue-asynchronous-ajax-request/#comments</comments>
		<pubDate>Sun, 18 Apr 2010 14:31:34 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端]]></category>
		<category><![CDATA[ajax]]></category>

		<guid isPermaLink="false">http://julabs.me/blog/?p=192</guid>
		<description><![CDATA[这两天正在为Ajax同步请求会临时锁住浏览器的问题而烦恼，没想到今天在看《JavaScript设计模式》发现了解决方法，里面有一段可以自动排队的异步Ajax请求的代码范例。看到这段代码真有种众里寻她千百度，蓦然回首，那人却在灯火阑珊处的感觉，哈哈。现在把它整理下，用着慢慢用。 var QueuedHandler = function(){ this.queue = []; // 请求队列 this.requestInProgress = false; // 判断当前是否己有别的请求 this.retryDelay = 5; // 设置每次重新请求的时间，单位为秒 }; QueuedHandler.prototype = { request:function(method,url,callback,postVars,override){ // 如果没有设置为覆盖模式，而且当前已经有别的请求 if(this.requestInProgress &#38;&#38; !override){ this.queue.push({ method:method, url:url, callback:callback, postVars:postVars }); }else{ this.requestInProgress = true; &#8230; <a href="http://julabs.me/blog/front/queue-asynchronous-ajax-request/">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>这两天正在为<a href="/blog/front/synchronous-requests-lock-the-browser/">Ajax同步请求会临时锁住浏览器</a>的问题而烦恼，没想到今天在看<a href="http://book.douban.com/subject/3329540/" target="_blank">《JavaScript设计模式》</a>发现了解决方法，里面有一段可以自动排队的异步Ajax请求的代码范例。看到这段代码真有种<em>众里寻她千百度，蓦然回首，那人却在灯火阑珊处</em>的感觉，哈哈。现在把它整理下，用着慢慢用。</p>
<pre><code class="javascript">var QueuedHandler = function(){
	this.queue = []; // 请求队列
	this.requestInProgress = false; // 判断当前是否己有别的请求
	this.retryDelay = 5; // 设置每次重新请求的时间，单位为秒
};
QueuedHandler.prototype = {
	request:function(method,url,callback,postVars,override){
        // 如果没有设置为覆盖模式，而且当前已经有别的请求
        if(this.requestInProgress &amp;&amp; !override){
            this.queue.push({
                method:method,
                url:url,
                callback:callback,
                postVars:postVars
            });
		}else{
            this.requestInProgress = true;
            var xhr = this.createXhrObject();
            var that = this;

            xhr.onreadystatechange = function(){
                if(xhr.readyState !== 4) return;
                if(xhr.status === 200){
                    callback.success(xhr.responseText,xhr.responseXML);
                    // 判断请求队列是否为空，如果不为空继续下一个请求
                    that.advanceQueue();
                }else{
                    callback.failure(xhr.status);
                    // 每过一定时间重新请求
                    setTimeout(function(){
                        that.request(method,url,callback,postVars);
                    },that.retryDelay * 1000);
                }
            };

            xhr.open(method,url,true);
            if(method!=='POST')postVars = null;
            xhr.send(postVars);
        }
	},
	createXhrObject:function(){
        var methods = [
            function(){return new XMLHttpRequest();},
            function(){return new ActiveXObject('Msxml2.XMLHTTP');},
            function(){return new ActiveXObject('Microsoft.XMLHTTP');},
        ];
        for(var i=0,len=methods.length;i&lt;len;i++){
            try{
           	 methods[i]();
            }catch(e){
            	continue;
            }
            // 如果执行到这里就表明 methods[i] 是可用的
            this.createXhrObject = methods[i]; // 记住这个方法，下次使用不用再判断
            return methods[i]();
		}

		throw new Error('SimpleHandler: Could not create an XHR object.');
	},

	advanceQueue:function(){
        if(this.queue.length === 0){
            this.requestInProgress = false;
            return;
        }
        var req = this.queue.shift();
        this.request(req.method,req.url,req.callback,req.postVars,true);
	}
};
</code></pre>
<p><span id="more-192"></span></p>
<p>用以下方法调用，你会发现，除第一个请求外，其它的请求都会在上一个请求完全完成后才执行的。</p>
<pre><code class="javascript">var myHandler = new QueuedHandler();
var callback = {
	success:function(reponseText){console.log('Success');},
	failure:function(statusCode){console.log('Failure');}
};
myHandler.request('GET','feedProxy.php?feed=http://julabs.me/blog/feed/rss/',callback);
myHandler.request('GET','feedProxy.php?feed=http://julabs.me/blog/feed/rss/',callback);
myHandler.request('GET','feedProxy.php?feed=http://julabs.me/blog/feed/rss/',callback);
myHandler.request('GET','feedProxy.php?feed=http://julabs.me/blog/feed/rss/',callback);
</code></pre>
<p>看来多读书还是非常有用的。</p>
]]></content:encoded>
			<wfw:commentRss>http://julabs.me/blog/front/queue-asynchronous-ajax-request/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Ajax同步请求会临时锁住浏览器</title>
		<link>http://julabs.me/blog/front/synchronous-requests-lock-the-browser/</link>
		<comments>http://julabs.me/blog/front/synchronous-requests-lock-the-browser/#comments</comments>
		<pubDate>Sat, 17 Apr 2010 08:39:36 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[browser]]></category>

		<guid isPermaLink="false">http://julabs.me/blog/front/ajax%e5%90%8c%e6%ad%a5%e8%af%b7%e6%b1%82%e4%bc%9a%e4%b8%b4%e6%97%b6%e9%94%81%e4%bd%8f%e6%b5%8f%e8%a7%88%e5%99%a8/</guid>
		<description><![CDATA[由于公司网页在加载时会用Ajax发送大量请求，服务器吃不消，就把Ajax请求设置为同步。但在页面加载时浏览器会出现停顿，刚开始我还以为是写的JavaScript效率不高，占用太多的内存，造成浏览器停顿现象。这两天无意中发现如果把Ajax请求设置为同步的话，浏览器会被临时锁住，在请求返回之前不能进行任何操作。它会临时中断所有的JavaScript命令，也不能点击按钮，甚至选择文本内容。 我是到这两天才发现这个问题的，和Ajax接触了这么多年才发现，看来我对Ajax基础知识了解地实在是太肤浅了，以后要加强基础知识的掌握了。关于Ajax的基础知识可以参看W3C的资料——《XMLHttpRequest》 解决方法可以参看《自动排队的异步Ajax请求》]]></description>
			<content:encoded><![CDATA[<p>由于公司网页在加载时会用<acronym title="Asynchronous JavaScript and XML">Ajax</acronym>发送大量请求，服务器吃不消，就把<acronym title="Asynchronous JavaScript and XML">Ajax</acronym>请求设置为同步。但在页面加载时浏览器会出现停顿，刚开始我还以为是写的<strong>JavaScript</strong>效率不高，占用太多的内存，造成浏览器停顿现象。这两天无意中发现如果把<acronym title="Asynchronous JavaScript and XML">Ajax</acronym>请求设置为同步的话，浏览器会被临时锁住，在请求返回之前不能进行任何操作。它会临时中断所有的<strong>JavaScript</strong>命令，也不能点击按钮，甚至选择文本内容。</p>
<p>我是到这两天才发现这个问题的，和<acronym title="Asynchronous JavaScript and XML">Ajax</acronym>接触了这么多年才发现，看来我对<acronym title="Asynchronous JavaScript and XML">Ajax</acronym>基础知识了解地实在是太肤浅了，以后要加强基础知识的掌握了。关于<acronym title="Asynchronous JavaScript and XML">Ajax</acronym>的基础知识可以参看<a href="http://www.w3.org/" target="_blank">W3C</a>的资料——<a href="http://www.w3.org/TR/XMLHttpRequest/" target="_blank">《XMLHttpRequest》</a></p>
<p>解决方法可以参看<a href="/blog/front/queue-asynchronous-ajax-request/">《自动排队的异步Ajax请求》</a></p>
]]></content:encoded>
			<wfw:commentRss>http://julabs.me/blog/front/synchronous-requests-lock-the-browser/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>用file_get_contents解决ajax垮域问题</title>
		<link>http://julabs.me/blog/front/ajax-file-get-contents/</link>
		<comments>http://julabs.me/blog/front/ajax-file-get-contents/#comments</comments>
		<pubDate>Sun, 27 Dec 2009 08:30:34 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://julabs.me/blog/?p=56</guid>
		<description><![CDATA[在ajax运用中有时候会垮域调用文件，而浏览器为了安全会默认给这种操作提出警告，甚至直接阻止。如果是IE会弹出一个警告窗口，询问你是否继续操作，只有你同意了IE才会调用垮域的文件。而其它浏览器，如火狐、Opera默认设置下则会直接提示错误，阻止调用外域文件。这会给用户不好的操作体验，如果想通过用户修改浏览器的安全设置来解决这个问题是不现实的，最好是在服务器端解决。 在服务器端可以使用一个同域的文件做为代理文件，这个代理文件将获得外域文件的内容，然后再传递给ajax。这样ajax就不是调用外域文件，而是调用同域的这个代理文件，安全问题也就解决了。 如果你的服务器端支持PHP的话，可以使用file_get_contents这个函数，看到它的名称就已经知道它有获得其它文件内容的功能了。它的详细用法可以参看PHP官方网站上的file_get_contents用法一页，下面是它的简单实例。 &#60;?php $serverAddress = 'http://www.julabs.com/blog/feed/'; //获得外域文件内容 $randomNumber = file_get_contents($serverAddress); //输出内容 echo $randomNumber; ?&#62;]]></description>
			<content:encoded><![CDATA[<p>在ajax运用中有时候会垮域调用文件，而浏览器为了安全会默认给这种操作提出警告，甚至直接阻止。如果是IE会弹出一个警告窗口，询问你是否继续操作，只有你同意了IE才会调用垮域的文件。而其它浏览器，如<a href="http://www.mozillaonline.com/" target="_blank">火狐</a>、<a href="http://www.opera.com/" target="_blank">Opera</a>默认设置下则会直接提示错误，阻止调用外域文件。这会给用户不好的操作体验，如果想通过用户修改浏览器的安全设置来解决这个问题是不现实的，最好是在服务器端解决。</p>
<p>在服务器端可以使用一个同域的文件做为代理文件，这个代理文件将获得外域文件的内容，然后再传递给ajax。这样ajax就不是调用外域文件，而是调用同域的这个代理文件，安全问题也就解决了。</p>
<p>如果你的服务器端支持PHP的话，可以使用<code>file_get_contents</code>这个函数，看到它的名称就已经知道它有获得其它文件内容的功能了。它的详细用法可以参看<a href="http://www.php.net/" target="_blank">PHP官方网站</a>上的<a href="http://www.php.net/manual/en/function.file-get-contents.php" target="_blank">file_get_contents用法</a>一页，下面是它的简单实例。</p>
<pre><code class="php">
&lt;?php

$serverAddress = 'http://www.julabs.com/blog/feed/';
//获得外域文件内容
$randomNumber = file_get_contents($serverAddress);
//输出内容
echo $randomNumber;

?&gt;
</code></pre>
]]></content:encoded>
			<wfw:commentRss>http://julabs.me/blog/front/ajax-file-get-contents/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

