这是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. css强制折行和隐藏超出部分

    一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 whit ...

  2. BZOJ2698染色

    2698: 染色 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 223  Solved: 150[Submit][Status][Discuss] De ...

  3. 转自他人——————TLE之前，没有一个节点叫失败！！！

    我想我十八年来记忆最深刻的夜晚,大概便是在吉林大学燥热的宿舍里,穿着橘黄色的短袖,努力咽下大口大口的雪碧.那天晚上我仰躺在吉大热得几乎不能入眠的床板上,一动不动,看夏夜里打不尽的蚊子在惨白的天花板下飞 ...

  4. plupload 异步上传插件使用心得

    plupload 可以不依赖jquery,并且提供了 html5,flash,silverlight,html4 多种上传模式,使用起来比较简单,上一篇博客中介绍了其主要参数哈函数 一.简化用法 &l ...

  5. Java之模板方法模式（Template Method）

    Java之模板方法模式(Template Method) 1. 概念:定义一个算法的骨架,而将一些实现步骤延迟到子类中. 把不变的行为搬到超类,去除子类中重复的代码来体现他的优势. 2. UML图: ...

  6. 在JS中使用COM组件的方法

    首先创建一个COM组件,插入一个双接口Itest,在此接口上实现以下三个方法: STDMETHODIMP Ctest::test(void) //无输入输出参数 { // TODO: 在此添加实现代码 ...

  7. es6笔记6^_^generator

    1.简介 Generator函数是一个函数的内部状态的遍历器(也就是说,Generator函数是一个状态机). 形式上,Generator函数是一个普通函数,但是有两个特征. function命令与函 ...

  8. 安装Hadoop及Spark(Ubuntu 16.04)

    安装Hadoop及Spark(Ubuntu 16.04) 安装JDK 下载jdk(以jdk-8u91-linux-x64.tar.gz为例) 新建文件夹 sudo mkdir /usr/lib/jvm ...

  9. Java 异步 IO

         新的异步功能的关键点,它们是Channel 类的一些子集,Channel 在处理IO操作的时候需要被切换成一个后台进程.一些需要访问较大,耗时的操作,或是其它的类似实例,可以考虑应用此功能. ...

  10. js精要之继承

    // 继承object.prototype的方法 // hasOwnProperty() //检查是否存在一个给定名字的自有属性 // propertyIsEnumerable() // 检查一个自有 ...