ajax与数据库的动态通信

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
        function showCustomer(str) {
            var xmlhttp;
            if (str == "") {
                //当参数str为空时,定义查询信息显示(txtHint)
                document.getElementById("txtHint").innerHTML = "";
                return;
            }
            //此处为了浏览器兼容,判断浏览器是否有XMLHttpRequest对象是否存在,IE6和iE5没有此对象
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                }
            }
            //此处定以get传送数据,getcustomer.asp为页面(写数据库连接查询语句的页面),?q="+str是传参给页面变量q
            xmlhttp.open("GET", "/ajax/getcustomer.asp?q=" + str, true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
   <!--当用户在上面的下拉列表中选择某个客户时,会执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发:-->
    <!--showCustomer() 函数执行以下任务:
    检查是否已选择某个客户
    创建 XMLHttpRequest 对象
    当服务器响应就绪时执行所创建的函数
    把请求发送到服务器上的文件
    请注意我们向 URL 添加了一个参数 q (带有输入域中的内容)-->
    <form action="" style="margin-top:15px;">
        <label>
            请选择一位客户:
            <select name="customers" οnchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
                <option value="APPLE">Apple Computer, Inc.</option>
                <option value="BAIDU ">BAIDU, Inc</option>
                <option value="Canon">Canon USA, Inc.</option>
                <option value="Google">Google, Inc.</option>
                <option value="Nokia">Nokia Corporation</option>
                <option value="SONY">Sony Corporation of America</option>
            </select>
        </label>
    </form>
    <br />
    <!--查询结果在此显示-->
    <div id="txtHint">客户信息将在此处列出 ...</div>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值