<?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>Sentido Web &#187; AJAX</title>
	<atom:link href="http://sentidoweb.com/tag/ajax/feed" rel="self" type="application/rss+xml" />
	<link>http://sentidoweb.com</link>
	<description>Desarrollo web, HTML, CSS, Javascript, PHP, MySQL</description>
	<lastBuildDate>Mon, 16 Jan 2012 10:16:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>jQuery Graceful Websocket: plugin jQuery para websockets</title>
		<link>http://sentidoweb.com/2011/04/18/jquery-graceful-websocket-plugin-jquery-para-websockets.php</link>
		<comments>http://sentidoweb.com/2011/04/18/jquery-graceful-websocket-plugin-jquery-para-websockets.php#comments</comments>
		<pubDate>Mon, 18 Apr 2011 07:58:46 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[websockets]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/?p=2716</guid>
		<description><![CDATA[jQuery Graceful Websocket es un plugin jQuery que nos permite comunicarnos con el servidor usando websockets de HTML5. El problema es que tan solo Chrome permite los websokets (creo que Firefox los tiene desactivados por defecto por temas de seguridad), además se necesita que el servidor los pueda tratar, por lo que este plugin permite [...]]]></description>
			<content:encoded><![CDATA[<p><strong>jQuery Graceful Websocket</strong> es un plugin jQuery que nos permite comunicarnos con el servidor usando websockets de HTML5. El problema es que tan solo Chrome permite los websokets (creo que Firefox los tiene desactivados por defecto por temas de seguridad), además se necesita que el servidor los pueda tratar, por lo que este plugin permite una alternativa mediante Ajax transparente al desarrollador.</p>
<pre><code><pre class="php"><span style="color: #808080; font-style: italic;">// Si el servidor no admite websockets sustituye el ws:// por http://</span>
<span style="color: #000000; font-weight: bold;">var</span> ws = $.gracefulWebSocket<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"ws://127.0.0.1:8080/"</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// Env&Atilde;&shy;a datos al servidor. </span>
<span style="color: #808080; font-style: italic;">// Si el servidor no admite websockets lo env&Atilde;&shy;a mediante POST</span>
ws.send<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">"message to server"</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #808080; font-style: italic;">// Recibe datos del servidor</span>
<span style="color: #808080; font-style: italic;">// Si el servidor no admite websockets hace un polling mediante GET</span>
ws.onmessage = <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span>event<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">var</span> messageFromServer = event.data;   
<span style="color: #66cc66;">&#125;</span>;</pre></code></pre>
<p><a href="http://code.google.com/p/jquery-graceful-websocket/">WebSocket plugin for jQuery with graceful degradation</a></p>]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2011/04/18/jquery-graceful-websocket-plugin-jquery-para-websockets.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Building a Sleek AJAX Email Signup Form</title>
		<link>http://sentidoweb.com/2010/08/30/building-a-sleek-ajax-email-signup-form.php</link>
		<comments>http://sentidoweb.com/2010/08/30/building-a-sleek-ajax-email-signup-form.php#comments</comments>
		<pubDate>Mon, 30 Aug 2010 18:22:44 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Quicklinks]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[login]]></category>

		<guid isPermaLink="false">http://net.tutsplus.com/tutorials/javascript-ajax/building-a-sleek-ajax-signup-form/</guid>
		<description><![CDATA[In this tutorial, we’ll learn how to create a slick email signup form. This form will harness the full power of AJAX, meaning that we will submit data to the server, validate it, and receive a response – all without a single page refresh! Along the way, you should pick up some useful tips related [...]]]></description>
			<content:encoded><![CDATA[<p>In this tutorial, we’ll learn how to create a slick email signup form. This form will harness the full power of AJAX, meaning that we will submit data to the server, validate it, and receive a response – all without a single page refresh! Along the way, you should pick up some useful tips related to PHP and JavaScript, as well as general programming &#8230;</p>
<p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/building-a-sleek-ajax-signup-form/" title="Building a Sleek AJAX Email Signup Form">Post original</a></p>]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2010/08/30/building-a-sleek-ajax-email-signup-form.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Los navegadores y los búferes de salida</title>
		<link>http://sentidoweb.com/2010/08/13/los-navegadores-y-los-buferes-de-salida.php</link>
		<comments>http://sentidoweb.com/2010/08/13/los-navegadores-y-los-buferes-de-salida.php#comments</comments>
		<pubDate>Fri, 13 Aug 2010 15:42:38 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[Desarrollo web]]></category>
		<category><![CDATA[Quicklinks]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[streamming]]></category>

		<guid isPermaLink="false">http://dmnet.bitacoras.com/archivos/programacion/los-navegadores-y-los-buferes-de-salida.php</guid>
		<description><![CDATA[Hace unos días me vi en la necesidad de implementar en una web un proceso que puede tardar uno o dos minutos dependiendo de varios factores. El problema reside en que es un proceso que inicia el usuario y el usuario normalmente es impaciente, por lo &#8230; Post original]]></description>
			<content:encoded><![CDATA[<p>Hace unos días me vi en la necesidad de implementar en una web un proceso que puede tardar uno o dos minutos dependiendo de varios factores. El problema reside en que es un proceso que inicia el usuario y el usuario normalmente es impaciente, por lo  &#8230;</p>
<p><a href="http://dmnet.bitacoras.com/archivos/programacion/los-navegadores-y-los-buferes-de-salida.php" title="Los navegadores y los búferes de salida">Post original</a></p>]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2010/08/13/los-navegadores-y-los-buferes-de-salida.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Permitir el botón atrás en aplicaciones dinámicas</title>
		<link>http://sentidoweb.com/2010/04/25/permitir-el-boton-atras-en-aplicaciones-dinamicas.php</link>
		<comments>http://sentidoweb.com/2010/04/25/permitir-el-boton-atras-en-aplicaciones-dinamicas.php#comments</comments>
		<pubDate>Sat, 24 Apr 2010 23:09:56 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[back]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/?p=2284</guid>
		<description><![CDATA[Cuando realizamos aplicaciones dinámicas, ya sea usando Ajax o mediante javascript mostrando u ocultando contenidos, nos podemos encontrar con el problema de que el usuario pulse el botón &#8216;Atrás&#8217; del navegador creyendo que accederá al contenido anterior. El resultado de esa acción será en la mayoría de los casos que el usuario acceda a la [...]]]></description>
			<content:encoded><![CDATA[<p>Cuando realizamos aplicaciones dinámicas, ya sea usando Ajax o mediante javascript mostrando u ocultando contenidos, nos podemos encontrar con el problema de que el usuario pulse el botón &#8216;Atrás&#8217; del navegador creyendo que accederá al contenido anterior. El resultado de esa acción será en la mayoría de los casos que el usuario acceda a la página anterior y no al &#8216;contenido&#8217; anterior.</p>
<p>Para solucionar esto, lo que se debe hacer es que las acciones dinámicas sean realizadas mediante enlaces (#), por ejemplo, si queremos usar pestañas podemos acceder a #tab1, #tab2, &#8230;, #tabn. Si vamos atrás en el navegador continuaremos en la misma página pero en otra sección (#).</p>
<p>Para tratar esto mediante jQuery se puede hacer usando el siguiente código:</p>
<pre><code><pre class="javascript">$<span style="color: #66cc66;">&#40;</span>window<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">bind</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'hashchange'</span>, <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
  <span style="color: #009900; font-style: italic;">// hacer lo que sea para mostrar el contenido</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</pre></code></pre>
<p><a href="http://jqueryfordesigners.com/enabling-the-back-button/">Enabling the Back Button</a></p>
<p>Vía / <a href="http://cssglobe.com/post/7914/enabling-the-back-button">CSS Globe</a></p>]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2010/04/25/permitir-el-boton-atras-en-aplicaciones-dinamicas.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Detecta peticiones Ajax en PHP</title>
		<link>http://sentidoweb.com/2009/07/31/detecta-peticiones-ajax-en-php.php</link>
		<comments>http://sentidoweb.com/2009/07/31/detecta-peticiones-ajax-en-php.php#comments</comments>
		<pubDate>Sat, 01 Aug 2009 01:00:00 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[AJAX]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2009/07/31/detecta-peticiones-ajax-en-php.php</guid>
		<description><![CDATA[Algo muy importante a la hora de desarrollar aplicaciones en Ajax es ofrecer la opción no-Ajax, y para ello es necesario detectar cuando la petición se realiza mediante Ajax, algo muy sencillo gracias a una cabecera que mandan los navegadores modernos: if&#40;!empty&#40;$_SERVER&#91;'HTTP_X_REQUESTED_WITH'&#93;&#41; &#38;&#38; strtolower&#40;$_SERVER&#91;'HTTP_X_REQUESTED_WITH'&#93;&#41; == 'xmlhttprequest'&#41; &#123; echo "Es una petici&#195;&#179;n AJAX" &#125; Detect an [...]]]></description>
			<content:encoded><![CDATA[<p>Algo muy importante a la hora de desarrollar aplicaciones en Ajax es ofrecer la opción no-Ajax, y para ello es necesario detectar cuando la petición se realiza mediante Ajax, algo muy sencillo gracias a una cabecera que mandan los navegadores modernos:</p>
<pre><code><pre class="php"><span style="color: #723b00;">if</span><span style="color: #66cc66;">&#40;</span>!<a href="http://www.php.net/empty"><span style="color: #000066;">empty</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #3E6D8F;">$_SERVER</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">'HTTP_X_REQUESTED_WITH'</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span> &amp;&amp; <a href="http://www.php.net/strtolower"><span style="color: #000066;">strtolower</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #3E6D8F;">$_SERVER</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">'HTTP_X_REQUESTED_WITH'</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span> == <span style="color: #ff0000;">'xmlhttprequest'</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<a href="http://www.php.net/echo"><span style="color: #000066;">echo</span></a> <span style="color: #ff0000;">"Es una petici&Atilde;&sup3;n AJAX"</span>
<span style="color: #66cc66;">&#125;</span></pre></code></pre>
<p><a href="http://davidwalsh.name/detect-ajax">Detect an AJAX Request in PHP</a></p>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2009/07/31/detecta-peticiones-ajax-en-php.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cargar contenido con el scroll mediante jQuery</title>
		<link>http://sentidoweb.com/2009/07/22/cargar-contenido-con-el-scroll-mediante-jquery.php</link>
		<comments>http://sentidoweb.com/2009/07/22/cargar-contenido-con-el-scroll-mediante-jquery.php#comments</comments>
		<pubDate>Thu, 23 Jul 2009 02:15:00 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[scroll]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2009/07/22/cargar-contenido-con-el-scroll-mediante-jquery.php</guid>
		<description><![CDATA[Interesante script que carga el contenido en una capa según se va utilizando el scroll y se va llegando al final, algo similar a lo que ocurre en Google Reader. El autor nos explica paso a paso, incluida la parte PHP, cómo realizar esta funcionalidad. Load Data while Scrolling Page Down with jQuery and PHP [...]]]></description>
			<content:encoded><![CDATA[Interesante script que carga el contenido en una capa según se va utilizando el scroll y se va llegando al final, algo similar a lo que ocurre en Google Reader.
El autor nos explica paso a paso, incluida la parte PHP, cómo realizar esta funcionalidad.
<a href="http://9lessons.blogspot.com/2009/07/load-data-while-scroll-with-jquery-php.html">Load Data while Scrolling Page Down with jQuery and PHP</a>
Vía / <a href="http://www.dzone.com/links/rss/load_data_while_scrolling_page_down_with_jquery_a.html">DZone</a>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2009/07/22/cargar-contenido-con-el-scroll-mediante-jquery.php/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>UIzard: herramienta de desarrollo via Ajax</title>
		<link>http://sentidoweb.com/2009/06/17/uizard-herramienta-de-desarrollo-via-ajax.php</link>
		<comments>http://sentidoweb.com/2009/06/17/uizard-herramienta-de-desarrollo-via-ajax.php#comments</comments>
		<pubDate>Thu, 18 Jun 2009 04:30:00 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[utilidades]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[uizard]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2009/06/17/uizard-herramienta-de-desarrollo-via-ajax.php</guid>
		<description><![CDATA[UIzard es un entorno de trabajo open source vía web que utiliza Ajax, y que funciona en varios navegadores Firefox y Safari (la versión para IE está siendo optimizada). Se trata de un GUI muy completo en el que se pueden realizar páginas web, añadiendo elementos, con orígenes de datos, formularios, &#8230; La mayor parte [...]]]></description>
			<content:encoded><![CDATA[<strong>UIzard</strong> es un entorno de trabajo open source vía web que utiliza Ajax, y que funciona en varios navegadores Firefox y Safari (la versión para IE está siendo optimizada).
<img alt="uizard.png" src="http://sentidoweb.com/img/2009/06/uizard.png" width="450" height="201" class="center" />
Se trata de un GUI muy completo en el que se pueden realizar páginas web, añadiendo elementos, con orígenes de datos, formularios, &#8230;
La mayor parte viene en coreano, pero creo que es bastante claro para poder entenderlo facilmente.
<a href="http://www.uizard.org">UIzard</a>
Vía / <a href="http://youare.com/knight/2009/06/17/1603128">@knight</a>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2009/06/17/uizard-herramienta-de-desarrollo-via-ajax.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Resalta la sintaxis del código mediante Ajax</title>
		<link>http://sentidoweb.com/2009/04/06/resalta-la-sintaxis-del-codigo-mediante-ajax.php</link>
		<comments>http://sentidoweb.com/2009/04/06/resalta-la-sintaxis-del-codigo-mediante-ajax.php#comments</comments>
		<pubDate>Mon, 06 Apr 2009 20:30:00 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[geshi]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2009/04/06/resalta-la-sintaxis-del-codigo-mediante-ajax.php</guid>
		<description><![CDATA[Buen script que nos permite resaltar el código que mostramos dentro de un &#60;pre$gt;&#60;code lang=&#8221;[lenguaje]&#8220;$gt;&#8230;&#60;/code$gt;&#60;/pre$gt; en nuestras páginas web o blogs. El script realiza una llamada Ajax con los trozos de código y su lenguaje y recibe el html de cada trozo de código ya formateado. Utiliza GeSHi para resaltar el código, pero puede utilizar [...]]]></description>
			<content:encoded><![CDATA[Buen script que nos permite resaltar el código que mostramos dentro de un &lt;pre$gt;&lt;code lang=&#8221;<em>[lenguaje]</em>&#8220;$gt;&#8230;&lt;/code$gt;&lt;/pre$gt; en nuestras páginas web o blogs.
El script realiza una llamada Ajax con los trozos de código y su lenguaje y recibe el html de cada trozo de código ya formateado. Utiliza <a href="http://qbnz.com/highlighter/">GeSHi</a> para resaltar el código, pero puede utilizar otras.
<a href="http://code.google.com/p/ajax-syntax-highlighter/">Ajax Syntax Highlighter</a>
Vía / <a href="http://youare.com/philsci/2009/04/05/754549">philsci</a>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2009/04/06/resalta-la-sintaxis-del-codigo-mediante-ajax.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ajax Fancy Captcha: ajax interactivo con jQuery</title>
		<link>http://sentidoweb.com/2009/02/20/ajax-fancy-captcha-ajax-interactivo-con-jquery.php</link>
		<comments>http://sentidoweb.com/2009/02/20/ajax-fancy-captcha-ajax-interactivo-con-jquery.php#comments</comments>
		<pubDate>Fri, 20 Feb 2009 19:00:00 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[captcha]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2009/02/20/ajax-fancy-captcha-ajax-interactivo-con-jquery.php</guid>
		<description><![CDATA[No soy muy amigo de los CAPTCHAS (aunque son necesarios) y menos aún si no son accesibles, pero no quita que este captcha sea interesante y que a alguien le pueda gustar. El CAPTCHA funciona de la siguiente manera: aparece unas imágenes aleatorias y unas instrucciones que indican que una de las imágenes debes ponerlo [...]]]></description>
			<content:encoded><![CDATA[No soy muy amigo de los CAPTCHAS (aunque son necesarios) y menos aún si no son accesibles, pero no quita que este captcha sea interesante y que a alguien le pueda gustar.
<img alt="ajaxfancycaptcha.png" src="http://sentidoweb.com/img/2009/02/ajaxfancycaptcha.png" width="352" height="290" class="center" />
El CAPTCHA funciona de la siguiente manera: aparece unas imágenes aleatorias y unas instrucciones que indican que una de las imágenes debes ponerlo en una capa.
<a href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin">Ajax Fancy Captcha &#8211; jQuery plugin</a>
Vía / <a href="http://www.webappers.com/2009/02/20/drag-and-drop-ajax-fancy-captcha-jquery-plugin/">WebAppers</a>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2009/02/20/ajax-fancy-captcha-ajax-interactivo-con-jquery.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Laboratorio: barra de progreso mediante Ajax</title>
		<link>http://sentidoweb.com/2009/02/10/laboratorio-barra-de-progreso-mediante-ajax.php</link>
		<comments>http://sentidoweb.com/2009/02/10/laboratorio-barra-de-progreso-mediante-ajax.php#comments</comments>
		<pubDate>Wed, 11 Feb 2009 02:30:00 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[barra de progreso]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2009/02/10/laboratorio-barra-de-progreso-mediante-ajax.php</guid>
		<description><![CDATA[Una de las necesidades con las que nos encontramos a la hora de realizar procesos largos en la web, es indicar al usuario que le toca esperar. A veces es bastante complicado realizar una barra de progreso que indice el estado actual del proceso que estamos ejecutando. Una forma de realizarlo es usando Ajax. Realizamos [...]]]></description>
			<content:encoded><![CDATA[<p>Una de las necesidades con las que nos encontramos a la hora de realizar procesos largos en la web, es indicar al usuario que le toca esperar. A veces es bastante complicado realizar una barra de progreso que indice el estado actual del proceso que estamos ejecutando.</p>
<p>Una forma de realizarlo es usando Ajax. Realizamos una llamada Ajax que ejecuta la acción, y cuando el objeto Ajax tiene el estado LOADING (readyState == 3), podemos obtener la respuesta del script llamado y parsearlo para mostrar el porcentaje de acción que se ha realizado.</p>
<p>Para ello, estoy pensando en que un script (res.php por ejemplo) devuelva el porcentaje que lleva seguido de un guión. Por ejemplo, cuando pasa por el 1% habrá devuelto &#8220;1-&#8221; cuando lleve el 5% habrá devuelto &#8220;1-2-3-4-5-&#8221;. Parseando esto podemos saber por el último número cuanto lleva ejecutado.</p>
<p>El PHP sería el siguiente:</p>
<pre><code><pre class="php"><span style="color: #723b00;">for</span><span style="color: #66cc66;">&#40;</span><span style="color: #3E6D8F;">$i</span>=<span style="color: #cc66cc;">0</span>; <span style="color: #3E6D8F;">$i</span>&amp;lt;<span style="color: #cc66cc;">10000000</span>; <span style="color: #3E6D8F;">$i</span>++<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #723b00;">if</span> <span style="color: #66cc66;">&#40;</span><span style="color: #3E6D8F;">$i</span>%<span style="color: #cc66cc;">10000</span> == <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span> <a href="http://www.php.net/echo"><span style="color: #000066;">echo</span></a> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>int<span style="color: #66cc66;">&#41;</span> <span style="color: #3E6D8F;">$i</span>/<span style="color: #cc66cc;">100000</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #ff0000;">'-'</span>;
<a href="http://www.php.net/flush"><span style="color: #000066;">flush</span></a><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></code></pre>
<p>Y el javascript sería así:</p>
<pre><code><pre class="javascript"><span style="color: #003366; font-weight: bold;">function</span> ajaxobj<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #000066; font-weight: bold;">try</span> <span style="color: #66cc66;">&#123;</span>
_ajaxobj = <span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"Msxml2.XMLHTTP"</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span> <span style="color: #000066; font-weight: bold;">catch</span> <span style="color: #66cc66;">&#40;</span>e<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #000066; font-weight: bold;">try</span> <span style="color: #66cc66;">&#123;</span>
_ajaxobj = <span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"Microsoft.XMLHTTP"</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span> <span style="color: #000066; font-weight: bold;">catch</span> <span style="color: #66cc66;">&#40;</span>E<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
_ajaxobj = <span style="color: #003366; font-weight: bold;">false</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>!_ajaxobj &amp;&amp; <span style="color: #000066; font-weight: bold;">typeof</span> XMLHttpRequest!=<span style="color: #3366CC;">'undefined'</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
_ajaxobj = <span style="color: #003366; font-weight: bold;">new</span> XMLHttpRequest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000066; font-weight: bold;">return</span> _ajaxobj;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #003366; font-weight: bold;">function</span> prueba <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
ajax = ajaxobj<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
ajax.<span style="color: #006600;">open</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"GET"</span>, <span style="color: #3366CC;">"res.php"</span>, <span style="color: #003366; font-weight: bold;">true</span><span style="color: #66cc66;">&#41;</span>;
ajax.<span style="color: #006600;">onreadystatechange</span>=<span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>ajax.<span style="color: #006600;">readyState</span> == <span style="color: #CC0000;">3</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #009900; font-style: italic;">// Mostramos porcentaje</span>
<span style="color: #003366; font-weight: bold;">var</span> res = ajax.<span style="color: #006600;">responseText</span>;
res = res.<span style="color: #006600;">split</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'-'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span>res<span style="color: #66cc66;">&#91;</span>res.<span style="color: #006600;">length</span>-<span style="color: #CC0000;">2</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>ajax.<span style="color: #006600;">readyState</span> == <span style="color: #CC0000;">4</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #009900; font-style: italic;">// Fin</span>
<span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'FIN'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>
<span style="color: #009900; font-style: italic;">// Enviamos algo para que funcione el proceso</span>
ajax.<span style="color: #006600;">send</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></code></pre>
<p>Como no hay nada perfecto, y menos aún Internet Explorer, sólo he sido capaz hacer que funcione en FF, Opera, Safari y Chrome.</p>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2009/02/10/laboratorio-barra-de-progreso-mediante-ajax.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

