simple ajax example for begginers using tornado?

2,225 views
Skip to first unread message

aliane abdelouahab

unread,
Jul 12, 2013, 2:40:30 PM7/12/13
to python-...@googlegroups.com
hi
i wanted to learn that ajax technology, and digged to youtube, the tutorial i watched is http://www.youtube.com/watch?v=Q1xJ4m7fPSg
but the first line he wrote was: php :(
is there any tutorial for beginners? my philoshopy is only about forms and binding them to a requesthandler by a post method, what about ajax?

Andrew Grigorev

unread,
Jul 12, 2013, 2:46:00 PM7/12/13
to python-...@googlegroups.com
AJAX is all about JS. You can use it with regular HTTP POST requests,
forms and request handlers. See http://api.jquery.com/jQuery.ajax/ for
examples. You can find its usage with tornado in the chat demo in
tornado repository.

12.07.2013 22:40, aliane abdelouahab пишет:
> --
> You received this message because you are subscribed to the Google
> Groups "Tornado Web Server" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to python-tornad...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

Russ Weeks

unread,
Jul 12, 2013, 2:52:21 PM7/12/13
to python-...@googlegroups.com
I agree with Andrew.  It's fine (and important) to learn about the theory of AJAX and XMLHttpRequest from eg. Wikipedia.  But when you actually want to build something with AJAX, definitely use a library like jQuery.


On Fri, Jul 12, 2013 at 11:46 AM, Andrew Grigorev <and...@ei-grad.ru> wrote:
AJAX is all about JS. You can use it with regular HTTP POST requests, forms and request handlers. See http://api.jquery.com/jQuery.ajax/ for examples. You can find its usage with tornado in the chat demo in tornado repository.

12.07.2013 22:40, aliane abdelouahab пишет:
hi
i wanted to learn that ajax technology, and digged to youtube, the tutorial i watched is http://www.youtube.com/watch?v=Q1xJ4m7fPSg
but the first line he wrote was: php :(
is there any tutorial for beginners? my philoshopy is only about forms and binding them to a requesthandler by a post method, what about ajax?
--
You received this message because you are subscribed to the Google Groups "Tornado Web Server" group.
To unsubscribe from this group and stop receiving emails from it, send an email to python-tornado+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.


--
You received this message because you are subscribed to the Google Groups "Tornado Web Server" group.
To unsubscribe from this group and stop receiving emails from it, send an email to python-tornado+unsubscribe@googlegroups.com.

aliane abdelouahab

unread,
Jul 12, 2013, 2:52:29 PM7/12/13
to python-...@googlegroups.com
the post will refresh the whole page, ajax will refresh only that field, but i dont know how to break that page, in php codes, they add content types, which is handled by tornado directly, and tornado chat uses jquery, i just want simple example using the basic XHR :(

Andrew Grigorev

unread,
Jul 12, 2013, 3:00:16 PM7/12/13
to python-...@googlegroups.com
AJAX wouldn't refresh anything by itself. It is just about how to execute HTTP request from JavaScript, and get its result in the JavaScript, without need to reload current web page. If you interested, you can find complete XMLHttpRequest documentation here - http://www.w3.org/TR/XMLHttpRequest/.

12.07.2013 22:52, aliane abdelouahab пишет:

aliane abdelouahab

unread,
Jul 12, 2013, 4:06:21 PM7/12/13
to python-...@googlegroups.com
but how do tornado understand it, what i want is just a hello world version ajax (write something and seeks in a list if it exists or not), this will be my bootstrap.

aliane abdelouahab

unread,
Jul 12, 2013, 5:05:47 PM7/12/13
to python-...@googlegroups.com
it seems that i finally get the idea, when i found the  'server' it doesent mean the webserver (software) but they mean the machine itself, just tried this code, and it worked without the need or tornado? tornado will only serve the files and has no work about treating the content?
here is the code:

<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('test').innerHTML=xmlhttp.response-Text;
}
</script>
</head>
<body>
<div id="test">
<h2>Click to let AJAX change this text</h2>
</div>
<button type="button" onclick="loadXMLDoc('test1.txt')">Click Me</button>
<button type="button" onclick="loadXMLDoc('test2.txt')">Click Me</button>
</body>
</html>

Andrew Grigorev

unread,
Jul 12, 2013, 5:26:57 PM7/12/13
to python-...@googlegroups.com
yes

13.07.2013 01:05, aliane abdelouahab пишет:

aliane abdelouahab

unread,
Jul 12, 2013, 5:37:30 PM7/12/13
to python-...@googlegroups.com
so i just place my url in the URL and it will send only that fragment to the server without sending the whole html?

aliane abdelouahab

unread,
Jul 12, 2013, 5:47:50 PM7/12/13
to python-...@googlegroups.com
here is the full example:

ajax.html

<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('test').innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<div id="test">
<h2>Click to let AJAX change this text</h2>
</div>
<button type="button" onclick="loadXMLDoc('/aja')">Click Me</button>
<button type="button" onclick="loadXMLDoc('/ajb')">Click Me</button>
</body>
</html>

handlers.py

class Ajax(BaseHandler):
    def get(self):
        self.render("ajax.html")
        
class Aja(BaseHandler):
    @tornado.web.authenticated
    @tornado.web.asynchronous
    @tornado.gen.engine
    def get(self):
        self.write(str(range(1, 10)))
        self.finish()

class Ajb(BaseHandler):
    @tornado.web.authenticated
    @tornado.web.asynchronous
    @tornado.gen.engine
    def get(self):
        self.write(str(range(10, 20)))
        self.finish()

of course, the urls:

(r"/ajax", handlers.Ajax),
    (r"/aja", handlers.Aja),
    (r"/ajb", handlers.Ajb),

thank you again :)
Reply all
Reply to author
Forward
0 new messages