CherryPy - użycie Ajax
Do roku 2005 we wszystkich aplikacjach internetowych stosowano wzorzec polegający na zarządzaniu jednym żądaniem HTTP na stronę. Nawigacja z jednej strony na inną wymagała załadowania całej strony. Zmniejszyłoby to wydajność na wyższym poziomie.
Tak więc nastąpił wzrost rich client applications który kiedyś osadzał z nimi AJAX, XML i JSON.
AJAX
Asynchroniczny JavaScript i XML (AJAX) to technika tworzenia szybkich i dynamicznych stron internetowych. AJAX umożliwia asynchroniczne aktualizowanie stron internetowych poprzez wymianę niewielkich ilości danych za kulisami z serwerem. Oznacza to, że możliwa jest aktualizacja części strony internetowej bez przeładowywania całej strony.
Mapy Google, Gmail, YouTube i Facebook to kilka przykładów aplikacji AJAX.
Ajax opiera się na pomyśle wysyłania żądań HTTP przy użyciu JavaScript; w szczególności AJAX polega na obiekcie XMLHttpRequest i jego API do wykonywania tych operacji.
JSON
JSON to sposób na przenoszenie zserializowanych obiektów JavaScript w taki sposób, aby aplikacja JavaScript mogła je ocenić i przekształcić w obiekty JavaScript, którymi można później manipulować.
Na przykład, gdy użytkownik zażąda od serwera obiektu albumu sformatowanego w formacie JSON, serwer zwróci dane wyjściowe w następujący sposób -
{'description': 'This is a simple demo album for you to test', 'author': ‘xyz’}Teraz dane są tablicą asocjacyjną JavaScript, a dostęp do pola opisu można uzyskać za pośrednictwem -
data ['description'];Zastosowanie AJAX do aplikacji
Rozważ aplikację, która zawiera folder o nazwie „media” z wtyczką index.html i Jquery oraz plik z implementacją AJAX. Rozważmy nazwę pliku jako „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()Klasa „AjaxApp” przekierowuje do strony internetowej „index.html”, która znajduje się w folderze multimediów.
<!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>Funkcja AJAX jest zawarta w tagach <script>.
Wynik
Powyższy kod wygeneruje następujący wynik -
Po przesłaniu wartości przez użytkownika zostaje zaimplementowana funkcjonalność AJAX, a ekran zostaje przekierowany do formularza, jak pokazano poniżej -
