Mmm lo que pasa es para un ejemplo es muy grande, pero por ejemplo, algo basico, traer un texto y guardarlo en el "backend" (ojo voy a usar prototype):
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ejemplo</title>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<script type="text/javascript">
var TextoPersistente = Class.create({
initialize: function(txt) {
this.texto = txt;
},
getTexto: function() {
return this.texto;
},
setTexto: function( txt ) {
this.texto = txt;
}
});
var Textos;
function modificaTexto() {
Textos.setTexto("Pedro");
$('texto_pers').innerHTML = Textos.getTexto();
}
Event.observe(window, 'load', function() {
Textos = new TextoPersistente('Juan');
$('texto_pers').innerHTML = Textos.getTexto();
$('modbtn').disabled = false;
$('verbtn').disabled = false;
});
</script>
Aqui vemos que tiene Texto: <span id="texto_pers"></span>, ahora hay que modificar el texto de Juan, por Pedro:
<input id="modbtn" type="button" name="boton" value="Modificar" onclick="modificaTexto();" disabled="disabled" />
<input id="verbtn" type="button" name="boton" value="Ver Contenido de Texto" onclick="alert(Textos.getTexto());" disabled="disabled" />
</body>
</html>
Como puedes ver estoy guardando en un atributo de la clase el verdadero valor, así puedo manipularlo, tu debes de hacer lo mismo, crear una clase mas grande que se llame Pedido donde guardes los atributos, luego un metodo draw() que solo se encargue de dibujar los datos de Pedido.
Saludos.
Tema trasladado a AJAX.