Random ...
 
October 2017
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
Tags ...
Links



python+zope++:: Zope and AJAX: two options
Posted at 06.Oct,2005 15:41  Comments 15 / Trackbacks 0 / Like this post!
Technorati tag(s):

AJAX, now I'm certified buzzword compliant ;). Seriously, ajax is Async Javascript and XML with which we can do stuff without page refresh and gives the impression that the browser is very much like your everyday GUI client.

There are many ajax libraries, such as openrico , dojokit , sajax, mochikit, etc.

I chose to try out DataRequestor.js and javascript o lait for no reasons at all. I've never tried anything with async javascript, and googling around I found mentions of DataRequestor and jsolait.

Of the two (probably compared to other ajax libraries), DataRequestor.js is the simplest and easiest to implement. For learning purposes, I want to get the date and update inline. Here's how I did it:

  • create a page, and put these in the head tag:
           <script type="text/javascript"
                src="DataRequestor.js"></script>
    
  • Now, create the javascript function:
          <script type="text/javascript">
        function updateData(url) {
            var req = new DataRequestor();
            req.setObjToReplace('clock');
            req.getURL(url);
        }
    
  • Now, we need to set where the content update will take place.:
          <div style="padding:1em;border: 1px solid gray; background-color: #a8db00; font: 18px Arial; width: 200px; text-align: center">
         <div id="clock">
           The time is ...
         </div>
       </div>
    
       <p>
    
         <button onclick="updateData('http://localhost:8080/test/getDate')">Click me!</button>
       </p>
    
  • Now, create a Script (Python) to return the date. Here's mine:
      from DateTime import DateTime
      return DateTime().pCommon()
    
  • That's about it. The good thing about DataRequestor.js is that we don't need to really care what type that's returned.

Compare this to the steps taken to using jsolait.

  • The first step is to get all the jsolait loaded in the head tag:
           <script type="text/javascript"
                src="./jsolait/init.js"></script>
      <script type="text/javascript"
                src="./jsolait/xml.js"></script>
      <script type="text/javascript"
                src="./jsolait/urllib.js"></script>
      <script type="text/javascript"
                src="./jsolait/lang.js"></script>
      <script type="text/javascript"
                src="./jsolait/xmlrpc.js"></script>
      <script type="text/javascript"
                src="./jsolait/jsonrpc.js"></script>
    

jsolait supports xmlrpc and jsonrpc. xmlrpc comes by default with Zope and you can get the jsonrpc server product for Zope2 and Zope3.

I chose to go with xmlrpc since no patches are needed. There's the xml overhead compared to jsonrpc, but what the hey :). The data returned is not huge, so I think it'll manage.

  • Now, we need to define the updateData function:
      <script type="text/javascript">
        var  url = ".";
        var xmlrpc = importModule("xmlrpc");
        try {
            var service= new xmlrpc.ServiceProxy(url,["getDate","getInfo"]);
             }catch(e){
                 reportException(e);
                 }
    
        function updateData() {
            try {
                 res = service.getDate();
                 }catch(e){
                 reportException(e);
                 }
            nodeId = document.getElementById("clock")
            nodeId.innerHTML = res;
    
        }
    

The good thing about jsolait is how python like it is. And we can do much much more compared to DataRequestor.js. I haven't yet explored building modules and classes with jsolait.

  • The html where updates will take place is the same as what we have for DataRequestor.js:
         <div style="padding:1em;border: 1px solid gray; background-color: #a8db00; font: 18px Arial; width: 200px; text-align: center">
         <div id="clock">
           The time is ...
         </div>
       </div>
    
       <p>
    
         <button onclick="updateData()">Click me!</button>
       </p>
    
  • The server side method is the same. Initially, I was tripped by xmlrpc. xmlrpc only marshalls certain types , and we need to be aware of that. I wrap the response with a str() and things got to work.

Now, the page works for firefox and ie 6. Haven't tried with ie 5.x; will do tonight if I got the time.

After all this learning experience, I do see where ajax fits. But to have a great user experience, we need responsive servers (zope + zeo fits well), somewhat modern browsers and a great sense where to use it.

here is the demo. It contains the above and also another "app" to display files randomly.


Bookmark and Share

