ajax 新闻栏目 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function ()
{
    var obtn = document.getElementById('btn');
    
    obtn.onclick = function ()
    {
        
        ajax('get','new.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].data + '</span>]</li>';
            }
            
            oul.innerHTML = html;
        });
        
        setInterval(function ()
        {
            ajax('get','new.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].data + '</span>]</li>';
                }
                
                oul.innerHTML = html;
            })
        },1000)
    }
    function ajax(method,url,data,success)
    {
        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);
                    }
                }
            }
    }
    
}
</script>
</head>

<body>
<input id="btn" value="提交" type="button">
<ul id="ul1">
    
</ul>
</body>
</html>
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$new = array(
    array('title' => '新闻新闻1','data' => '2014-1-1'),
    array('title' => '新闻新闻2','data' => '2014-2-1'),
    array('title' => '新闻新闻3','data' => '2014-3-1'),
    array('title' => '新闻新闻4','data' => '2014-4-1'),
    array('title' => '新闻新闻5','data' => '2014-5-1'),
    array('title' => '新闻新闻6','data' => '2014-6-1'),
    array('title' => '新闻新闻7','data' => '2014-7-1'),
    
);

echo json_encode($new);

 

posted @ 2015-02-21 16:36  mayufo  阅读(176)  评论(0)    收藏  举报