HTML5相关知识回顾****************一****************

2018.04.26**********************************************************************author：wills

今天介绍一个H5里面异步加载的使用方法，下面是一个完整的html网页，保存为.html就可以直接用浏览器打开

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="photos">   
        </div>
        <button id="load">加载</button>

        <script type="text/javascript">
            (function(){
                var btn = document.getElementById('load');
                btn.addEventListener('click', function(){               
                    //javascript默认不允许跨域取数据(同源策略)
                    //但是今天绝大多数提供数据接口的服务器都设置了允许跨域取数据
                    //http协议有很多动词，但是浏览器支持两个get获取/post上传
                    //URL - Uniform Resource Locater统一资源定位符
                    //1.创建异步请求对象xhr
                    var xhr = new XMLHttpRequest();
                    //2.异步的从目标服务器获取数据
                    xhr.open('get', 
                    'http://api.tianapi.com/meinv/?key=这个key请自行前往天行数据(https://www.tianapi.com/)注册账号获取&num=10', true);
                    //3.创建回调函数，表示服务器响应后需要干什么
                    xhr.onreadystatechange = function(){
                        if (xhr.readyState == 4 && xhr.status == 200) { 
                            //4.通过服务器获取的数据对页面进行DOM操作实现局部刷新
                            //将获取的json数据字符串解析为json格式数据
                            var obj = JSON.parse(xhr.responseText);
                            //通过newslist获取所有的数据键值对放入mmArray中
                            var mmArray = obj.newslist;
                            //创建一个新的div元素用来放置异步数据获取的图片
                            var div = document.getElementById('photos')
                            for (var i = 0; i < mmArray.length; i++){   
                                //对MMArray遍历，获取相应的图片网址url
                                var img = document.createElement('img');
                                //创建新的图片对象img，并且通过src属性将获取的图片链接url赋给img
                                img.src = mmArray[i].picUrl;
                                img.width = '360';
                                //将图片放置到预先创建的div里面
                                div.appendChild(img);
                            }                           
                        }
                    };
                    xhr.send();
                });
            }());
        </script>
    </body>
</html>

HTML5相关知识回顾一

今天介绍一个H5里面异步加载的使用方法，下面是一个完整的html网页，保存为.html就可以直接用浏览器打开

猜你喜欢