Is this entry helpful? Comments/Donate/Click some google ads.  
Trackback is http://myzope.kedai.com.my/blogs/kedai/49/tbping 

Comments
Re: Zope and AJAX: two options

Tim Morgan wrote the 'mini' ajax lib - http://timmorgan.org/wiki/Mini - for his ZiddlyWiki product; it makes your example even simpler and works for me from IE5 to Firefox1.0.7:

<script type="text/javascript" src="ajax.js"></script>    
<p>
<button onclick="ajax.update('http://localhost:8080/test/getDate', 'clock')">Click me!</button>
</p>
<div style="padding:1em;border: 1px solid gray; background-color: #a8db00; font: 18px Arial; width: 200px; text-align: center">
<div id="clock">
The time is ...
</div>
</div>

d2m  at 06.Oct,2005 19:21
Re: Zope and AJAX: two options

booyah! how sweet. i didn't come across this implementation. thanks for the pointer.

i can also vouch that DataRequestor.js and jsolait works with ie5

the bad news is konqi don't :(

kedai  at 06.Oct,2005 21:30
DataRequestor.js and IE6

I gave it a try with IE6 and it looks like IE6 caches the results (it doesn't update the time when I click the button). Works flawlessly with FireFox, though. I've been trying DataRequestor.js with IE caching issues and would love to find a "fix" because it's so simple to use!

PhragMunkee  at 26.Oct,2005 23:09
DataRequestor.js

Hi, all!
I try DataRequestor.js but I don't understand something

If you have something like this:

<div id="div1">div1 content</div>

and you send a petition that returns

<div id="div2">div2 content</div>

the result is

<div id="div1"><div id="div2">div2 content</div></div>

instead of

<div id="div2">div2 content</div>

I think this is an incorrect behaviour don't you?

Garito  at 27.Oct,2005 08:35
DataRequestor.js and IE6

I haven't verified your finding yet (no ie anywhere near here), but I will soon.

iirc, the default ie behaviour is to automatically check for freshness. but that don;t actually work. Setting ie to always check will help, methinks, but that involves telling the users to do that?

kedai  at 27.Oct,2005 09:44
DataRequestor.js

Garito, sorry, but I don't get the question :P. more codes would help us see the problem?

kedai  at 27.Oct,2005 09:46
Nested ComboBoxes

Hi, everybody, I was trying to do something different, but I couldn't. Maybe you can help me out. In one form, I have 3 select tags (like comboboxes), each one filtering the next, using the DataRequestor.js. Example: The 1st Combo filters the 2nd, and the 2nd filters the 3rd. If when the page is loaded, I first filter the 3rd, using the 2nd, ok! Then I filter the 2nd, using the 3rd, ok! Then when I try to filter the 3rd, using the 2nd again, it doesn't work anymore... Any ideas? Thanks.

Douglas B. Alencar  at 21.Dec,2005 05:26
It's not works on IE

It's not works on IE

Giang  at 16.Aug,2008 12:37
jquery

nowadays, I only use jquery for anything ajax. jquery (jquery.com) is a small library, simple and easy to learn, and has many plugins.

many of the later demos I had make use of jquery.

kedai  at 17.Aug,2008 00:42
please help

can anybody tell me what is the server python script for demo of mini in which three fields are updated.The link is as:


http://myzope.kedai.com.my/blogs/kedai/demo/ttmini

when submit query button is clicked.and how do we retrieve the arguments passed.

Gaurav kashyap  at 05.Jun,2009 17:35
jquery

hi. I'd suggest trying jquery? http://myzope.kedai.com.my/blogs/kedai/demo/ttjq

easier and maintained, unlike mini

kedai  at 05.Jun,2009 23:16
thanks

One more issue.i also want to pass arguments to python script and get the returned data. how can this be done

gaurav Kashyap  at 09.Jun,2009 13:21
ajax trainer required

looking for a trainer tht specializes in AJAX

vikneser  at 07.Aug,2009 00:35
Thanks

Thanks for this article. I was coming over google to this article and it was very helpful for me.

Jo Meisner  at 28.Feb,2010 23:20
no prob

glad to help. this entry was a note to self :P

kedai  at 01.Mar,2010 21:12
Post a comment