这是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. C++中类的大小计算方法总结《网络+总结》

    C++中类的成员函数,静态成员是不占类的大小的.类的大小等于基类的大小+子类个non-static成员变量的大小再+非虚基类大小,如果有多态性还要考虑vptr(可能不止一个)大小,这里成员变量是会被字 ...

  2. Ubuntu Linux下设置IP的配置命令

    Ubuntu Linux下设置IP的配置命令 今天装了Ubuntu,但是发现不能上网,开始排查问题: 1.首先确定网络连接是否正确,所用的网线是否可以正常工作 2.查看网卡是否能正常工作,检测的方法如 ...

  3. c++初学（电梯实验加强版）

    Elevator.h class Elevator{public:    Elevator();    ~Elevator();    void getNowNum();        void Se ...

  4. 获取IE浏览器关闭事件

    //关闭浏览器时才会触发此操作,刷新页面不执行 //n 检测鼠标相对于用户屏幕的水平位置 - 网页正文部分左:求出鼠标在当前窗口上的水平位置(参照:当前窗口右上角为0.0坐标) //m 网页正文全文宽 ...

  5. C标准I/O建立一个文件仓库

    实现了 增删改查 创建了一个结构体 保存 num name cout price 代码 #include<stdio.h>#include<string.h>#include& ...

  6. --@angularJS--路由、模块、依赖注入

    以下是演示angular路由切换的demo. 主页:index.html <!doctype html><html ng-app="bookStoreApp"&g ...

  7. Eclipse 自动生成getter 和 setter

    示例: public String View;//右击View > Source > Generate Getters and Setters... public String view; ...

  8. shc加密shell脚本

    下载地址:http://www.datsi.fi.upm.es/~frosal/sources/ 安装 .tgz cd shc- mkdir -p /usr/local/man/man1 这步是必须的 ...

  9. 滚动视图（ScrollView）的功能与用法

    滚动视图ScrollView由FrameLayout派生而出,它就是一个用于为普通组件添加滚动条的组件.ScrollView里最多只能包含一个组件,而ScrollVew的作用就是为该组件添加垂直滚动条 ...

  10. Tomcat 使用过程中的一些技巧

    url中文地址乱码 原因: tomcat默认的在url传输时是用iso8859-1编码. 解决方案一: 在使用get传输参数时,将参数中的中文转换成url格式,也就是使用urlEncode和urlDe ...