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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个Ajax的XMLHttpRequest的open方法实例(只能兼容IE10及以上的浏览器)相关的知识,希望对你有一定的参考价值。

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及以上的浏览器)的主要内容,如果未能解决你的问题,请参考以下文章

XMLHttpRequest (Ajax) 错误

AJAX以及XMLHttpRequest

ajax之XMLHttpRequest常用方法属性

使用 XMLHttpRequest实现Ajax

Ajax 创建 XMLHttpRequest 对象 | AJAX 教程

用XMLHttpRequest制作一个简易ajax