这是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. js设置文本框只能输入数字

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...

  2. JS 中 Class - 类创建

    Class - 类创建 Class类实现了在JavaScript中声明一个新的类, 并通过构造函数实例化这个类的机制.通过使用Class.create()方法, 你实际上声明了一个新的类, 并定义了一 ...

  3. ImageView的展示方式

    [转]http://www.cnblogs.com/yejiurui/archive/2013/02/25/2931767.html   在网上查了好多资料,大致都雷同,大家都是互相抄袭的,看着很费劲 ...

  4. iOS 界面 之 EALayout 无需反复编译，可视化实时界面，告别Storyboard AutoLayout Xib等等烦人的工具

    http://blog.csdn.net/fatherhui iOS开发,EALayout 无需反复编译,可视化实时界面,告别Storyboard AutoLayout Xib等等烦人的工具 EALa ...

  5. UVa 10400 - Game Show Math

    题目大意:给出n(n<100)个正整数和一个目标数,按照给出数的顺序,运用+.-.*./四则运算(不考虑优先级),判断能否得出所要的结果. 首先考虑的就是暴力枚举,不过时间复杂度为O(4n),会 ...

  6. C#子窗口与父窗口交互（使用委托和事件）

    目标:在子窗口Form2上单击按钮时向Form1传递一组自定义参数,并显示在父窗口Form1上. 方法:有很多方法,这里只介绍委托和事件的实现方式. 思路:Form2中定义事件,Form1创建Form ...

  7. GCD教程（三）：Dispatch Sources

    接上一篇,原帖地址:http://www.dreamingwish.com/dream-2012/intro-to-grand-central-dispatch-part-iii-the-dispat ...

  8. 函数返回值 return

    return 返回值 (后面跟的是数据类型) // 数字.字符串.布尔.函数.对象(元素.[].{}.null).未定义return:返回值 1)函数名+括号:fn1() ==> return ...

  9. Flash Socket通信的安全策略问题 843端口

    1.问题描述       将flash发布为html格式后,加载页面后,swf无法与服务器进行socket通信.Flash端显示的错误为:securityErrorHandler信息: [Securi ...

  10. Canvas贝塞尔三级曲线

    两个控制点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...