CherryPy - Uso di Ajax
Fino al 2005, il modello seguito in tutte le applicazioni web era quello di gestire una richiesta HTTP per pagina. La navigazione da una pagina all'altra richiedeva il caricamento della pagina completa. Ciò ridurrebbe le prestazioni a un livello maggiore.
Quindi, c'è stato un aumento di rich client applications che utilizzava per incorporare AJAX, XML e JSON con loro.
AJAX
JavaScript e XML asincrono (AJAX) è una tecnica per creare pagine web veloci e dinamiche. AJAX consente di aggiornare le pagine Web in modo asincrono scambiando piccole quantità di dati dietro le quinte con il server. Ciò significa che è possibile aggiornare parti di una pagina web, senza ricaricare l'intera pagina.
Google Maps, Gmail, YouTube e Facebook sono alcuni esempi di applicazioni AJAX.
Ajax si basa sull'idea di inviare richieste HTTP utilizzando JavaScript; più specificamente AJAX si basa sull'oggetto XMLHttpRequest e sulla sua API per eseguire queste operazioni.
JSON
JSON è un modo per trasportare oggetti JavaScript serializzati in modo tale che l'applicazione JavaScript possa valutarli e trasformarli in oggetti JavaScript che possono essere manipolati in seguito.
Ad esempio, quando l'utente richiede al server un oggetto album formattato con il formato JSON, il server restituirà l'output come segue:
{'description': 'This is a simple demo album for you to test', 'author': ‘xyz’}Ora i dati sono un array associativo JavaScript e il campo della descrizione è accessibile tramite -
data ['description'];Applicazione di AJAX all'applicazione
Considera l'applicazione che include una cartella denominata "media" con index.html e plug-in Jquery e un file con implementazione AJAX. Consideriamo il nome del file come "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 classe "AjaxApp" reindirizza alla pagina web di "index.html", che è inclusa nella cartella media.
<!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 funzione per AJAX è inclusa nei tag <script>.
Produzione
Il codice precedente produrrà il seguente output:
Una volta che il valore è stato inviato dall'utente, la funzionalità AJAX viene implementata e lo schermo viene reindirizzato al modulo come mostrato di seguito -
