Javascript | Tecnico Programador

Home » Programacion » Archivado por Categoria 'Javascript'

Listado de Javascript

Fragmentos de Códigos Javascript útiles en cualquier Página Web

JQuery Post XML to MVC Controller Accepting POST parameters
JQuery Post XML to MVC Controller Accepting POST parameters
Comunicación Ajax GET / POST. Cuando iniciamos una comunicación AJAX y enviamos información al servidor, se puede hacer por GET (los parámetros concatenados en la URI de la Request) o por POST, quedando ocultos. No sólo eso, sino que los parámetros están internos en la Request. Una de las arquitecturas utilizadas en el desarrollo de un sitio web ASP.NET, para que quede el código un "poquito" estructurado, es JQuery + MVC. JQuery se encarga de la parte del Cliente y MVC (Modelo Vista Controlador) se encarga de separar la capa presentación de la capa de negocio. Una vez introducidos, si queremos enviar un XML por JQuery a través de AJAX y que nuestro "Controller" lo recupere sin problemas, podemos hacer lo siguiente. Parte JQuery que realiza la llamada AJAX hacia el servidor...
Javascript Library: Tamaño de Fuente flexible a diferentes dispositivos
Javascript Library: Tamaño de Fuente flexible a diferentes dispositivos
FitText, Librería que adapta el tamaño de la fuente de diferentes diseños web para adaptarse a los diferentes dispositivos que nos encontramos, como Ordenadores de Sobremesa, Tablets o Smartphones. Aunque la primera idea que se nos viene a la cabeza es utilizar CSS, con una librería Javascript nos da más poder a la hora de adaptar nuestros diseños a los diferentes dispositivos....
Mas sensacion de Velocidad cargando los Script Javascript con Defer y Async
Mas sensacion de Velocidad cargando los Script Javascript con Defer y Async
Cargar Javascript Asíncronamente o al finalizar de cargar la página. Estas diferentes formas de cargar ficheros Javascript permiten aumentar la velocidad de carga de la página. En referencia a la velocidad de carga de nuestra página, los ficheros javascript son elementos muy importantes. ¿Porque? los navegadores se descargan la página de nuestros servidores y pueden descargar varias imágenes en paralelo para ganar tiempo. El problema esta en que mientras está descargando un fichero javascript, se acabo la descarga en paralelo hasta que finalice la descarga. Lo mismo pasa con otro tipo de ficheros, pero vamos a ver que podemos hacer con el Javascript.
Recomendaciones
...
Hosting Frameworks Librerias Javascript en Google
Hosting Frameworks Librerias Javascript en Google
Google ofrece un Hosting de Frameworks Javascript en Google Libraries API, donde podemos utilzar sus urls o sus métodos para cargar el Frameworks o Librería Javascript que nos interese. Chrome Frame Dojo Ext Core jQuery jQuery UI MooTools Prototype script_aculo_us SWFObject Yahoo! User Interface Library (YUI) WebFont Loader Para quien no lo sepa....
Menus Dinamicos en Vertical con CSS y Javascript
Menus Dinamicos en Vertical con CSS y Javascript
Pasos para saber como crear Menus Dinámicos en Vertical para los Proyectos Web. Sin pensarlo demasiado creía que sólo con CSS ya se podía hacer los menus en verticales. Cierto, pero no Menus tipo DropDown List, Menu tipo Lista Desplegable que se muestre u oculte en función del movimiento del ratón. Por lo que Necesitas Javascript, y después de buscar un poco de información encontré un artículo que Recopila Ejemplos de Menus Desplegables Navegables Multinivel (Ejemplos y Tutoriales de Drop Down Navigation Menus). Algunos utilizan código javascript personalizado y otros librerías tipo JQuery, Prototype, Mootools. Pero las funcionalidades básicas se pueden encontrar en el primer ejemplo de dynamicdrive, sencillo, funcional y encima nos podemos descargar el código fuente de ejemplo. También hemos encontrado un Plugin de Wordpress para generar Menus Navegables Multilevel Navigation Plugin (No lo he probado) Recomiendo utilizar primero un Ejemplo Sencillo que podamos modificar e intentar adaptarlo a nuestras necesidades, y después ya nos iremos complicando la vida. Pensad que es posible que a más complicación, más tiempo de carga. ¿Existe alguna forma de Crear Menus Dinámicos en Vertical sin usar Javascript?...
Eliminar Acentos con .Net Utilizando Expresiones Regulares
Eliminar Acentos con .Net Utilizando Expresiones Regulares
Como eliminar acentos de los strings con RegEx (Expresiones Regulares). Lo primero que se nos ocurre es realizar un "Replace" del String para modificar todos aquellos carácteres específicos. Por ejemplo como subgurim.net nos expone, un código sencillo y fácil utilizando un simple "Replace", Pero ¿no sería mejor utilizar una Expresión Regular?. ADeshoras nos proporciona dos métodos Eficientes para quitar acentos, de los que podemos incluso descargar el código y ver como funciona. Utilizando RegEx (System.Text.RegularExpressions) Utilizando Normalización Unicode (System.Text.Encoding) De las dos opciones he utilizado la primera, por sencillez y claridad, además de que donde pensaba utilizarla era un proceso de Importación que se ejecutará una sola vez.
```
public static string RemoveAccentsWithRegEx(string inputString)
{
Regex replace_a_Accents = new Regex("[á|à|ä|â]", RegexOptions.Compiled);
Regex replace_e_Accents = new Regex("[é|è|ë|ê]", RegexOptions.Compiled);
Regex replace_i_Accents = new Regex("[í|ì|ï|î]", RegexOptions.Compiled);
Regex replace_o_Accents = new Regex("[ó|ò|ö|ô]", RegexOptions.Compiled);
Regex replace_u_Accents = new Regex("[ú|ù|ü|û]", RegexOptions.Compiled);
inputString = replace_a_Accents.Replace(inputString, "a");
inputString = replace_e_Accents.Replace(inputString, "e");
inputString = replace_i_Accents.Replace(inputString, "i");
inputString = replace_o_Accents.Replace(inputString, "o");
inputString = replace_u_Accents.Replace(inputString, "u");
return inputString;
}
```
El Método funciona correctamente, utilizando Expresiones Regulares hemos podido eliminar los acentos de las vocales que en ocasiones no tienen ningún sentido. Además tenemos la versión de javascript para quitar acentos con Expresiones Regulares, tal como explican en proinf.net en el artículo Generar Permalinks directamente desde Javascript, donde tuvieron que eliminar los acentos....
Cargar Javascript OnAfterLoad, después de cargar la página
Cargar Javascript OnAfterLoad, después de cargar la página
Cargar javascript de terceros después de que la página se cargada y así ganar velocidad de carga. Existen diferentes opciones, pero vamos a redirigir al artículo de tutkiun.
```
element1.async=true;
```
Es la solución que empleó Google para Google Analýtics, modificando el código para que se cargara Asíncronamente. Además de esta solución podemos encontrar otras alternativas para cargar javascript asíncronamente entre las que se encuentra una de las mejores maneras para cargar Adsense más rápido, ya que de momento no es posible cargarlo de manera asíncrona....
Agregar Atributos para acceder desde Javascript
Agregar Atributos para acceder desde Javascript
Agregar atributos a los controles para utilizarlos desde Javascript. Javascript es un lenguaje muy flexible, en ocasiones limitado por seguridad ya que se ejecuta en el ordenador del cliente, pero a su vez es muy flexible. La idea es poder agregar a todos los controles que componen una página web (labels, textbox, inputs, ...) un atributo personalizado. El Ejemplo que veremos a continuación esta orientado a las páginas Web Asp.Net.
Primero Crear el Atributo Customizable
Lo más normal sería llamarlo desde el Evento Page_Load, pero sólo cuando "!IsPostBack", de esta forma no resetearemos el valor cada vez que recarguemos la página. Y este atributo nos puede servir para guardar alguna información personalizada.
```
protected void AgregarAtributoMyId(ControlCollection controls)
    {
        foreach (Control ctrl in controls)
        {
            if (ctrl is WebControl)
                ((WebControl)ctrl).Attributes.Add("myId", ctrl.ID);
        }
    }
```
Recuperar el Valor del Atributo desde Javascript
Ahora necesitamos obtener el valor, y para eso necesitamos saber el ClientID del Control en Cuestión.
```
var ctrl = document.getElementById(txtControlClientID);
    aux = ctrl.attributes.item('myId').value+'='+ctrl.value;  
```
Conclusión
Realmente no se las posibilidades que tiene, vamos a ser sinceros. Pero cuando lo descubrí lo vi interesante y por eso me lo apunte para escribirlo y así tenerlo presente en el momento que me haga falta. Si llega el Día. Una manera de Almacenar Valores en Atributos Personalizables y Recuperarlos desde Javascript....
Alternativa al Adsense Asincrono, para mejorar la velocidad
Alternativa al Adsense Asincrono, para mejorar la velocidad
Como cargar Adsense Asíncrono no es posible, por mucho que lo intentes y consigas cargar el Script Adsense asíncronamente, no te funcionará. Una de las especifícaciones que veo en Google Support es que no se permite la carga asícrona del Adsense.
Very Best method for Load Adsense
Una de las mejoras para cargar Adsense más rápido, aunque sea para la percepción del usuario, es Situar todos los Scripts al final de la página (footer.php) siguiendo las indicaciones de semplicewebsites. Las bases son situar el código de Adsense en la parte inferior de la página, después mediante el método .onload de la página, situar el código adsense dentro del bloque DIV que nos interesa. Algo parecido al siguiente código.
```
<html>
...
<body>
	
	
	<div id="ad1_inline"></div>
	
	

	
	<div id="ad1_footer" style="display: none;">
	<script type="text/javascript"></script>
	<script type="text/javascript" src="...show_ads.js"></script>
	</div>

	<script type="text/javascript">
		window.onload = function() {
			document.getElementById('ad1_inline').appendChild(document.getElementById('ad1_footer'));
			document.getElementById('ad1_footer').style.display = '';
		}
	</script>
</body>
</html>
```
Lo que no entiendo es porque Google ya nos optimiza el código de Analytics para que se cargue asíncronamente y el de Adsense todavía no, espero que en breve tengamos noticias al respecto
Cargar Asíncronamente Javascript
Para mejorar aún más el código de optimización de carga de nuestros javascript, ya sean internos o externos, podemos seguir las pautas de anieto2k. Fichero javascript lo más reducido posible La idea es utilizar un fichero .js que contenga una función de carga asíncrona de ficheros javascript, y otro fichero javascript con el resto de nuestro código. Creamos un fichero llamado min.js, el cual contendrá el método loadScript. Recibirá la url donde se encuentre el fichero javascript que queremos cargar asíncronamente, y un método de Callback, el cual nos servirá de inicialización si fuera necesario.
```
function loadScript(url, callback){
 var script = document.createElement("script")
 script.type = "text/javascript";

 if (script.readyState){  //IE
    script.onreadystatechange = function(){
     if (script.readyState == "loaded" ||
         script.readyState == "complete"){
           script.onreadystatechange = null;
           callback();
        }
     };
 } else {  //Others
   script.onload = function(){
     callback();
   };
 }

 script.src = url;
 document.getElementsByTagName("head")[0].appendChild(script);
}
```
Para utilizarlo sería
```
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/min.js"></script>
<script type="text/javascript">
	loadScript("<?php bloginfo('template_url'); ?>/js/utils.js", function(){ });	
</script>
```
Si aplicamos esta técnica con el código de Adsense, no nos funcionará (ya lo he intentado y no aparece ningún anuncio). Pero si es cierto que si juntamos las dos optimizaciones minimizaremos el impacto de carga que tenga el Javascript en nuestra página web....
Llamadas al servidor desde el cliente con DoCallBack y DoPostBack ASP.NET
Llamadas al servidor desde el cliente con DoCallBack y DoPostBack ASP.NET
Microsoft incluye por defecto librerías Javascript para poder realizar DoPostBack y DoCallback. Llamadas a métodos del Servidor desde el lado Cliente. Esta posibilidad es interesante, y en ocasiones es realmente útil, aunque hay que tener bien controlado el repintado de pantalla sino queremos volvernos locos. Por definición el DoPostBack es síncrono y el CallBack es asíncrono, aunque es configurable. De ambas manera podemos llamar a métodos de la parte Servidor desde Javascript.
Ejemplo DoCallBack
DoCallBack utiliza la tecnología Ajax para llamar al Servidor y retorna el flujo del proceso a un método CallBack de Javascript. Para conseguirlo debemos implementar la Interface ICallbackEventHandler
```
public partial class mipage : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
```
Código necesario de la Interfaz
```
#region ICallbackEventHandler
private string respuestaCallBack = string.Empty;
void  ICallbackEventHandler.RaiseCallbackEvent(string eventArg)
{
	respuestaCallBack = "Es posible "+eventArg;
}

String ICallbackEventHandler.GetCallbackResult()
{
	return respuestaCallBack;
}
#endregion
```
El código que realiza la llamada doCallBack desde Javascript es
```
WebForm_DoCallback(controlImplementInterfaz,datosenvio,funcionJScallback,idllamada,funcionJSerror, esAsincrono);
```
Aunque podemos utilizar el método Page.ClientScript.GetCallbackEventReference(this,...) para generar el código javascript y almacenarlo en alguna variable o atributo de nuestra página. Nosotros nos guardamos en una variable el Control que implementa la Interfaz para llamarlo desde Javascript, aunque se puede hacer más directo.
```
//Llamamos al siguiente método desde el PageLoad
protected void RegisterScriptVariables()
{	
	System.Text.StringBuilder sbJS = new System.Text.StringBuilder();
	sbJS.Append("var controlImplementInterfaz = '" + this.UniqueID + "';");

	// registrar en la página el código JavaScript
	Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"ScriptVariablesJS", sbJS.ToString(), true);
}
```
Ejemplo del Código Javascript
```
function CallServer()
{
	WebForm_DoCallback(controlImplementInterfaz, datosenvio, CallServerCallBack, null, null, false);
}

function  CallServerCallBack(result, idLlamada) 
{
	alert(result);
}
```
Referencias de Ayuda Callbacks
oscarsotorrio.com, ejemplo 1 en castellano. dotnetslackers.com, ejemplo 2 en ingles. edndoc.esri.com, ejemplo 3 en ingles. Los tres ejemplos son complementarios entre sí.
Ejemplo DoPostBack
Últimamente el DoPostBack se genera automáticamente por regla general al pulsar cualquier botón o evento en la página, donde el control tenga puesto el "runat=server". Pero podemos utilizar un truco con esta tecnología para llamar a métodos concretos. Aunque no es muy recomendable porque existen otras opciones que con un poco más de tiempo les sacaremos más rentabilidad y a la larga nos vendrá mejor. Los parámetros son: eventTarget: Control que provocará el evento eventArgument: Los parámetros que se desean mandar Para controlar los eventos de las páginas, Microsoft añade dos cajas de texto por cada página ASP.NET que tengamos.
```
<input type="hidden" name="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" value="" />
```
Después cuando realizamos el envío del formulario al servidor, utiliza estos campos para enviar la información del objeto y los parámetros.
```
function __doPostBack(eventTarget, eventArgument) {
	 if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
		theForm.__EVENTTARGET.value = eventTarget;
		theForm.__EVENTARGUMENT.value = eventArgument;
		theForm.submit();
	 }
}
```
Sabiendo esto podemos generar un código en momentos de "crisis" para llamar al método que queramos.
```
//Javascript
function CallServerMethod()
{
    __doPostBack('OpcionA','');
}

//Código Servidor
protected void Page_Load(object sender, EventArgs e)
{
	if (Request.Params["__EVENTTARGET"] == "OpcionA")
		ServerMethod();
	else
		//ServerMethodWithParameters(Request.Params["__EVENTARGUMENT"]);

	if (!Page.IsPostBack)
	{
		//...
	}
}
protected void ServerMethod()
{
	//Ponemos el código que necesitamos en el lado Servidor
}
```
Referencia en ForosDelWeb....
Las Claves del ModalPopupExtender ASP.NET
Las Claves del ModalPopupExtender ASP.NET
Cosas a tener en cuenta cuando creamos un Modal Popup Extender de las librerias Ajax Control Kit. En ocasiones nos decidimos a mostrar información tipo "PopUp" pero sin que sea directamente un PopUp. El Control ModalPopupExtender nos ayudará para mostrar información tipo PopUp y desactivar el resto de la pantalla. (Que los usuarios tiene el ratón muy suelto).
```
<asp:Button ID="btnModal" runat="server" Text="Consultar 1" CausesValidation="False" OnClientClick="javascript:showmpe();"/>    

<ajaxToolkit:ModalPopupExtender runat="server"
    ID="mpeSelec"   
    BehaviorID="mpeSelec"
    TargetControlID="btnModal"
    PopupControlID="pnlModal"
    BackgroundCssClass="modalBackground"     
    OkControlID="btnAceptarModal" 
    OnOkScript="Aceptar()"
    CancelControlID="btnCancelarModal" 
    OnCancelScript="Cancelar()"> 
</ajaxToolkit:ModalPopupExtender>

<asp:Panel ID="pnlModal" runat="server" style="margin:auto; text-align:center;" Width="400px" class="panel1" BackColor="white" Height="400px">
	
	<asp:Panel ID="pnlInfo" runat="server" ScrollBars="Vertical" Height="80%">
		
	</asp:Panel>
    <div style="text-align: center; margin:auto;">
        <asp:Button id="btnAceptarModal" runat="server" Text="Aceptar" CssClass="boton"  CausesValidation="False" ></asp:Button>
        <asp:Button id="btnCancelarModal" runat="server" Text="Cancelar" CssClass="boton" CausesValidation="False" ></asp:Button>
    </div>
	</asp:Panel>
</asp:Panel>
```
Este Código hay que completarlo con código Javascript para terminar de cuadrar nuestro Panel Modal.
```
function showmpe()
{
    var modal=$find('mpeSelec');    
    if (modal!=null)
    {
        modal.show();
    }
}

function Aceptar()
{
    alert('Ok');
}

function Cancelar()
{
    alert('Cancel');
}
```
Este Ejemplo consta de: Un Botón para provocar el evento y mostrar el Panel tipo Modal. La configuración del Control ModalPopupExtender Un Panel que utilizaremos para mostrar la información tipo PopUp en modo Modal Código Javascript para establecer el comportamiento y pasar información
A tener en Cuenta
El ModalPopupExtender se cerrará siempre y cuando se produzca un PostBack. Esta restricción es la clave para controlar correctamente la información que mostramos, ya que si no veremos una especie de parpadeo, o que el PopUp se abre y se cierra sin ningún tipo de control.
Posibles Problemas
Aparece y desaparece: escribir style="display:none;" en el Control que identifica la propiedad "PopupControlID" del ModalPopupExtender. Como Recuperar información del Servidor cuando estamos en el lado Cliente. Existen algunas técnicas para realizar llamadas al Servidor sin provocar un PostBack. Webservices, Ajax o utilizando CallBacks, todo requiere de un esfuerzo, así que primero valorar si realmente hace falta. (más adelante explicaremos los "dopostback" y los "docallbacks")
Referencias y ayudas
asp.net Ayuda de Referencia sobre las opciones disponibles geeks, excelente ejemplo de como montar el ModalPopupExtender. elrincon de aspnet y ajax ejemplo que incluye el uso de un WebServices....
Buenas practicas Javascript y Php
Buenas practicas Javascript y Php
Recomendaciones de desarrollo en buenas prácticas de Javascript y Php. Hace ya algún tiempo escribí unas Buenas Prácticas en Php para Principiantes (como yo), ya que el lenguaje que utilizo normalmente no es este. Hace poco gracias a SentidoWeb, encuentro las buenas prácticas de desarrollo Javascript por parte de Google, que siempre te las tienes que tomar como recomendación y aceptarlas bajo tu propio criterio. Sobre todo, el artículo tiene como objetivo tener apuntado los enlaces a las buenas prácticas de Javascript, que aunque sean de Google son muy completas con ejemplos y con el "deberías y no deberías hacer" de cada cosa. De esta manera encuentro las cosas más fácilmente. Y de paso ya hago referencia al artículo que escribí en su día sobre las buenas prácticas de Php....
Utilizar la API Ajax de Google para Las Busquedas Relacionadas
Utilizar la API Ajax de Google para Las Busquedas Relacionadas
Utilizar API Ajax Google Search Engine Javascript para ofrecer información, vídeos y artículos relacionados a las búsquedas de los usuarios. El usuario busca en el buscador y la página lo que hace es mostrar artículos y vídeos relacionados en función de las palabras que escribió el usuario en el buscador. Es interesante y útil para el usuario, y se consigue con un pequeño código Javascript que utiliza la API de Google para las Búsquedas (Search Engine).
API Google Ajax Javascript
La documentación necesaria esta en Code.Google. Es completa y fácil de seguir para utilizarlo sin muchas complicaciones. Actualmente podemos verlo desarrollado en komoloves. Imaginar que un usuario busca "Configurar Torrent" en un buscador, y accede a un artículo nuestro, ¿No sería interesante mostrar al usuario resultados relacionados a esas palabras?. Podemos mostrar al usuario los artículos relacionados a "Configurar Torrent" que poseemos en el blog, además podemos complementar esos artículos con vídeos relacionados a lo que el usuario esta buscando. Todo esto podemos hacerlo utilizando la API de Google para búsquedas.
Conseguir las búsquedas Relacionadas
Para mostrar el resultado correcto, lo primero que tenemos que hacer es obtener las palabras que ha utilizado el cliente en el Buscador. Una vez conseguido, ya podemos utilizar esa información para mostrarle información relevante al usuario. El código lo vamos a estructura en 3 partes, Carga, Desarrollo y Presentación (Mas o Menos). En el head de nuestra página, obtenemos las palabras utilizadas por el usuario e inicializamos la librería de Google tal y como nos indican en la API de Búsquedas, siempre y cuando haga falta.
```
<?php $keysreferrer = getKeywords();
    if($keysreferrer!='')
    { ?>

     <script src="http://www.google.com/jsapi?key=ABCDF" type="text/javascript">
        </script>
        <script language="Javascript" type="text/javascript">
        //<![CDATA[
        google.load("search", "1", {"language" : "es"});
        function OnLoad()
        {
            var keys = '';
            var domain = 'komoloves.com';
            keys = "<?php echo $keysreferrer; ?>";
            OnLoadSearchRelated(domain, keys);
        }
        google.setOnLoadCallback(OnLoad);
        //]]>
        </script>
<?php } ?>
```
El método en Javascript OnLoadSearchRelated crear y configura las búsquedas que queremos mostrar al usuario con información relevante. Necesita las palabras clave y un domino para restringir los resultados a un dominio concreto.
```
function OnLoadSearchRelated(domain, keywords) {
    // Create a search control
    var searchControl = new google.search.SearchControl();
    
    var options = new google.search.SearcherOptions();
    options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

    var siteKomoloves = new google.search.WebSearch();
    siteKomoloves.setUserDefinedLabel(domain);
    siteKomoloves.setUserDefinedClassSuffix("site"+domain);
    siteKomoloves.setSiteRestriction(domain);
    searchControl.addSearcher(siteKomoloves, options);

    var siteYoutube = new google.search.VideoSearch();
    siteYoutube.setUserDefinedLabel("Videos");
    siteYoutube.setUserDefinedClassSuffix("siteYoutube");
    
    searchControl.addSearcher(siteYoutube, options);   
    searchControl.draw(document.getElementById("searchcontrol"));

    searchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
    // Execute an inital search
    searchControl.execute(keywords);
}
```
Por último un lugar donde queremos ubicar los resultados, en el caso de komoloves, en el sidebar.
```
<?php
$showdiv = getKeywords();
if($showdiv!=''){ ?>
    <div class="box-sidebar-380">
        <div id="searchcontrol">Loading...</div>
    </div>
<?php } ?>
```
Espero que os sea de ayuda....

