这里为大家真实演示一下,ajax是如何与web服务器进行通信的:
通过在客户端输入数据,触发ajax方法,向服务器发送请求,服务器接收请求后响应请求,将结果显示在页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{
color:blue;
border:2px solid #aa1;
padding:20px 20px;
text-align:center;
}
</style>
<script>
function Test(str)
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("test").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","https://www.runoob.com/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>在输入框中尝试输入字母 a:</h3>
<p>通过输入数据,触发ajax方法,向服务器端发送请求</p>
<form action="">
输入姓名: <input type="text" id="txt1" onkeyup="Test(this.value)" />
</form>
<p>服务器端返回响应的数据</p>
<p>提示信息: <span id="test"></span></p>
<p><a href="/try/ajax/gethint.php" target="_blank">gethint.php</a></p>
</body>
</html>