Ajax实例一：利用服务器计算

HTML代码

//输入两个数 <input id="number1" type="number"> <input id="number2" type="number"> //查询按钮 <button onclick="askServer()">Ask the Server</button> //返回结果显示区 <p id="result"></p>

JavaScript代码

//创建一个XMLHttpRequest对象实例 var req = new XMLHttpRequest(); function askServer() { //获取两个值 var number1 = document.getElementById("number1").value; var number2 = document.getElementById("number2").value; //构建查询字符串 var dataToSend = "?number1=" + number1 + "&number2=" + number2; //发送请求 req.open("GET", "WebCalculator.php" + dataToSend, true); //监控程序等待远程主机做出回应 req.onreadystatechange = handleServerResponse; req.send(); document.getElementById("result").innerHTML = "The request has been sent."; } function handleServerResponse() { if ((req.readyState == 4) && (req.status == 200))//数据已经接收完毕且正常 { var result = req.responseText;//把响应文本赋值给result document.getElementById("result").innerHTML = "The answer is: " + result; } }

服务器端代码:WebCalculator.php

<?php $num1 = $_GET['number1']; $num2 = $_GET['number2']; echo ($num1 + $num2); ?>

转载于:https://www.cnblogs.com/YeChing/p/6339331.html

相关资源：JAVA上百实例源码以及开源项目