Obtener las palabras de busqueda del Usuario

Obtener las palabras utilizadas por el usuario en el buscador con Php que las condujo a un artículo de nuestra página. Conseguir las palabras que utilizó el usuario es interesante para ofrecer información relacionada, sino no tendría mucho sentido. También podemos utilizarlo en la página de error 404 y mostrar artículos que acordes a lo que el usuario quiso buscar. Lo primero es tener un objetivo claro y saber que queremos hacer con esas palabras claves del usuario, después es sólo cuestión de gustos a utilizarlas para ofrecer información importante.

Código Php

La clave esta en utilizar la URL de referencia, en PHP con $_SERVER['HTTP_REFERER'].

function getKeywords()
{
    $refer = parse_url($_SERVER['HTTP_REFERER']);
    $host = $refer['host'];
    $refer = $refer['query'];

    if(strstr($host,'google'))
    {
        //do google stuff
        $match = preg_match('/&q=([a-zA-Z0-9+-]+)/',$refer, $output);
        $querystring = $output[0];
        $querystring = str_replace('&q=','',$querystring);
        $keywords = explode('+',$querystring);
        return $keywords;
    }
    elseif(strstr($host,'yahoo'))
    {
        //do yahoo stuff
        $match = preg_match('/p=([a-zA-Z0-9+-]+)/',$refer, $output);
        $querystring = $output[0];
        $querystring = str_replace('p=','',$querystring);
        $keywords = explode('+',$querystring);
        return $keywords;

    }
    elseif(strstr($host,'msn'))
    {
        //do msn stuff
        $match = preg_match('/q=([a-zA-Z0-9+-]+)/',$refer, $output);
        $querystring = $output[0];
        $querystring = str_replace('q=','',$querystring);
        $keywords = explode('+',$querystring);
        return $keywords;
    }
    else
    {
        //else, who cares
        return false;
    }      
}

