直到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功能就会实现,屏幕就会重定向到如下所示的表单−