一個Ajax的XMLHttpRequest的open方法執行個體(只能相容IE10及以上的瀏覽器)

最後更新：2016-12-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：change publish 瀏覽器 data content function json doctype margin

Ajax的XMLHttpRequest的open方法

<!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;">#f5f1df;}
        .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>
    <script type="text/javascript">
        var yearNum=2016,weekNum=44,opt1,opt2;
        //文檔載入完畢，運行request()函數
 window.onload=function(){
            request();
        };
        //動態擷取輸入框所選年份
 function showValue1(obj){
            var opt_11=obj.options[obj.selectedIndex];
            opt1=opt_11.value;
            yearNum=opt1;
            console.log(opt1);
        }
        //動態擷取輸入框所選周數
 function showValue2(obj){
            var opt_22=obj.options[obj.selectedIndex];
            opt2=opt_22.value;
            weekNum=opt2;
            console.log(opt2);
        }
        //點擊查詢按鈕傳參進request()函數更改傳入的地址參數
 function setDate(a,b){
            yearNum=a;
            weekNum=b;
            request();
        }
        function request(){

            var request = new XMLHttpRequest();
            request.open(‘GET‘, ‘http://lvchuang.f3322.net:88/SiChuanShuiYuanDi/Handler/WeekData.ashx?‘+‘year=‘+yearNum+‘&‘+‘week=‘+weekNum, false);
            request.send(null);

            if (request.status === 200) {
                var acceptText=JSON.parse(request.responseText);
                console.log(acceptText);
                document.getElementById("time_info").innerHTML=acceptText.Year+"年"+" "+"第"+acceptText.Week+"周"+" "+"("+acceptText.PublishTime+"發布"+")";
                document.getElementById("cont_info").innerHTML=acceptText.Detail;
            }
        }
    </script>
</head>

<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>

一個Ajax的XMLHttpRequest的open方法執行個體(只能相容IE10及以上的瀏覽器)

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More