专栏首页移动大前端JS示例11-ajax对象(未封装请求)

JS示例11-ajax对象(未封装请求)

一、知识要点

1、ajax对象(XMLHttpRequest和ActiveXObject) 2、如何兼容IE6浏览器

二、源码参考

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>未封装请求</title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn1');
            var div1 = document.getElementById('div1');

            oBtn.onclick = function () {
                //1.创建Ajax对象
                if (window.XMLHttpRequest) { // 非IE6(undefinded)
                    var oAjax = new XMLHttpRequest();
                } else { // IE6
                    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
                }

                //2.连接服务器
                //open(方法, 文件名, 异步传输)
                oAjax.open('GET', 'a.txt', true); // 读取a.txt

                //3.发送请求
                oAjax.send();

                //4.接收返回
                oAjax.onreadystatechange = function () {
                    //oAjax.readyState  //浏览器和服务器,进行到哪一步了
                    if (oAjax.readyState == 4) //读取完成
                    {
                        if (oAjax.status == 200) //成功
                        {
                            div1.innerHTML = oAjax.responseText;
                        } else {
                            alert('失败:' + oAjax.status);
                        }
                    }
                };
            };
        };
    </script>
</head>

<body>
    <input id="btn1" type="button" value="读取" />
    <div id='div1'></div>
</body>

</html>

三、运行效果

image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS示例12-ajax请求封装

    专注APP开发
  • JS示例10-ajax的简单使用

    1、GET请求 2、eval的使用(读取JSON) 3、创建元素document.createElement('li') 4、innerHTML的使用

    专注APP开发
  • JS示例05-style行间样式和class属性样式

    1、行间样式优先级高于class属性样式(设置过行间样式后,再设置属性样式则无效) 2、对同一个元素只采用一种属性控制方式(要不是行间样式,要不是class样...

    专注APP开发
  • JS示例12-ajax请求封装

    专注APP开发
  • 如何封装属于自己的ajax

    如何封装属于自己的ajax?小编带你探探路。。 // 1准备一个电话 准备ajax // 2 拨号 建立 建立连接 (跟服务器) // 3 发送 ...

    企鹅号小编
  • 学会WCF之试错法——数据传输

    服务契约 [ServiceContract] public interface IService { [OperationCon...

    甜橙很酸
  • JavaScript学习笔记019-原生js运动框架0时间运动框架

    Mr. 柳上原
  • Javascript中的局部变量、全局变量的详解与var、let的使用区别

    Javascript中的变量定义方式有以下三种方式: 1、直接定义变量,var与let均不写;

    code随笔
  • 作为程序员,近几年我都用过哪些优质的开源软件?

    作为 GitHubDaily 的运营者,过去几年我接触到了非常多优秀的开源软件,今天就借着这个机会,跟大家分享一下,那些我一直在使用的开源软件吧!

    GitHubDaily
  • java的枚举enum根据code获取name等

    DencyCheng

扫码关注云+社区

领取腾讯云代金券