这是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. CastleWindsor 使用说明

    1.引用DLL Castle.Core.dll  和Castle.Windsor.dll 2. 引用命名空间 using Castle.MicroKernel.Resolvers.Specialize ...

  2. iOS MVVM 参考

    实践干货!猿题库 iOS 客户端架构设计 ReactiveCocoa入门教程 ReactiveCocoa入门教程——第二部 谈谈MVVM和MVC,使用swift集成RFP框架(ReactiveCoco ...

  3. 一段神奇的代码-关于PHP字符变量奇怪现象的解释

    首先神奇的PHP是支持字符数据类型的,有同学就写了这样一段代码: for ($c = 'a'; $c <= 'z'; $c++) { echo $c . ' '; } 然而结果却不是他想要的a到 ...

  4. 八 Appium常用方法介绍

    由于appium是扩展了Webdriver协议,所以可以使用webdriver提供的方法,比如在处理webview页面,完全可以使用webdriver中的方法.当然在原生应用中,也可以使用. 1.元素 ...

  5. permutation test

  6. PHP导入导出Excel方法

    看到这篇文章的时候,很是惊讶原作者的耐心,虽然我们在平时用的也 有一些,但没有作者列出来的全,写excel的时候,我用过pear的库,也用过pack压包的头,同样那些利用smarty等作的简单替换xm ...

  7. Intent的属性及Intent-filter配置——指定Action、Category调用系统Activity

    Intent代表了启动某个程序组件的“意图”,实际上Intent对象不仅可以启动本应用内程序组件,也可启动Android系统的其他应用的程序组件,包括系统自带的程序组件——只要权限允许. 实际上And ...

  8. BNU Online Judge-34978-汉诺塔

    题目链接 http://www.bnuoj.com/bnuoj/problem_show.php?pid=34978 这题在比赛时AC了不过那时是根据测试数据  抱着来试一下的想法,没想就AC了,其实 ...

  9. 让Flash支持Stage3D

    如要需要支持Stage3D,采用GPU来渲染,需要设置wmode="direct",在FB中,对于web和air设置方法不同: 1.web: 需要在web的html模板中,添加参数 ...

  10. 大大维的贪吃蛇v1

    虽然本人一直是个免费的游戏测试员(/手动滑稽),但一直有着一个游戏架构师的梦想.正如马爸爸所说,梦想还是要有的,万一实现了呢? 这些天放寒假,有些空闲时间,就想着做一个简单的游戏机.能达到小时候十几块 ...