实际上，有几种方法可以做到这一点。有些需要比其他更多的开销，有些被认为比其他更好。

没有特别的顺序：

1. 使用AJAX从服务器获取所需的数据。
2. 将数据回显到页面中的某个位置，然后使用Javascript从DOM获取信息。
3. 将数据直接回显到Javascript。

在本文中，我们将研究上述每种方法，并了解每种方法的优缺点以及如何实现它们。

1.使用AJAX从服务器获取所需的数据

这种方法被认为是最佳方法，因为 服务器端脚本和客户端脚本是完全分开的 。

优点

• 更好地分隔各层 -如果明天您停止使用PHP，并希望移至servlet，REST API或某些其他服务，则无需更改很多Javascript代码。
• 更具可读性 -Javascript是Javascript，PHP是PHP。如果不将两者混在一起，则可以在两种语言上获得更具可读性的代码。
• 允许异步数据传输 -从PHP获取信息可能很耗时间/资源。有时，您只是不想等待信息，加载页面以及随时获取信息。
• 不能在标记上直接找到数据 -这意味着标记不会包含任何其他数据，只有Javascript可以看到。

缺点

• 延迟 -AJAX创建一个HTTP请求，并且HTTP请求通过网络承载并具有网络延迟。
• 状态 -通过单独的HTTP请求获取的数据将不包含来自获取HTML文档的HTTP请求的任何信息。您可能需要此信息（例如，如果HTML文档是为响应表单提交而生成的），并且，如果需要，则必须以某种方式进行传递。如果您排除了将数据嵌入页面的能力（如果使用此技术，则必须具有该能力），那么这会将您限制为cookie /会话，这可能会受到竞争条件的影响。

实施实例

使用AJAX，您需要两个页面，一个页面是PHP生成输出的位置，第二个页面是Javascript获取该输出的位置：

get-data.php

echo json_enpre(42); // In the end, you need to **echo** the result.// All data should be _json_enpre()_ d.// You can json_enpre() any value in PHP, arrays, strings,//even objects.

index.php（或任何实际的页面都这样命名）

<!-- snip --><script>    function reqListener () {      console.log(this.responseText);    }    var oReq = new XMLHttpRequest(); // New request object    oReq.onload = function() {        // This is where you handle what to do with the response.        // The actual data is found on this.responseText        alert(this.responseText); // Will alert: 42    };    oReq.open("get", "get-data.php", true);    //         ^ Don't block the rest of the execution.    //Don't wait until the request finishes to    //continue.    oReq.send();</script><!-- snip -->

42

2.将数据回显到页面中的某个位置，然后使用Javascript从DOM获取信息。

这种方法不如AJAX更好，但仍具有其优点。它仍然 比较 PHP和Javascript之间的感觉，有没有直接PHP在Javascript中分离出来。

优点

• 快速 -DOM操作通常很快，因此您可以相对快速地存储和访问许多数据。

缺点

• 潜在的非语义标记 -通常，发生的事情是您使用某种方式

  <input type=hidden>

  来存储信息，因为从中获取信息更加容易

  inputNode.value

  ，但是这样做意味着您在HTML中具有无意义的元素。HTML具有

  <meta>

  用于有关文档的数据的元素，而HTML 5引入

  data-*

  了专门用于可与特定元素相关联的Javascript读取的数据属性。
• 使源代码变脏-PHP 生成的数据直接输出到HTML源代码，这意味着您将获得更大，更集中的HTML源代码。
• 很难获得结构化数据 -结构化数据必须是有效的HTML，否则您必须自己转义和转换字符串。
• 将PHP与您的数据逻辑紧密结合 -因为在演示中使用了PHP，所以您不能将两者完全分开。

实施实例

这样做的想法是创建某种元素，该元素不会显示给用户，但对Javascript可见。

index.php

<!-- snip --><div id="dom-target" >    <?php        $output = "42"; // Again, do some operation, get the output.        echo htmlspecialchars($output);     ?></div><script>    var div = document.getElementById("dom-target");    var myData = div.textContent;</script><!-- snip -->

3.将数据直接回显到Javascript

这可能是最容易理解的。

优点

• 非常容易实现 -只需很少的时间即可实现并理解。
• 不污染源 -变量直接输出到Javascript，因此DOM不受影响。

缺点

• 将PHP与您的数据逻辑紧密结合 -因为在演示中使用了PHP，所以您不能将两者完全分开。

实施实例

实施相对简单：

<!-- snip --><script>    var data = <?php echo json_enpre("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!</script><!-- snip -->