Asp+Ajax Demo演示
開發環境：I5-2450M+Win7 SP1 amd64
Mysql設置參考上一節《html+asp+mysql Demo演示
》https://blog.csdn.net/xiaoshixiu/article/details/103074688
（一）Coding
1．設計思路
爲了不每次更新數據時都去重新載入頁面，實現最少的數據交互，可以通過Ajax來實現。Ajax的主要作用是通過異步實現局部更新。異步主要通過事件隊列實現，局部更新通過JS更改DOM屬性實現。
（1）test_asp_ajax.html
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function onSubmited()
{
console.log("onsubmit");
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xml=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("age").innerHTML=xmlhttp.responseText;
}
}
var name=document.getElementById("inputName").value;
xmlhttp.open("GET","asp_direct_ret_value.asp?name="+name,true);
xmlhttp.send();
}
</script>
<p>name</p>
<input type="text" name="name" id="inputName">
<br>
<button type="button" style="min-width: 40px;min-height: 20px;" onclick="onSubmited()">submit</button>
<div>
<p>Age:</p>
<div id="age"></div>
</div>
</body>
</html>
頁面效果：
（2）asp_direct_ret_value.asp
這裏的asp沒有返回html，而是直接返回value值，其實就是相當於一個CGI
<%
set conn=Server.Createobject("adodb.Connection")
str="dsn=mysqldatabase;Driver={mysql driver};server=127.0.0.1;uid=xiaoshixiu;pwd=xiao8193;database=test"
conn.open(str)
set age=conn.execute("select age from people where name='" & Request.QueryString("name") & "'")
response.Write(age("age"))
%>
（3）輸入xiaoming後能看到直接在div中插入了value值
補充知識：
1、ajax實現的關鍵是XmlHttpRequest,常常簡寫爲XHR。