CherryPy - Uso de Ajax

Hasta el año 2005, el patrón seguido en todas las aplicaciones web fue administrar una solicitud HTTP por página. La navegación de una página a otra requería cargar la página completa. Esto reduciría el rendimiento a un nivel mayor.

Por lo tanto, hubo un aumento en rich client applications que solía incrustar AJAX, XML y JSON con ellos.

AJAX

JavaScript y XML asíncronos (AJAX) es una técnica para crear páginas web rápidas y dinámicas. AJAX permite que las páginas web se actualicen de forma asincrónica mediante el intercambio de pequeñas cantidades de datos entre bastidores con el servidor. Esto significa que es posible actualizar partes de una página web, sin tener que recargar toda la página.

Google Maps, Gmail, YouTube y Facebook son algunos ejemplos de aplicaciones AJAX.

Ajax se basa en la idea de enviar solicitudes HTTP usando JavaScript; más específicamente, AJAX se basa en el objeto XMLHttpRequest y su API para realizar esas operaciones.

JSON

JSON es una forma de transportar objetos JavaScript serializados de tal manera que la aplicación JavaScript puede evaluarlos y transformarlos en objetos JavaScript que se pueden manipular más tarde.

Por ejemplo, cuando el usuario solicita al servidor un objeto de álbum formateado con el formato JSON, el servidor devolverá el resultado de la siguiente manera:

{'description': 'This is a simple demo album for you to test', 'author': ‘xyz’}

Ahora los datos son una matriz asociativa de JavaScript y se puede acceder al campo de descripción a través de -

data ['description'];

Aplicar AJAX a la aplicación

Considere la aplicación que incluye una carpeta llamada "media" con index.html y el complemento Jquery, y un archivo con implementación AJAX. Consideremos el nombre del archivo como "ajax_app.py"

ajax_app.py

import cherrypy
import webbrowser
import os
import simplejson
import sys

MEDIA_DIR = os.path.join(os.path.abspath("."), u"media")

class AjaxApp(object):
   @cherrypy.expose
   def index(self):
      return open(os.path.join(MEDIA_DIR, u'index.html'))

   @cherrypy.expose
   def submit(self, name):
      cherrypy.response.headers['Content-Type'] = 'application/json'
      return simplejson.dumps(dict(title="Hello, %s" % name))
		
config = {'/media':
   {'tools.staticdir.on': True,
   'tools.staticdir.dir': MEDIA_DIR,}
}
			
def open_page():
webbrowser.open("http://127.0.0.1:8080/")
cherrypy.engine.subscribe('start', open_page)
cherrypy.tree.mount(AjaxApp(), '/', config=config)
cherrypy.engine.start()

La clase “AjaxApp” redirige a la página web de “index.html”, que se incluye en la carpeta multimedia.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">
   <head>
      <title>AJAX with jQuery and cherrypy</title>
      <meta http-equiv = " Content-Type" content = " text/html; charset = utf-8" />
      <script type = " text/javascript" src = " /media/jquery-1.4.2.min.js"></script>
		
      <script type = " text/javascript">
         $(function() {
         
            // When the testform is submitted...
            $("#formtest").submit(function() {
         
               // post the form values via AJAX...
               $.post('/submit', {name: $("#name").val()}, function(data) {
         
                  // and set the title with the result
                  $("#title").html(data['title']) ;
               });
               return false ;
            });
         });
      </script>
		
   </head>
	
   <body>
      <h1 id = "title">What's your name?</h1>
      <form id = " formtest" action = " #" method = " post">
         <p>
            <label for = " name">Name:</label>
            <input type = " text" id = "name" /> <br />
            <input type = " submit" value = " Set" />
         </p>
      </form>
   </body>
	
</html>

La función para AJAX se incluye dentro de las etiquetas <script>.

Salida

El código anterior producirá el siguiente resultado:

Una vez que el usuario envía el valor, se implementa la funcionalidad AJAX y la pantalla se redirige al formulario como se muestra a continuación:

↰ Previous page Next page ↱