test.html
<!doctype html>
<html lang='zh'>
<meta charset="utf-8">
<head>
<script>
//自定义函数及参数
function functest(parameter) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 执行代码
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数
xmlhttp.onreadystatechange=function() {
//xmlhttp.readyState==4 && xmlhttp.status==200表示请求完成并且成功返回
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//通过 document.getElementById()调用标签写入Value值。
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
//通过get调用服务器test.php的页面,‘q'为定义的加载到PHP页面的变量
xmlhttp.open("GET","test.php?q="+parameter,true);
xmlhttp.send();
}
</script>
</head>
<body>
<fORM> //每输入一个值调用functest()函数
测试输入: <input type="text" onkeyup="functest(this.value)">
</form>
<p>返回值: <span id="txtHint" style ='color:red'></span></p>
</body>
</html>
test.php
<?php
//从请求URL地址中获取 q 参数
$trans=$_GET["trans"];
//输出返回值
echo "你好,陌生人。";
?>

参考:
[Documenting WEB technologies, including CSS, HTML, and JavaScript](MDN Web Docs (mozilla.org))
总结