CherryPy - Sử dụng Ajax

Cho đến năm 2005, mô hình tiếp theo trong tất cả các ứng dụng web là quản lý một yêu cầu HTTP trên mỗi trang. Việc điều hướng trang này đến trang khác yêu cầu tải trang hoàn chỉnh. Điều này sẽ làm giảm hiệu suất ở mức cao hơn.

Do đó, đã có sự gia tăng rich client applications được sử dụng để nhúng AJAX, XML và JSON với chúng.

AJAX

JavaScript và XML không đồng bộ (AJAX) là một kỹ thuật để tạo các trang web nhanh và động. AJAX cho phép các trang web được cập nhật không đồng bộ bằng cách trao đổi một lượng nhỏ dữ liệu phía sau với máy chủ. Điều này có nghĩa là có thể cập nhật các phần của trang web mà không cần tải lại toàn bộ trang.

Google Maps, Gmail, YouTube và Facebook là một vài ví dụ về các ứng dụng AJAX.

Ajax dựa trên ý tưởng gửi các yêu cầu HTTP bằng JavaScript; cụ thể hơn AJAX dựa vào đối tượng XMLHttpRequest và API của nó để thực hiện các hoạt động đó.

JSON

JSON là một cách để mang các đối tượng JavaScript được tuần tự hóa theo cách mà ứng dụng JavaScript có thể đánh giá chúng và chuyển đổi chúng thành các đối tượng JavaScript có thể được thao tác sau này.

Ví dụ: khi người dùng yêu cầu máy chủ cho một đối tượng album được định dạng bằng định dạng JSON, máy chủ sẽ trả về kết quả như sau:

{'description': 'This is a simple demo album for you to test', 'author': ‘xyz’}

Bây giờ dữ liệu là một mảng liên kết JavaScript và trường mô tả có thể được truy cập thông qua:

data ['description'];

Áp dụng AJAX cho ứng dụng

Hãy xem xét ứng dụng bao gồm một thư mục có tên “media” với index.html và plugin Jquery, và một tệp có triển khai AJAX. Hãy để chúng tôi coi tên của tệp là “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()

Lớp “AjaxApp” chuyển hướng đến trang web “index.html”, được bao gồm trong thư mục phương tiện.

<!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>

Hàm cho AJAX được bao gồm trong các thẻ <script>.