ajax 的基本原理

最新推荐文章于 2024-09-20 16:14:48 发布

chengweng2602

最新推荐文章于 2024-09-20 16:14:48 发布

阅读量51

点赞数

文章标签： json

原文链接：https://my.oschina.net/u/3147332/blog/807034

版权

<!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>

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);
            }
        }

    }
}