random Bytes: AJAX & web.py : some quick reference

This post will give you some basic ideas about how to use AJAX with web.py.

You all know that web.py is a simple web framework for python,the main thing i liked about web.py is that it is very simple to use and more effective too.web.py frame work can run its own basic web server .

About AJAX(Asynchronous Java script and XML) you all know that it is very helpful to create interactive web applications.With Ajax, web applications can send data to, and retrieve data from, a server asynchronously , i.e you can updates the parts of web page without reloading the whole page.

So here i would like to describe some examples that we can experiment with AJAX & web.py.

The Ajax application that we are going to discuss here contain one "div" section and a button. The "div" section will be used to display the contents return form the server.

<html>
<body>
          
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>

</body>
</html>

With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server using both HTTP Get and HTTP Post.And you can load remote data directly into selected HTML elements of your web page!

Next, add a <script> tag to the page's head section. The script section contains the AJAX load function.The jQuery load() method is a simple AJAX function. It has the following syntax:

$(selector).load(url,data,callback)

Next we are adding the <script> tag under <head> section,This section contains jQuery load method.

<head>
      <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery 1.4.2.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
        $("button").click(function(){
           $("div").load("http://127.0.0.1:8080/static/test.txt");    
        });
      });
      </script>
 </head>

Here the load function will load desired contents from the specified URL.(What this URL actually functions is described in the below section,you will get exact picture after you read the whole thing)

Next we are going to implement this code with web.py.

Before we move on to web.py,We have to create a folder named "static" in the same folder that your program resides,and put your text file (here the file is "test.txt" ) inside the "static" folder.Then check that you are able to access the file by typing the URL (" http://127.0.0.1:8080/static/test.txt ") in your browser search bar.If the browser displays the contents properly then you can implement this on aJax load function.

The whole program described below.

Program name -- Code.py

import web

  urls = (
    '/', 'main')


  app = web.application(urls, globals(),True)


  class main:
      def GET(self):
          return'''
          <html>
          <head>
          <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
          <script type="text/javascript">
          $(document).ready(function(){
            $("button").click(function(){
              $("div").load("http://127.0.0.1:8080/static/test.txt");
            });
          });

          </script>
          </head>
          <body>
            
          <div><h2>Let AJAX change this text</h2></div>
          <button>Change Content</button>

          </body>
          </html>'''


  if __name__ == "__main__":
      app.run()

How to run the program:

Web.py comes with a built-in web server that you all know. We have created our program file called " code.py ",just save the file and run the following command in terminal to start your application.

sreehari@sreehari-desktop:~/web.py$ python code.py
  http://0.0.0.0:8080/

Then goto your browser and type " http://127.0.0.1:8080/ " in your search bar , you will get a web page with a text " Let AJAX change this text " and it also contains a button,when you hit the button the text will change and new text from the text file will be loaded and displayed in your browser.

random Bytes

Pages

Tuesday 26 July 2011

AJAX & web.py : some quick reference

2 comments: