这是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);

	}

用Ajax实现自动刷新news功能的更多相关文章

  1. ajax+jsp自动刷新

    通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象, JavaScript 可在不重载页面的情况与 Web ...

  2. SpringCloud 详解配置刷新的原理 使用jasypt自动加解密后 无法使用 springcloud 中的自动刷新/refresh功能

    之所以会查找这篇文章,是因为要解决这样一个问题: 当我使用了jasypt进行配置文件加解密后,如果再使用refresh 去刷新配置,则自动加解密会失效. 原因分析:刷新不是我之前想象的直接调用conf ...

  3. ajax请求自动刷新页面

    ajax是异步请求技术,可以实现页面的局部刷新.但是今天写代码的时候发现每次ajax之后都会发生整个页面的刷新,最后发现这是因为触发ajax事件的input标签的type设置为了submit,所以会产 ...

  4. SQL实现类似于自动刷新数据的功能

    有时需要在SQL中,定时刷新某张表,比如说是要定时查询某张表的行数,通常做法就是手动的按F5去执行来刷新数据.但是如果这个定时查询历时较长,10分钟,或半小时,手动的话肯定是要崩溃了.貌似SQL没有像 ...

  5. 更为简单的Ctrl+S自动刷新浏览器工具-LinrF5

    一款自动刷新浏览器的小工具,它通过监听用户的按键,如果在键盘按下 Ctrl+S ,则自动刷新浏览器,操作十分简单,前端开发必备神器,快速提升工作效率,支持IE.火狐以及最新版的chrome33.之前我 ...

  6. Windows Phone 8 LongListSelector实现下拉自动刷新列表

    LongListSelector是一个加强版的列表控件,它可以实现分组的列表,如系统人脉列表的交互效果就可以利用LongListSelector控件去实现,同时LongListSelector也一样可 ...

  7. BrowserSync，调试利器--自动刷新(转

    ---恢复内容开始--- 请想象这样一个场面:你开着两个显示器,一边是IDE里的代码,另一边是浏览器里的你正在开发的应用.此时桌上还放着你的手机,手机里也是这个开发中的应用.然后,你新写了一小段代码, ...

  8. flask-script实现自动刷新页面调试

    本文flask==1.0.2 1.导入extension包 from flask_script import Manager 2.使用manager管理工具 app = Flask(__name__) ...

  9. 自动保存草稿 asp+ajax自动存稿功能详解（转自影子）

    自动保存草稿功能的原理 我们都知道网页是一种无状态的,每次都需要请求,响应,当一次请求完成后就与服务器断开连接了,所以我们不能像网页一样实现实时的交互功能,但是为了满足更多的需求一个比较无敌的程序员还 ...

随机推荐

  1. mongodb学习(一)

    重点是踏出第一步: 1. 各种资料集合,mongodb的介绍,安装,破解...内容大同小异... http://www.cnblogs.com/kuochin/p/3599630.html;http: ...

  2. js执行js字符串函数的方法

    <script> var jsText = 'return function(){alert(1+1)}' var jscode = new Function(jsText)(); jsc ...

  3. 转载自前端开发：CSS设置滚动条样式

    浏览器默认的滚动条样子太过屌丝了,得自己动手整整.记得IE浏览器有几个设置滚条的样式,不过比较鸡肋,只能设置颜色之类的,而且webkit下面也不支持.无意间看到网易邮箱的滚动条样子很好看,一开始以为是 ...

  4. Django with uWSGI and nginx

    Reference:http://uwsgi-docs.readthedocs.org/en/latest/tutorials/Django_and_nginx.html Setting up Dja ...

  5. python中使用urllib2伪造HTTP报头的2个方法

    在采集网页信息的时候,经常需要伪造报头来实现采集脚本的有效执行 下面,我们将使用urllib2的header部分伪造报头来实现采集信息 方法1. ? 1 2 3 4 5 6 7 8 9 10 11 1 ...

  6. HNU 13073 Ternarian Weights 解题报告

    本题大意: 用天平对一物品进行称重,现有重量不同的砝码,砝码的重量分别为:1,3,9,27,..,3^n.(n<20) 天平的右侧放砝码,左侧放物品或物品和砝码,使得左右两边的重量相等. 现有一 ...

  7. Vim 第一天

    记得第一次接触vi编辑器,好像是在海尔的机房吧,那是时候还是没有毕业的小菜鸟一只(PS:现在也是菜鸟),记得是测试一个云存储的产品.看着他们用vi编辑器,当时也没有感觉有什么(现在也没感觉……),只是 ...

  8. 解析STL中典型的内存分配

    1 vector 在C++中使用vector应该是非常频繁的,但是你是否知道vector在计算内存分配是如何么? 在c++中vector是非常类似数组,但是他比数组更加灵活,这就表现在他的大小是可以自 ...

  9. Raphael的text及对齐方式

    Raphael的text及对齐方式 <%@ page language="java" contentType="text/html; charset=UTF-8&q ...

  10. Docker环境中部署OwnCloud 9.0

    整体思路: 1.官方获取mysql.php+apache镜像: 2.基于php+apache,创建OwnCloud镜像: 3.启动mysql镜像: 4.启动OwnCloud镜像,链接mysql镜像,访 ...