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关联数组，描述字段可以通过 :

data ['description'];

将AJAX应用于应用程序

考虑包含名为"media"且带有index.html的文件夹的应用程序Jquery插件和带有AJAX实现的文件.让我们将文件名称视为"ajax_app.py"

ajax_app.py

import cherrypyimport webbrowserimport osimport simplejsonimport sysMEDIA_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"的网页，该网页包含在媒体文件夹中.

                                    $(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 ;            });         });                  What's your name?               
            Name:                                  
         

AJAX的功能包含在< script>中标签.

输出

上面的代码将产生以下输出 :

一旦用户提交了值，就会实现AJAX功能，并将屏幕重定向到如下所示的表格和减号;