Código extraído de stevenyork. Esto nos devuelve un Array con las palabras de referencia. También podemos ver el código de codingforums o codeproject. Para recuperar la lista de palabras de la búsqueda sólo tenemos que recorrer el Array

$helperterms = '';
    $keywords = getKeywords();
    if ($keywords)
    {          
        foreach($keywords as $keyword)  
        {  
            $helperterms.= $keyword.' ';  
            //echo $keyword.' ';  
        }  
    }    
    return $helperterms;

Código Javascript

En Javascript para obtener la url de referencia hay que utilizar document.referrer. Podemos encontrar diferentes ejemplos para su uso, por ejemplo en netmechanic.

 if (document.referrer != '')
document.write('Thanks for visiting from ' + document.referrer);

Con este código daremos las grácias al usuario que nos ha visitado desde la "Url de Referencia"...

Listado de Javascript

JQuery Post XML to MVC Controller Accepting POST parameters

Javascript Library: Tamaño de Fuente flexible a diferentes dispositivos

Mas sensacion de Velocidad cargando los Script Javascript con Defer y Async

Recomendaciones

Hosting Frameworks Librerias Javascript en Google

Menus Dinamicos en Vertical con CSS y Javascript

Eliminar Acentos con .Net Utilizando Expresiones Regulares

