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 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输出

用户提交值后，AJAX 功能就会实现，屏幕将重定向到表单，如下所示 -

输出屏幕