Wednesday, December 8, 2010

To Celebrate Birthday In Bangalore

Python and Ajax with JSON

Hi everyone!
In this post I will show you how to interact with a browser the web applications developed using the python mod_python apache.
Iteration to be asynchronous with Ajax and then "clean." The exchange of data takes advantage of JSON objects pattern is supported natively by python that javascript.

In groped to explain one possible use to modify the application discussed in previous post in which I spoke of websites dedicated to the python. Post that I suggest you read, understand and test otherwise you would not understand the changes that we make because some parts of the code by referring only to omit the file.
Before I stressed because pure in this case we will not use javascript frameworks like jQuery or something written in javascript but Manella that I actually plagiarized from the network) I am not good at javascript as I reach there very few times, but as I said a professor of computer science at higher ".. if you have the basics to learn a new language just a handbook of language, a vocabulary of English, and two weeks ...." the two weeks I have reduced the google: D

However, the amendment is to make sort the table containing the list of dedications on the type of information held in the name of the column and quini just clicking on it all from Ajax and JSON.

The operating mechanism is as follows:
1. The user clicks on the column name to sort such as Nickname.
2. Through a service called Ajax python module index.py
3. index.py incorporates data from the db sorted by nickname
4. returns data to the Ajax call.
5. received the data in javascript empties and fills the table.

To do this we need to make changes to the model view and the controller (which if you read the post above that I inicio know what I'm talking about).

Model:
remember if the file had DedicaDAO.py findAll method that dealt with recovery of all objects from the db type devotes only ever retrieve data sorted by Date Added, good fit for our purpose we must make it parametric. Then replace the previous one with the following piece of code:



do not need to explain what was the real change?

To generate JSON objects to be passed in response we will use the python module 'json', which is already present in its base installation. In particular userme a function (dumps) but it only accepts lists and dictionaries (which, as you will see the python syntax for these structures is almost identical to JSON).

fact, if we want to be a JSON object of dedication that's how it's done:
{"message": "Hello World !!!!!!!!!!!", "Nickname": "Piergiuseppe", "id": 20, "dataInserimento": "11/21/2010 18:12:17", "email": "piergiuseppe82@yahoo.it"}

That there remember? A Python dictionary.

close the brackets and add the method of similarity toDict () class Dedica.py:



as you can see the date is converted to a string because otherwise we will pass the various bodies devoted to the method of the form json python going wrong. This is because it does not support datetime objects

Controller
As for the controller that we have to add our file index.py only the new method will be used to provide the belongings JSON Ajax call, here is the metdo:

seize the method as a parameter as you can see the sort which by default is "dataInserimento" then loads the data from the model with findAll of a dao (line 5). Received the dedications is preparing a new empty list and the office with a dictionary devoted for each (rows 8 and 9) and returns the list of objects json transforming the list containing the dictionaries with education json.dumps () (line 10)

How do you see it's easy to create JSON objects in python.

Actually you can already test the service. Indeed we do so confident that the server side of comunizione Ajax is tt ok. To do that deployed to the changed files on apache and call the following url:

http://localhost/PyGuestbook/index.py/ajax_dediche

the result in browser should look like this (of course if you have already entered the dedications db the previous version of the application):


 [{"message": "Hello World !!!!!!!!!!!"," nickname ":" Piergiuseppe "," id ": 20," dataInserimento "" 21/11/2010 18:12:17 "," email ":" piergiuseppe82@yahoo.it "}, {" message ":" Hello !!!!!!!!!!!!!!" "nickname": "Piergiuseppe82", "id": 21, "dataInserimento" "21/11/2010 18:12:46", "email": "piergiuseppe82@yahoo.it"}, {"message": "ssssssssssssssssssssssss", "nickname": "aldo", "id": 22 " dataInserimento ":" 08/12/2010 19:14:34 "," email ":" aldo@mail.it "}, {" message ":" zzzzzzzzzzzzzzzzzzzzzzzzzzz "," nickname ":" frank "," id ": 23, "dataInserimento": "12/08/2010 19:56:05", "email": "franco@mail.it"}] 
 
 That is a list of JSON objects. 
 
  View  
 We said that when the user clicks on a column should trigger an ajax call to get the json objects right? So here is how it should psp be changed to display a list of dedications; listaDediche.psp: 
    
 


The content is as above plus we added the tag "thead" and "tbody" identifying this' last with the id "tbDedicheBody. We will use this solution only to repopulate the body of the table through javascript. Obviously we've made the column names of the links which point to the javascript function that deals with the ajax call and re-stocking. Let's look at a case closely: As

see is a link that points to the service that we included in the link controller which is passed to the javascript function "CaricaDediche ()" in conjunction with the chosen (in this case, nickname).

JavaScript functions we put them in a file that contains two functions for communication ajax and another dedicated to those populating the table.

js Then create a folder (directory index.py lying in or where you like) and enter the following files:

ajax.js:


the code you see I got it from html.it a post on that board and read to understand what the code does. It provides two functions both cross-browser provides us with a suitable browser XmlHttpRequest object must for ajax calls and text of the constants used to facilitate call handling, the other elements of the DOM by id.

dediche.js:


Even I did this code cloning here and there.
caricaDediche function starts at line 51 and see how He takes as parameters the name of the file to retrieve and urinate. Let's see what the function. After receiving the parameters retrieves the object XmlHttpRequest (r.54) opens the connection (r.62) notatte here that the sort order is passed as a parameter to the url get hanged. After opening the connection to the line 68 starts listening on changes in state of the latter. When you return to the complete and the outcome is positive (r. 71-73) transforms the received text in JSON objects (r.75), and then cleans the body of the table. Then for each json returned it builds the HTML code for the link to edit and delete (r. 79 to 80) and adds the row to the table (r. 81).
Note how you access the attributes of the object or json obj.id obj.messaggio that if you notice are the same names we have given to python dictionary.

Well the last change is to include the javascript file generated from the html nell'heder mod_python header.psp then open the file and add the tag between "head" the following html code:


There remains to deploy and test.


tt I have not explained why the java script is not the purpose of the post .. and as I said is to illustrate a possible use of python to generate JSON objects to use asynchronous calls in client-server via HTTP. However

think now possible to use python framework used for developing Rich Internet applications first of all GWT Google . I know that a little thought to prove I do this pairing. And if something good comes out there the place.

click here if you find the source of the eclipse project

Well I'm done I'm going to drink one (or more) GUINNESS! Next time!!

0 comments:

Post a Comment