Cargar Javascript OnAfterLoad, después de cargar la página

Agregar Atributos para acceder desde Javascript

Primero Crear el Atributo Customizable

Recuperar el Valor del Atributo desde Javascript

Conclusión

Alternativa al Adsense Asincrono, para mejorar la velocidad

Very Best method for Load Adsense

Cargar Asíncronamente Javascript

Llamadas al servidor desde el cliente con DoCallBack y DoPostBack ASP.NET

Ejemplo DoCallBack

Referencias de Ayuda Callbacks

Ejemplo DoPostBack

Las Claves del ModalPopupExtender ASP.NET

A tener en Cuenta

Posibles Problemas

Referencias y ayudas

Buenas practicas Javascript y Php

Utilizar la API Ajax de Google para Las Busquedas Relacionadas

API Google Ajax Javascript

Conseguir las búsquedas Relacionadas

Obtener las palabras de busqueda del Usuario

Código Php

Código Javascript

Plugins de Desarrollo Web para Varios Navegadores

Internet Explorer

Firefox

Chrome

Conclusión

Complemento de Seguridad NoScript para Firefox

Como crear una Sesion Infinita o que no caduca nunca

Como crear peticiones Ajax basicas y personalizables sin librerias desde Javascript

Código Javascript para peticiones Ajax

Evento unload Javascript para capturar el evento al cerrar un Popup

Como hacer Get QueryString desde Javascript

Insertar Codigo Html, Php, ... desde un QuickTag de Wordpress

Porque Microsoft JScript runtime error: Object expected