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

最新推荐文章于 2022-12-12 23:22:06 发布
最新推荐文章于 2022-12-12 23:22:06 发布
阅读量233 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/byeno/p/6237229.html
版权

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.οnlοad=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" οnchange="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" οnchange="showValue2(this)">
                    <option>44</option>
                    <option>47</option>
                    <option>50</option>
                </select>
            </td>
            <td>
                <button type="button" class="search_btn" οnclick="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>

 

转载于:https://www.cnblogs.com/byeno/p/6237229.html

weixin_30641465
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax中创建兼容多浏览器的 XMLHttpRequest 对象方法
12-13 189
var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件，它表示还没有创建 XMLHttpRequest 对象。 function CreateXMLHttp(){ try{ xmlhttp = new XMLHttpRequest(); //尝试创建 XMLHttpRequest 对象，除 ...
Ajax如何解决XMLHttpRequest在IE6下的兼容问题
23号员工的博客
02-27 362
//1 创建Ajax对象 if (XMLHttpRequest) { var oAjax = new XMLHttpRequest(); } else { //解决IE6兼容 var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //alert(XMLHttpRequest); ---IE6报错 //alert(...
IE10中XMLHTTPRequest的幕后故事
Samuel Zhang的专栏
05-18 1109
在IE10问世之前，收到过很多开发者的批评，说IE版本升级如此勤快，但是作为HTML 5的核心之一，XMLHTTPRequest组件，却仅仅支持W3C老旧的规范而不思进取。其原因么，正如Eric Lawrence在COMET Streaming in Internet Explorer一问中指出的，IE中的XMLHTTPRequest是MSXML里面的XMLHTTP的的简单封装而已，并非原生。
XMLHttpRequest 实现ajax发送请求
MY BLOG
12-12 440
说明：当前请求的五种状态值，一般在事件函数 onreadystatechange 中作为条件判断，以下是五种状态值及对应说明。说明: 监听属性 xhr.readyState ，在该值发生改变后触发并执行事件函数；说明: 监听请求延迟未完成事件，触发后执行事件函数。注意: 当前请求为同步请求时，使用该属性会抛异常。说明: 监听数据传输进行中事件，触发后执行事件函数。说明: 监听请求终止事件，触发后执行事件函数。说明: 监听请求失败事件，触发后执行事件函数。说明: 监听请求成功事件，触发后执行事件函数。
XMLHttpRequest 及其open()的用法
热门推荐
小木木的开发日常
02-21 1万+
XMLHttpRequest 对象用于在后台与服务器交换数据,它能够 在不重新加载页面的情况下更新网页；在页面已加载后从服务器请求数据；在页面已加载后从服务器接收数据；在后台向服务器发送数据。 XMLHttpRequest.open()语法 open(method, url, async, username, password) 各参数的解析： method参数是用于请求的 H
javascript一个无懈可击的实例化XMLHttpRequest的方法
12-09
3. 使用`request.open`方法初始化一个请求。在这个例子中，我们使用了GET方法，URL是`file.doc`，`true`参数表示请求是异步的。 4. 最后，使用`request.send(null)`发送请求。对于GET请求，`send`方法的参数通常是`...
基于Ajax XmlHttpRequest技术的通信实例及调试.pdf
最新发布
01-03
以密码校验为例，一个简单的Ajax应用可能包含HTML页面用于用户输入，JavaScript脚本来处理Ajax请求和响应，以及服务器端的PHP或其他后端语言用于验证数据。例如，JavaScript可以通过创建XmlHttpRequest对象，发送...
ajax 三种实现方法实例代码
09-01
在给出的实例中，`prototypeAjax`函数创建了一个Ajax.Request对象，指定了请求的URL、提交的表单数据、请求方式（POST）以及响应后的回调函数`pressResponse`。表单数据通过`Form.serialize("parameters")`获取，...
AJAX在不同浏览器中XMLHttpRequest对象的生成示例
12-01
1. **AJAX请求的生命周期**：一个完整的AJAX请求包括初始化、打开连接、发送请求、接收响应和处理结果等阶段。这些阶段可以通过XMLHttpRequest对象的属性和方法控制，例如`open()`、`send()`和`onreadystatechange`...
ajax实例，兼容各个主流浏览器
05-30
以上就是关于“Ajax实例，兼容各个主流浏览器”的详细解析，包括Ajax的基本原理、跨浏览器的实现策略以及局部刷新的应用示例。这个实例旨在提供一种在所有主流浏览器中都能正常运行的Ajax局部刷新解决方案。
XMLHttpRequest的兼容性
你想要的都有
10-25 3801
var request; if(Windows.XMLHttpRequest) {     request=new XMLHttpRequest(); } else {   request=new ActiveXObject("Microsoft.XMLHTTP"); //IE 5,IE6 }
Ajax 中的xmlHttpRequest.open对url的处理
行天之路
10-06 1万+
xmlHttpRequest.open("GET", url, true)；中的url的要求：当当前页面的url 为http://localhost:8080/SpringControllerResponses/requestResponse/onlyJsp时，如果open 函数中的url 为采用相对url是”onlyBoolean” 则Ajax 所发生的完整的url 为：http
IE8不支持jquery , xmlhttp.open() IE8 拒绝访问
jiaolong6688的博客
06-15 1996
 IE8不支持jquery，甚至于jquery1.4也不支持，所以ajax调用方式，如下面的方法，   $(function(){           $.ajax({                  type: "GET",               url: "http://192.168.100.152:8005/api/querylastdate/GetByString/Conne...
异步请求详解：AJAX基础与XMLHttpRequest实例
`或在IE中使用特定构造函数创建一个XMLHttpRequest对象。这是请求的起点，对象用于处理后续的网络请求。 2. **创建请求**： - 使用`open()`方法初始化请求，需要提供三个参数：请求类型（如GET、POST）、URL以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值