CherryPy-使用Ajax-極23458;書

直到2005年，所有web應用程式遵循的模式都是管理每頁一個HTTP請求。將一個頁面導航到另一個頁面需要加載整個頁面。這將在更大程度上降低性能。

因此，用於將AJAX、XML和JSON嵌入其中的富客戶端應用程式出現了增長。

AJAX

異步JavaScript和XML（AJAX）是一種創建快速動態web頁面的技術。AJAX允許通過在後台與伺服器交換少量數據來異步更新web頁面。這意味著可以在不重新加載整個頁面的情況下更新部分網頁。

Google Maps、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'];

Applying AJAX to the Application

考慮一下這個應用程式，它包含一個名爲「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>標記中。

Output

上面的代碼將產生以下輸出&負;

一旦用戶提交了值，AJAX功能就會實現，螢幕就會重定向到如下所示的表單−

極客書

CherryPy - Use Of Ajax

AJAX

JSON

Applying AJAX to the Application

ajax_app.py

Output