专栏首页移动大前端JS示例10-ajax的简单使用

JS示例10-ajax的简单使用

一、知识要点

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

二、源码参考

<!DOCTYPE >
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <style>

        </style>
        <script src="ajax.js" type="text/javascript" charset="utf-8"></script>
        <script>
            window.onload = function() {

                var btn1 = document.getElementById('btn1');
                var ul1 = document.getElementById('ul1');

                btn1.onclick = function() {
                    ajax('data.json', function(success) {
                        var result = eval(success); // eval转为JSON对象
                        //                      <li>用户名:张三,密码:123456</li>
                        for(var i = 0; i < result.length; i++) {
                            var oLi = document.createElement('li')
                            oLi.innerHTML = '用户名:' + result[i].user + ",密码:" + result[i].pass;
                            ul1.appendChild(oLi);
                        }
                    }, function(err) {
                        alert(err)
                    })
                }
            }
        </script>
    </head>

    <body>
        <input type="button" name="btn1" id="btn1" value="读取" />
        <ul id="ul1">

        </ul>

    </body>

</html>

ajax封装

function ajax(url, fnSucc, fnFaild) {
    //1.创建Ajax对象
    if (window.XMLHttpRequest) {
        var oAjax = new XMLHttpRequest();
    } else {
        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.连接服务器(打开和服务器的连接)
    oAjax.open('GET', url, true);

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

    //4.接收
    oAjax.onreadystatechange = function () {
        if (oAjax.readyState == 4) {
            if (oAjax.status == 200) {
                //alert('成功了:'+oAjax.responseText);
                fnSucc(oAjax.responseText);
            } else {
                //alert('失败了');
                if (fnFaild) {
                    fnFaild();
                }
            }
        }
    };
}

JSON数据

[{
    user: 'blue',
    pass: '123456'
}, {
    user: '张三',
    pass: '654321'
}, {
    user: '李四',
    pass: '789456'
}, {
    user: '王五',
    pass: '7777'
}]

三、运行效果

image.png

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

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

    专注APP开发
  • JS示例22-通过className查找元素

    专注APP开发
  • js笔记

    1.克隆对象 克隆数组: var country=['中国','美国']; var copyCountry=country.slice(0); 克隆对象: va...

    用户1055830
  • Javascript生成GUID

    <script language="JavaScript" type="text/javascript"> function newGuid() { va...

    菩提树下的杨过
  • 萌新刷题(十三)买卖股票的最佳时机

    题目 假设有一个数组,它的第i个元素是一支给定的股票在第i天的价格。如果你最多只允许完成一次交易(例如,一次买卖股票),设计一个算法来找出最大利润。 样例...

    小歪
  • Python中的整除

    py3study
  • 《JavaScript程序设计》第2课:JS类型系统

    JS类型系统可以分为标准类型和对象类型,进一步标准类型又可以分为原始类型和引用类型,而对象类型又可以分为内置对象类型、普通对象类型、自定义对象类型。 ? 1. ...

    陈树义
  • Blob初探

    简介   Blob在js中意味着二进制大数据。实现该接口的对象有3个属性,分别是type(MIME),size(byte)和 一个切割方法:slice(在大文件...

    欲休
  • 当前深度学习和 SLAM 结合有哪些比较好的论文

    简单介绍几个比较有代表性的工作, 分为以下几类: I. 相机重定位(Relocalization) Deep Learning 和 SLAM 结合的开山之作...

    AI研习社

扫码关注云+社区

领取腾讯云代金券