CherryPy - Verwendung von Ajax
Bis zum Jahr 2005 bestand das Muster in allen Webanwendungen darin, eine HTTP-Anforderung pro Seite zu verwalten. Für die Navigation von einer Seite zu einer anderen Seite musste die gesamte Seite geladen werden. Dies würde die Leistung auf einem höheren Niveau reduzieren.
Somit gab es einen Anstieg in rich client applications die AJAX, XML und JSON mit ihnen eingebettet haben.
AJAX
Asynchrones JavaScript und XML (AJAX) ist eine Technik zum Erstellen schneller und dynamischer Webseiten. Mit AJAX können Webseiten asynchron aktualisiert werden, indem kleine Datenmengen hinter den Kulissen mit dem Server ausgetauscht werden. Dies bedeutet, dass es möglich ist, Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden.
Google Maps, Google Mail, YouTube und Facebook sind einige Beispiele für AJAX-Anwendungen.
Ajax basiert auf der Idee, HTTP-Anfragen mit JavaScript zu senden. Insbesondere stützt sich AJAX auf das XMLHttpRequest-Objekt und seine API, um diese Vorgänge auszuführen.
JSON
JSON ist eine Möglichkeit, serialisierte JavaScript-Objekte so zu transportieren, dass die JavaScript-Anwendung sie auswerten und in JavaScript-Objekte umwandeln kann, die später bearbeitet werden können.
Wenn der Benutzer beispielsweise den Server nach einem Albumobjekt anfordert, das im JSON-Format formatiert ist, gibt der Server die Ausgabe wie folgt zurück:
{'description': 'This is a simple demo album for you to test', 'author': ‘xyz’}
Jetzt sind die Daten ein assoziatives JavaScript-Array und auf das Beschreibungsfeld kann über - zugegriffen werden
data ['description'];
Anwenden von AJAX auf die Anwendung
Betrachten Sie die Anwendung, die einen Ordner mit dem Namen "media" mit index.html und dem Jquery-Plugin sowie eine Datei mit AJAX-Implementierung enthält. Betrachten wir den Namen der Datei als "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()
Die Klasse "AjaxApp" leitet zur Webseite "index.html" weiter, die im Medienordner enthalten ist.
<!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>
Die Funktion für AJAX ist in <script> -Tags enthalten.
Ausgabe
Der obige Code erzeugt die folgende Ausgabe -
Sobald der Wert vom Benutzer übermittelt wurde, wird die AJAX-Funktionalität implementiert und der Bildschirm wird wie unten gezeigt zum Formular umgeleitet.