CherryPy - การใช้ Ajax

จนถึงปี 2548 รูปแบบที่ตามมาในเว็บแอปพลิเคชันทั้งหมดคือการจัดการคำขอ HTTP หนึ่งรายการต่อหน้า การนำทางของหน้าหนึ่งไปยังอีกหน้าที่จำเป็นต้องโหลดหน้าทั้งหมด ซึ่งจะลดประสิทธิภาพในระดับที่มากขึ้น

ดังนั้นจึงมีการเพิ่มขึ้นใน rich client applications ซึ่งใช้ในการฝัง AJAX, XML และ JSON ไว้ด้วย

AJAX

Asynchronous JavaScript และ XML (AJAX) เป็นเทคนิคในการสร้างเว็บเพจที่รวดเร็วและมีไดนามิก AJAX อนุญาตให้อัปเดตหน้าเว็บแบบอะซิงโครนัสโดยการแลกเปลี่ยนข้อมูลจำนวนเล็กน้อยเบื้องหลังกับเซิร์ฟเวอร์ ซึ่งหมายความว่าคุณสามารถอัปเดตบางส่วนของหน้าเว็บได้โดยไม่ต้องโหลดซ้ำทั้งหน้า

Google Maps, Gmail, YouTube และ Facebook เป็นตัวอย่างบางส่วนของแอปพลิเคชัน AJAX

Ajax ใช้แนวคิดในการส่งคำขอ HTTP โดยใช้ JavaScript โดยเฉพาะอย่างยิ่ง 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>