用Ajax实现自动刷新news功能

这是Ajax应用的一个小实例：在页面中自动刷新功能，比如整个新闻页面中某一个小版块的内容，无需刷新整个页面就可以自动更新：

1、首先创建简单的页面元素：

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

2、准备一个php文件get_news.php，将新闻数据放到里面：

<?php
header(\'content-type:text/html;charset="utf-8"\');
error_reporting(0);

$news = array(
	array(\'title\'=>\'范冰冰赞冯小刚比以前更温柔\',\'date\'=>\'20161123\'),
	array(\'title\'=>\'范冰冰赞冯小刚比以前更温柔\',\'date\'=>\'20161123\'),
	array(\'title\'=>\'范冰冰赞冯小刚比以前更温柔\',\'date\'=>\'20161123\'),
	array(\'title\'=>\'范冰冰赞冯小刚比以前更温柔\',\'date\'=>\'20161123\'),
	array(\'title\'=>\'范冰冰赞冯小刚比以前更温柔\',\'date\'=>\'20161123\'),
	array(\'title\'=>\'拉拉看电视风口浪尖何瑞方法\',\'date\'=>\'20161123\'),
	array(\'title\'=>\'拉拉看电视风口浪尖何瑞方法\',\'date\'=>\'20161123\'),
);

echo json_encode($news);

3、方法一：不使用Ajax封装函数，直接用步骤实现：

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

    oBtn.onclick = function(){

        function ajax(){
            var xhr = null;
            try{
                xhr = new XMLHttpRequest();
            }catch(e){
                xhr = new ActiveXObject(\'Microsoft.XMLHTTP\');
            };

            xhr.open(\'get\',\'get_news.php\',true);
            xhr.send();

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if( xhr.status == 200){
                    //    alert(xhr.responseText);
                        var oDate = JSON.parse( xhr.responseText );

                        var oUl = document.getElementById(\'list\');
                        var str = \'\';

                        for(var i=0; i<oDate.length; i++){
                            str += \'<li><a href="#">\'+ oDate[i].title +\'</a>[<span>\'+ oDate[i].date 
　　　　　　　　　　　　　　　　　　　　　　+\'</span>]</li>\'
                        }

                        oUl.innerHTML = str;
                        
                    }else{
                        alert(\'出错了，Error:\' + xhr.status)
                    };
                };
            };

        };

        setInterval(function(){
            ajax();
        },1000);
        
    }

4、还有一个简单点的办法，引入封装的Ajax函数，http://www.cnblogs.com/angelatian/p/6102286.html，然后传入四个参数，注意获取过来的数据需要使用JSON.parse()方法进行解析才能进行后续操var oBtn = document.getElementById(\'btn\') oBtn.onclick = function() {

		
		ajax(\'get\',\'get_news.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);
		
	}