HI it works like this in jQuery
$.post('url', {input}, function(data){
});
The javascript will make a web request, same as if you put url in the browser, right ( if it's $.get that is, obviously we cant send post data using the browser url bar, however you could go to the page just without the post data ). Now because it's AJAX anything returned goes into data. It's asynchronous, which means your JS wont wait for the request, for example if you put
$.post('url', {input}, function(data){
});
alert(data.result);
It wont work, for 2 reasons, one is scope ( data is a function input parameter not accessible outside the function ). The other is that the alert will fire before the post completes, even though it is written after the $.post request. Because of this, you have to use the data in the call back function.
Now on PHP side where ever that url is it gets ran just like you went there normally. Essentially there is no difference to the server its AJAX or a browser request. It's just like submitting a form. The interesting things you can do is return your data as JSON. by using the application JSON header and by using json_encode() in PHP. This is essentially JavaScript String Object notation. ( not sure if I remember that right ) but that is what it is.
There is no magic in the request. Most people don't really understand that anything the server returns is only text. Be it a PDF file, a JPG, a webpage, anything its only text. JSON allows you to keep the structure of your data, such as an array. It's a special format of text that JavaScript understands as object and arrays.
I explained this to one of my Junior Developers the other day. That if you set the correct headers you can generate CSS files with PHP, images etc. Because it's all just Text. The web is very simple. You only have get and post for requests and text as a response. That's it for the most part.
Anyway,
Right, so now in PHP ( for a quick example )
header('Content-Type: application/json');
$a = array('one'=>1);
echo json_encode( $a );
With json_encode() it becomes ( this is the response sent back from the server )
'{one:1}'
And in JS on the client side ( inside the $.post callback ) its
data.one;
We can take this data in the callback then you can just use some basic jQuery to replace the values of inputs or content of HTML tags with your returned data.
$('#input').val(data);
$('#htmlElement').text(data); // or data.one - whatever you had in php array keys.
Make sense? Above, we take a PHP array use json_encode(), to make it a JSON string, and then (with the correct header ) we can access that normally in JS using its dot syntax. Remember what I said above about only returning text from the sever, this is why we have to convert it to a JSON string. The dot in JS is like the -> in PHP. You could also use data['one'] which is even more like PHP, but that is technically not the correct way if you know what one is.
The process flow is also simple, just like we only have post get, and text. We only can make requests from the client and responses from the server. So it always goes
Client Request -> Sever Response -> Client receives response.
We cannot for example call the Client from the sever.
Sever Call-> Client receives
This doesn't work without things like NODE.js or a socket server.
For reference ( about json responses )
Returning JSON from a PHP Script
