JavaScript 调用服务器端计算

Question

>** 编辑后 - 最初的问题基本上意味着：**

我正在尝试学习如何将服务器端计算添加到我的 JavaScript 中。

要调用服务器端计算，我认为我需要使用 AJAX 技术。但我仍然不确定我应该对返回值进行哪种形式的数据交换？

** 几个月后添加： **

答案是：需要网页/路线。一个(称为"a"(与用户交互，另一个(称为"b"(执行计算。a 通过 ajax 请求 (XmlHttpRequest( 调用 b。b 执行计算并输出一个 JSON 对象。a 读取 JSON 对象并相应地更新其 DOM 以输出结果。

Answer 1

一个伪代码示例，处理更新和插入而不重新加载整个内容。

var number1 = document.getElementById('number1');
var number2 = document.getElementById('number2');
var modifiedExample = document.getElementById('modifiedExample');
var insertedExample = document.getElementById('insertedExample');
var ajaxHandle;
function something() {
  //I use timeout instead of AJAX, since i dont actually have a server to poll but it should be pretty interchangeable
  clearTimeout(ajaxHandle);
  var n1 = parseInt(number1.value, 10);
  var n2 = parseInt(number2.value, 10);
  ajaxHandle = setTimeout(function() {
    modifiedExample.value = n1 + n2;
    insertedExample.appendChild(document.createElement("li")).innerHTML = n1 + n2;
  }, 100 + 500 * Math.random());
}

<form>
  Number 1: <input type="number" value="0" id="number1" onchange="something()" /><br/>
  Number 2: <input type="number" value="0" id="number2" onchange="something()" /><br/>
  Result: <input type="number" value="0" id="modifiedExample" readonly/>
</form>
<ul id="insertedExample">
  <li>Results are inserted here</li>
</ul>