AJAX教程系列五：异步数据获取与定时器

最新推荐文章于 2022-10-13 11:22:55 发布

_Star_

最新推荐文章于 2022-10-13 11:22:55 发布

阅读量621

点赞数

分类专栏： AJAX 文章标签：异步 ajax

AJAX 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload = function() {

    var oBtn = document.getElementById('btn');


    oBtn.onclick = function() {

        /*ajax({
            url :   'getNews.php',
            success : function(data) {
                //...
            }
        });*/

        ajax('get','getNews.php','',function(data) {
            var data = JSON.parse( data );

            var oUl = document.getElementById('ul1');
            var html = '';
            for (var i=0; i<data.length; i++) {
                html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
            }
            oUl.innerHTML = html;
        });

        setInterval(function() {
            ajax('get','getNews.php','',function(data) {
                var data = JSON.parse( data );

                var oUl = document.getElementById('ul1');
                var html = '';
                for (var i=0; i<data.length; i++) {
                    html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
                }
                oUl.innerHTML = html;
            });
        }, 1000);

    }
}
</script>
</head>

<body>
    <input type="button" value="按钮" id="btn" />
    <ul id="ul1"></ul>
</body>
</html>

ajax.js

function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    if (method == 'get' && data) {
        url += '?' + data;
    }

    xhr.open(method,url,true);
    if (method == 'get') {
        xhr.send();
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }

    xhr.onreadystatechange = function() {

        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                success && success(xhr.responseText);
            } else {
                alert('出错了,Err：' + xhr.status);
            }
        }

    }
}

_Star_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX教程系列五：异步数据获取与定时器

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script src="ajax.js"></script><script>window.onload = function() { var oBtn
复制链接

扫一扫