pass object from JS to PHP and back

This is something that I don't think can't be done, or can't be done easy.

Think of this, You have an button inside a div in HTML, when you click it, you call a php function via AJAX, I would like to send the element that start the click event(or any element as a parameter) to PHP and BACK to JS again, in a way like serialize() in PHP, to be able to restore the element in JS.

Let me give you a simple example:

PHP:

function ajaxCall(element){
    return element;
}

JS:

callbackFunction(el){
    el.color='red';
}

HTML:

<div id="id_div">
<input type="button" value="click Me" onClick="ajaxCall(this, callbackFunction);" />
</div>

So I thing at 3 methods

method 1. I can give each element in the page an ID. so the call to Ajax would look like this:

ajaxCall(this.id, callbackFunction);

and the callback function would be:

document.getElementById(el).color='red';

This method I think is hard, beacause in a big page is hard to keep track of all ID's.

method 2. I think that using xPath could be done, If i can get the exact path of an element, and in the callback function evaluate that path to reach the element. This method needs some googling, it is just an ideea.

method 3. Modify my AJAX functions, so it retain the element that started the event, and pass it to the callback function as argument when something returns from PHP, so in my AJAX would look like this:

eval(callbackFunction(argumentsFromPhp, element));

and the callback function would be:

callbackFunction(someArgsFromPhp, el){
   el.color='red';
// parse someArgsFromPhp
}

I think that the third option is my choise to start this experiment.

Any of you has a better idea how I can accomplish this ?

Thank you.

EDIT:

The previous example is not complex enougth, I will try a better explanation this time.

PHP:

function phpFunct($age){
   $text='';
   if(!is_numeric($age)){
      $t['alert'] = 'You filled an invalid age !';
      return $t;
   }
   // Can be lots of code ...
   $text.='Your age is '.$age;
   $t['#myDiv'] = $text;
   return $t;
}

JS:

function callback(x){
   for(i in x){
      if(i == 'alert'){
          // Alert if something went wrong.
          alert(x);
      } elseif(){
         // .开发者_如何学Python.. more options, promts, console.log's ...etc
      }else{
         // Simple innerHTML
         $(i).val(x);
      }
   }
}

phpFunct(){
   x_phpFunct($('#age').val(), callback); //call PHP function via AJAX
}

HTML:

<div id="myDiv">
<input type="text" id="age" /><br />
<input type="button" value="getSomethingFromPhp" onCLick="phpFunct();" />
</div>

I would like to be able to do something like this: HTML:

onClick="phpFunct(this.parentNode);"

JS:

phpFunct(el){
   x_phpFunct(el, $('#age').val(), callback);
}

PHP:

phpFunct($el, $age){
    ...
    $t[$el] = 'Your age is '.$age;
    return $t;
}

This can be done if you have an ID for every element, and pass that ID to PHP and back. I know is not "legal" but now my ID are not unique. I use DIV's as wrapers and everithing inside that DIV have unique ID's (is like using DIV's as body, an have a lot of page opened in the same time, many bodyes). And if you reach an element you always know who the parent of that element is.

A lot of javascript libraries use a form of #1. You should really check out one of the many good libraries that are out there to get started: jQuery, prototype, mootools, etc. This problem has been solved before..