客户端脚本中的服务器端变量

Question

I had to render a chart using javascripts. But the data for the chart is in the server. After googling I found out that this can be done by using server-side scrpting languages like php and client-side languages javascript or jquery.

var php_data= $.parseJSON('<?php echo json_encode($chart_data);  ?>');

The above code is working perfectly and I can get the data in server to the client side.

But I'm curious that how this can be done because we are reading server-side variables in client-side and we are not using AJAX here. This is really confusing because php code is running in the server and javascript is running in the client. Does anyone know the theory behind this? How a javascript can access to the server?

If we can access to any variable in php script with a javascript we'll have to explicitly take some actions to confirm the security of the php script.

Answer 1

It's because of the order in which it executes. The server-side script executes first (on the server) and generates the outout sent to the client. You can therefore dynamically generate part of all of your client side scripts on the server using the server-side code. This is essentially what you are doing here.

Going the other way - passing data from the slient side back to the server side requires AJAX or similar, because the server-side script has already run when the client-side script runs.

In terms of security, the only server-side variables that are available in javascript are those you explicitely render as javascript variables/objects. (Or those you expose via an API/AJAX call of course). In this case you exposed the $chart_data variable in javascript by saying:

var php_data= $.parseJSON('<?php echo json_encode($chart_data);  ?>');

If you look at the source of the page generated, it won't mention $chart_data , it will be something like

var php_data= $.parseJSON('[{"a": "1"}, {"b": "2"}]');

You haven't given access to the PHP variable, but simply printed the contents of it (at this point - any changes made after this point to $chart_data in your PHP script will not be reflected in the version in javascript) as a javascript variable.

Answer 2

RESTFul API's are what your looking for. The example provided uses the Zend PHP Framework but you can really do the same using a simple router and exporting to JSON for the JS to parse.

One a side note I would recommend you possibly move to a newer method of DOM rendering using client side routing with a RESTFul API & XMLHttpRequests; some great frameworks for quick prototyping are angular, knockout, backbone etc .

The upside is that the client is handling the page rendering vs. the server which leaves the server's memory consumption for more important tasks.