CherryPy Ajax
直到 2005 年，所有 Web 应用程序都遵循的模式是每页管理一个 HTTP 请求。从一个页面导航到另一个页面需要加载整个页面。这会在更大程度上降低性能。
因此，用于嵌入 AJAX、XML 和 JSON 的
富客户端应用程序有所增加。
AJAX
异步 JavaScript 和 XML (AJAX) 是一种创建快速动态网页的技术。 AJAX 允许通过在后台与服务器交换少量数据来异步更新网页。这意味着可以更新网页的某些部分，而无需重新加载整个页面。
Google 地图、Gmail、YouTube 和 Facebook 是 AJAX 应用程序的一些示例。
Ajax 基于使用 JavaScript 发送 HTTP 请求的思想；更具体地说，AJAX 依赖于 XMLHttpRequest 对象及其 API 来执行这些操作。
JSON
JSON 是一种携带序列化 JavaScript 对象的方式，这样 JavaScript 应用程序就可以评估它们并将它们转换为以后可以操作的 JavaScript 对象。
例如，当用户向服务器请求以 JSON 格式格式化的专辑对象时，服务器将返回如下输出-
{'description': 'this is a simple demo album for you to test', 'author': ‘xyz’}
现在数据是一个 JavaScript 关联数组，可以通过以下方式访问描述字段-
将 AJAX 应用到应用程序
考虑包含一个名为"media"的文件夹和 index.html 和 Jquery 插件的应用程序，以及一个带有 AJAX 实现的文件。让我们考虑文件名为"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()
类"AjaxApp"重定向到包含在媒体文件夹中的"index.html"的网页。
<!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>
AJAX 函数包含在 <script>标签中。
输出
上面的代码将产生以下输出 -
一旦用户提交了值，AJAX 功能就会被实现，屏幕被重定向到如下所示的表单-
