Ajax
****
L'intégration du javascript dans les pages html a permit de rendre le web plus dynamique.
Ainsi il eest devenu possible de rendre visible des éléments de pages sans recharger cette dernière.
Le client web devient avec le javascript de plus en plus lourd et de moins en moins léger.
Ajax (acronyme d'Asynchronous JavaScript and XML) a permit une nouvelle étape: via l'utilisation du javascript
et d'ajax il est devenu possible de poser des questions aux serveurs et de traiter les réponses.
Il est alors possible d'ajouter dans une page sans la recharger des informations provenant du serveur web.
Cette pratique permet:
* des gains dans les échanges (on ne rechareg pas n fois la même page et on échange que des infos utilent)
* un côté dynamique (la page peux changer suivant des paramètres)
Dans la pratique les données échangées avec l'utilisation d'ajax sont de type:
* string
* json
* xml
Le format string n'est pas intérressant car non structuré.
Le choix entre Json et XML est difficile et je n'ai pas trouvé de vrai benchmark indiquant une préférence.
Mon choix ce porte sur le XML car:
* python le supporte (json aussi mais bon)
* utilisation de xslt possible
* traitement et lecture des données plus clair
.. note::
cet article ne traite pas de la partie javascript/jquery
Pour l'ensemble des exempel nous allons utiliser
* un serveur python/bottle
* le framework jquery
::
Dir
|_ test.py
|_static
|_ jquery-1.9.1.min.js
utilisation simple
------------------
Dans cet exemple nous allons simplement via un boutton ajouter un message
dans une page html.
le fichier xml échanger ce présente ainsi
.. figure:: data/20130519_1.png
le programme test.py est le suivant
.. code-block:: python
from bottle import route, run, request, response, static_file
from xml.dom.minidom import getDOMImplementation
import sys
import string
from random import sample
test1_txt="""
Parser du XML avec jQuery
"""
@route('/static/:filename')
def jequery_file(filename):
return static_file(filename, root='./static')
@route('/hello')
def hello():
impl = getDOMImplementation()
newdoc = impl.createDocument(None,"sample",None)
top_element = newdoc.documentElement
att = newdoc.createElement('msg')
txt = newdoc.createTextNode('Hello World!')
att.appendChild(txt)
top_element.appendChild(att)
response.headers['Content-Type'] = 'text/xml'
return newdoc.toxml('iso-8859-15')
@route('/test1')
def test1():
return test1_txt
on obtient donc sur l'adresse http://127.0.0.1:8080/test1 le résultat suivant
.. figure:: data/20130519_2.png
ce qui correspond au html
.. code-block:: html
Parser du XML avec jQuery
après avoir cliquer sur le boutton nous obtenons
.. figure:: data/20130519_3.png
ce qu'il faut noter:
* l'utilisation de jquery
* l'appel en cas de succès à une fonction traitant le xml (il faudrait ajouter la fonction en cas d'echec: error)
* il est possible de traiter l'arbre dom par différente fonction
- $(this).find('tutu')
- $(this).attr('id')
- $(this).text()
- children(), parent(), ...
utilisation avec passage de paramètre
-------------------------------------
le principe est d'envoyer une requête au serveur avec des paramètres pour obtenir un fichier xml du type
.. figure:: data/20130519_4.png
le programme test.py est le suivant
.. code-block:: python
from bottle import route, run, request, response, static_file
from xml.dom.minidom import getDOMImplementation
import sys
import string
from random import sample
pop = string.ascii_letters + string.digits
test2_txt="""
Parser du XML avec jQuery
"""
@route('/static/:filename')
def jequery_file(filename):
return static_file(filename, root='./static')
@route('/test2')
def test2():
return test2_txt
@route('/getpassword', method='POST')
def getpassword():
username = request.forms.get('username')
length = int(request.forms.get('length'))
passwd = ''.join(sample(pop, length))
impl = getDOMImplementation()
newdoc = impl.createDocument(None,"sample",None)
top_element = newdoc.documentElement
att = newdoc.createElement('username')
txt = newdoc.createTextNode(unicode(username,'iso-8859-15'))
att.appendChild(txt)
top_element.appendChild(att)
att = newdoc.createElement('password')
txt = newdoc.createTextNode(passwd)
att.appendChild(txt)
top_element.appendChild(att)
response.headers['Content-Type'] = 'text/xml'
return newdoc.toxml('iso-8859-15')
run(host='localhost', port=8080)
on obtient donc sur l'adresse http://127.0.0.1:8080/test2 le résultat suivant
.. figure:: data/20130519_5.png
ce qui correspond au html
.. code-block:: html
Parser du XML avec jQuery
après avoir cliquer sur le boutton nous obtenons
.. figure:: data/20130519_6.png
ce qu'il faut noter:
* l'utilisation de jquery
* l'utilisation de la méthode post
* utilisation de la fonction serialize qui permet le passage des paramètres
on peut remplacer la fonction serialize par un code du type
.. code-block:: javascript
/* data: $('#target').serialize(), */
data: "username=fred&length=10",
mais cela signifie qu'il faut traiter tout les champs et les exceptions
.. code-block:: javascript
$('#target').submit(function(){
var username = $(this).find("input[name='username']").val();
var length = $(this).find("input[name='length']").val();
$.ajax({
type: "POST",
url: "getpassword",
dataType: "xml",
data: "username="+username+"&length="+length,
success : function(xml) {
var appendHtml = "";
appendHtml += $(xml).find('username').text() +"
";
appendHtml += $(xml).find('password').text() +"
";
$("#result").append(appendHtml);
}});
return false;
});