开篇(一个Ajax的XMLHttpRequest的open方法实例(只能兼容IE10及以上的浏览器))

2017-04-10 23:27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器通过JS控制输入的地址参数不同获取服务器内容(只能兼容IE10及以上的浏览器)</title>
    <style>
        body {
            font-family: '宋体';
        }

        .wrap {
            width: 95%;
            min-height: 350px;
            margin: 0 auto;
        }

        .title {
            width: 100%;
            font-size: 18px;
            color: #b34810;
            line-height: 37px;
            border-bottom: 2px solid #b34810;
        }

        .search_tab {
            width: 100%;
            height: 70px;
            font-size: 14px;
            color: #b34810;
        }

        .search_tab tr {
            height: 70px;
            line-height: 70px;
        }

        .td_left {
            text-align: right;
        }

        .pub_select {
            width: 60px;
            height: 24px;
            border: 1px solid #999999;
        }

        .search_btn {
            width: 80px;
            height: 30px;
            line-height: 30px;
            border: 0;
            text-align: center;
            color: #000000;
            padding-left: 25px;
            background: url('images/pub_btn_bj_03.jpg') no-repeat 0 0;
        }

        .content_tab {
            width: 100%;
            height: 227px;
            border: 2px solid #d9d7b3;
            text-align: center;
            border-collapse: collapse;
        }

        .content_tab tr td {
            height: 36px;
            line-height: 36px;
            border: 1px solid #d9d7b3;
        }

        .content_tab_tr {
            font-size: 16px;
            font-weight: bold;
            color: #000;
            font-weight: bold;
        }

        .content_tab_tr td {
            border: 0;
        }

        .content_tab {
            height: 160px;
        }

        .tab_foot {
            text-align: right;
            padding-right: 8px;
        }

        #cont_info {
            text-align: left;
            line-height: 25px;
            padding: 5px;
        }
    </style>
<body>
<div class="wrap"><h1 class="title">查询条件</h1>
    <table class="search_tab">
        <tr>
            <td class="td_left" style="width: 20%;">年度:</td>
            <td><select class="pub_select" id="year_select" onchange="showValue1(this)">
                <option>2016</option>
                <option>2015</option>
                <option>2014</option>
            </select></td>
            <td class="td_left">周数:</td>
            <td><select class="pub_select" id="week_select" onchange="showValue2(this)">
                <option>44</option>
                <option>47</option>
                <option>50</option>
            </select></td>
            <td>
                <button type="button" class="search_btn" onclick="setDate(opt1,opt2)">查询</button>
            </td>
        </tr>
    </table>
    <table class="content_tab">
        <tr>
            <td class="content_tab_tr">水质自动检测周报</td>
        </tr>
        <tr>
            <td id="time_info"></td>
        </tr>
        <tr>
            <td id="cont_info"></td>
        </tr>
        <tr>
            <td class="tab_foot">监测总站</td>
        </tr>
    </table>
</div>
</body>
</html>