<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

    function ajax(method, url, date,success){

        var xhr = null;

        try{

            xhr = new XMLHttpRequest();

        }catch(e){

            xhr = new ActiveXObject('Microsoft.XMLHTTP');

        }

        if(method == 'get' && date){

            url += '?'+date;

        }

        xhr.open(method,url,true);

        if(method == 'get'){

            xhr.send();

        }else{

            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

            xhr.send(date);

        }

        xhr.onreadystatechange = function(){

            if(xhr.readyState == 4){

                if(xhr.status == 200){

                    success && success(xhr.responseText);

                }else{

                        alert('出错了'+xhr.status);

                }

            }

        }

    }

    window.onload = function(){

        var btn = document.getElementById('btn');

        btn.onclick = function(){

            ajax('get', 'getNews.php', '',function(date){

                    var date = JSON.parse(date);

                    var oUl = document.getElementById('list');

                    var value = '';

                    for(var i=0;i<date.length;i++){

                        value += '<li><a href="#">'+date[i].title+'</a>&nbsp;<span>'+date[i].date+'</span></li>'

                    }

                    oUl.innerHTML = value;

            });

            var timer = null;

            clearInterval(timer);

            timer = setInterval(function(){

                ajax('get','getNews.php','',function(date){

                    var date = JSON.parse(date);

                    var oUl = document.getElementById('list');

                    var value = '';

                    for(var i=0;i<date.length;i++){

                        value += '<li><a href="#">'+date[i].title+'</a>&nbsp;<span>'+date[i].date+'</span></li>'

                    }

                    oUl.innerHTML = value;

                });

            },3000);

        };

    };

</script>

</head>

<body>

    <input type="button" value="按钮" id="btn"/>

    <ul id="list"></ul>

</body>

</html>
<?php

    header('content-type:text/html; charset="utf-8"');

    error_reporting(0);

    $news = array(

            array('title'=>'12121212121牌','date'=>'2018-6-8'),

            array('title'=>'美又打2000亿关税牌','date'=>'2018-6-1'),

            array('title'=>'北京平均可月省约150','date'=>'2018-6-2'),

            array('title'=>'个税起征点提至5000','date'=>'2018-6-3'),

            array('title'=>'美又打2000亿关税','date'=>'2018-6-4'),

            array('title'=>'哥伦比亚vs日本:J罗','date'=>'2018-6-5'),

            array('title'=>'北京时间"一粽浓情"活动结束','date'=>'2018-6-6'),

        );

    echo json_encode($news);

原生ajax动态添加数据的更多相关文章

  1. Jquery+Ajax实现Select动态添加数据

    https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...

  2. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  3. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  4. 第27讲 UI组件之 ScrollView与底部动态添加数据

    第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...

  5. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  6. Android之ListView动态添加数据（SQLiteOpenHelper类添加数据）

    一.SQLiteOpenHelper类: 这次我们通过sqlite来动态添加数据,接下来我们创建一个openHelper.java,在前面sqlite博客中我们已经详细的讲了SQLite的创建及使用等 ...

  7. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  8. echarts通过ajax动态获取数据的方法

    echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...

  9. ASP.NET网页动态添加数据行

    一看到这标题<ASP.NET网页动态添加数据行>,想起来似乎有点难实现.因为网页的周期性原因,往往在PostBack之后,状态难于有所保留.但Insus.NET又想实现这样的效果,用户点击 ...

随机推荐

  1. jmeter常用定时器以及事物控制器

    定时器(并发):Synchronizing Timer 事物控制器: 勾选Generate parent sample当单看主要数据和页面数据性能测试结果还是有比较大的差异的,因而在进行页面性能测试的 ...

  2. 苹果联合创始人高调宣布弃用Facebook是什么梗？

    这段时间,扎克伯格非常郁闷.泄密丑闻不仅让Facebook股价大跌.引来审查等,还被众多互联网.科技大佬批判.孤立.如,"钢铁侠"马斯克就直接删除了SpaceX 和特斯拉的 Fac ...

  3. Transformer详解：各个特征维度分析推导

    谷歌在文章<Attention is all you need>中提出的transformer模型.如图主要架构:同样为encoder-decoder模式,左边部分是encoder,右边部 ...

  4. NopCommerce上二次开发 触发器记录

    最近要在NopCommerce上二次开发. 开发也就算了,该项目的架构设计很好,但性能不可谓不低. 扯远了,为了保持项目以后升级顺利,开次开发不允许在原项目基础上大改,只能以插件形式开发…… 因一个功 ...

  5. Nginx笔记总结十:Nginx日志切割

    1.Nginx日志切割 logrotate日志文件管理工具,通过cron程序定期执行,默认在cron默认程序的dayli目录下 [root@joker logrotate.d]# cat /etc/c ...

  6. Python---6条件判断与循环

    条件判断 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,用if语句实现: age = 20 if age >= ...

  7. Proto3：C++基本使用

    本教程提供protocol buffer在C++程序中的基础用法.通过创建一个简单的示例程序,向你展示如何: 在.proto中定义消息格式 使用protocol buffer编译器 使用C++ pro ...

  8. 修改android项目sdk版本

    1.右键单击项目--->properties---->Resource----->Android在Project Bulid Target对话框中选择你需要的Android版本.2. ...

  9. iOS开发黑科技之runtime

    iOS 开发之黑科技-runtime runtime其实就是oc底层的一套C语音的API 调用方法的本质就是发消息, 1.动态交换两个方法的实现(特别是交换系统自动的方法) 2.动态添加对象的成员变量 ...

  10. 对话|人工智能先驱Yoshua Bengio

    ​​ ​ Bengio"> 今年1月份,微软收购深度学习初创公司Maluuba时,Maluuba公司德高望重的顾问.深度学习先驱Yoshua Bengio也接手了微软的人工智能研究顾问 ...