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