Ajax和Linux

最新推荐文章于 2021-08-05 16:58:33 发布

北辰0518

最新推荐文章于 2021-08-05 16:58:33 发布

阅读量721

点赞数

本文链接：https://blog.csdn.net/beichen0518/article/details/79870477

版权

"""
js中有改上下文的语法
with(document) {
可以直接写这个函数
 getElementById
}
模拟点鼠标
$('')trigger('click')模拟鼠标点击
看看计算机文化和计算机英语这两本书
"""

Ajax-Asynchronous JavaScript and XML

HTML - Hyper-Text Markup Language
XML - eXtensible Markup Language
同步 - 阻塞
异步 - 非阻塞

//用原生的js来实现Ajax
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="photos">

        </div>
        <button id="load">加载</button>
        <script>
            //JavaScript默认不允许跨域取数据（同源策略）
            //但是今天的绝大多数提供数据接口的服务器都设置了允许跨域取数据
            //HTTP- Hyper-Text Transfer Protocol 超文本传输协议
            // HTTP协议的动词 - GET/ POST 浏览器只支持这两个动词
            // URL - Uniform Resource Locator
            (function () {
                var btn = document.getElementById('load');
                btn.addEventListener('click', function() {
                    var xhr = new XMLHttpRequest();                 
                    xhr.open('get',URL,true);
                //时间回调，服务器响应了你的访问
                xhr.onreadystatechange = function() {
                    //4表示服务器给响应完成
                    if (xhr.readyState == 4) {
                        //200是状态码，只有200是表示正确的返回了数据
                        if (xhr.status == 200) {
                            //给一个文本还原成对象
                            //通过从服务器获取的数据对页面进行DOM操作实现局部刷新
                            var obj = JSON.parse(xhr.responseText);

                            var myArray = obj.newslist;
                            var div = document.getElementById('photos');
                            for (var i = 0; i < myArray.length; i += 1) {
                                var img = document.createElement('img')
                                img.src = myArray[i].picUrl;
                                img.width = '360';
                                div.appendChild(img);
                            }
                        }
                    }
                }
                xhr.send();
                })
            } ());
        </script>
    </body>
</html>

下面使用jQuery来实现上面的功能

$(function() {
                var urlstr = 'http://api.tianapi.com/meinv/?key=yourkey&num=10'
                $('#load').on('click', function() {

                    //$.get $.post $.ajax 
                    //这个只能拿json，只能是get请求，局限性比较强
                    /*$.getJSON(url, function(obj) {
                        var mmArray = obj.newslist;
                        for (var i = 0; i < mmArray.length; i += 1) {
                            $('#photos').append($('<img>').attr('src', mmArray[i].picUrl).width(300));
                        }

                    })*/
                    //最强大最灵活
                    $.ajax({url:urlstr, type:'get', dataType:'json', success:function(obj) {
                        var mmArray = obj.newslist;
                        for (var i = 0; i < mmArray.length; i += 1) {
                            $('#photos').append($('<img>').attr('src', mmArray[i].picUrl).width(300));
                        }
                    }
                    })
                });
            });