Un Ejemplo Simple

Véase sinatra-jquery-ajax en GitHub.

~/sinatra/sinatra-jquery-ajax(master)]$ tree
.
|--- Gemfile
|--- Gemfile.lock
|--- README
|--- config.ru
|--- public
|   |--- css
|   |   `--- style.css
|   `--- js
|       `--- app.js
|--- sinatra_jquery_test.rb
`--- views
    |--- app.erb
    `--- layout.erb

[~/sinatra/sinatra-jquery-ajax(master)]$ cat sinatra_jquery_test.rb 
require 'sinatra'

get '/' do
  erb :app
end

get '/play' do 
  if request.xhr?
    %q{<h1 class="blue">Hello! <a href="/">back</a></h1>}
  else
    "<h1>Not an Ajax request!</h1>"
  end
end

request.xhr?

El predicado request.xhr? nos permite saber si este es una request ajax.

[~/sinatra/sinatra-jquery-ajax(master)]$ cat views/layout.erb 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a distributed system of web servers that aim to deliver content to users quickly and efficiently.

A large number of CDNs are available for JavaScript libraries.

The idea is that if lots of sites use the same CDN or hotlink (véase Hotlinking), it will be cached locally on the user’s machine, saving the user from an extra download across all those sites.

The downside is a loss of control and the chance (however small) that the CDN might go down and be unavailable.

views/app.erb

[~/sinatra/sinatra-jquery-ajax(master)]$ cat views/app.erb 
<div id="div1">
  <h2 class="pink">Let jQuery AJAX Change This Text</h2>
  <button type="button">Get External Content</button>
</div>

Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.

Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.

HTML5 has the following new attributes: autofocus, form, formaction, formenctype, formmethod, formnovalidate, and formtarget.

public/js/app.js

[~/sinatra/sinatra-jquery-ajax(master)]$ cat public/js/app.js 
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/play",function(responseTxt,statusTxt,xhr){
      /* if(statusTxt=="success") alert("External content loaded successfully!"); */
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});

$(document).ready(function(){ ... })

No es posible interactuar de forma segura con el contenido de una página hasta que el documento no se encuentre preparado para su manipulación.

jQuery permite detectar dicho estado a través de la declaración

$(document).ready()

de forma tal que el bloque se ejecutará sólo una vez que la página este disponible.

selectores CSS

El concepto más básico de jQuery es el de seleccionar algunos elementos y realizar acciones con ellos.

La biblioteca soporta gran parte de los selectores CSS3 y varios más no estandarizados.

    $("#div1").load("/play",function(responseTxt,statusTxt,xhr){ ... }

En http://api.jquery.com/category/selectors/ se puede encontrar una completa referencia sobre los selectores de la biblioteca.

Controladores de Eventos (Event Handlers)

jQuery provee métodos para asociar controladores de eventos (en inglés event handlers) a selectores.

Cuando un evento ocurre, la función provista es ejecutada.

  $("button").click(function(){ ... })

Dentro de la función, la palabra clave this hace referencia al elemento en que el evento ocurre.

Para más detalles sobre los eventos en jQuery, puede consultar http://api.jquery.com/category/events/.

El Evento

La función del controlador de eventos puede recibir un objeto.

Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste.

Para más detalles sobre el objeto del evento, visite

XMLHttpRequest(XHR)

http://api.jquery.com/category/events/event-object/

El método XMLHttpRequest(XHR) permite a los navegadores comunicarse con el servidor sin la necesidad de recargar la página.

Este método, también conocido como Ajax (Asynchronous JavaScript and XML), permite la creación de aplicaciones ricas en interactividad.

Las peticiones Ajax son ejecutadas por el código JavaScript, el cual

envía una petición a una URL y
cuando recibe una respuesta, una función de devolución (callback) puede ser ejecutada
Esta función recibe como argumento la respuesta del servidor y realiza algo con ella.
Debido a que la respuesta es asíncrona, el resto del código de la aplicación continua ejecutándose, por lo cual, es imperativo que una función de devolución sea ejecutada para manejar la respuesta.

Métodos jQuery para Ajax

A través de varios métodos, jQuery provee soporte para Ajax, permitiendo abstraer las diferencias que pueden existir entre navegadores.

Los métodos en cuestión son

$.get() .get()
$.getScript() .getScript()
$.getJSON() .getJSON()
$.post() .post()
$().load() .load()
$().ajax() jQuery.ajax()

A pesar que la definición de Ajax posee la palabra XML, la mayoría de las aplicaciones no utilizan dicho formato para el transporte de datos, sino que en su lugar se utiliza HTML plano o información en formato JSON (JSON JavaScript Object Notation).

Generalmente, jQuery necesita algunas instrucciones sobre el tipo de información que se espera recibir cuando se realiza una petición Ajax.

En algunos casos, el tipo de dato es especificado por el nombre del método, pero en otros casos se lo debe detallar como parte de la configuración del método:

text Para el transporte de cadenas de caracteres simples.
html Para el transporte de bloques de código HTML que serán ubicados en la página.
script Para añadir un nuevo script con código JavaScript a la página.
json Para transportar información en formato JSON, el cual puede incluir cadenas de caracteres, arreglos y objetos.
Es recomendable utilizar los mecanismos que posea el lenguaje del lado de servidor para la generación de información en JSON.
jsonp Para transportar información JSON de un dominio a otro.
xml Para transportar información en formato XML.

.load()

La sintáxis de .load() es:

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

En nuestro ejemplo lo hemos usado así:

    $("#div1").load("/play",function(responseTxt,statusTxt,xhr){
      /* if(statusTxt=="success") alert("External content loaded successfully!"); */
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });

Load data from the server and place the returned HTML into the matched element. Por ejemplo:

$( "#result" ).load( "ajax/test.html" );

If no element is matched by the selector, in this case,

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

if the document does not contain an element with id="result", the Ajax request will not be sent.

.load() usa GET si no se especifica `data`

The POST method is used if data is provided as an object; otherwise, GET is assumed.

Especificando un Objeto del Documento Remoto via un Selector

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted.

This is achieved with a special syntax for the url parameter.

If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

$( "#result" ).load( "ajax/test.html #container" );

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container.

This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

We could modify the example above to use only part of the document that is fetched:

.innerHTML y .load

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document.

During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

Subsecciones

Casiano Rodriguez León 2015-01-07