<!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. SHELL用法三（变量及参数设置）

    京峰JF2115-Day45上课笔记 1.SHELL编程变量命名规范: 变量分为:系统变量.环境变量.用户变量: 定义变量时使用=赋值,无需通过declare定义变量的类型: 变量赋值时,=前后是不能 ...

  2. Nginx笔记总结十三:nginx 正向代理

    server { listen ; location / { resolver 202.106.0.20 202.106.119.116; resolver_timeout 30s; proxy_pa ...

  3. in与exist , not in与not exist 的区别

    in和exists     in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询.一直以来认为exists比in效率高的说法是不准确的.     ...

  4. Fence和非原子操作的ordering

    除了在原子操作中标记memory ordering外,还可以单独使用fence指定memory ordering.Fence是全局的操作,它影响所执行线程中其他原子操作的ordering. 12345 ...

  5. 通过zxing生成二维码

    二维码现在随处可见,在日常的开发中,也会经常涉及到二维码的生成,特别是开发一些活动或者推广方面的功能时,二维码甚至成为必备功能点.本文介绍通过 google 的 zxing 包生成带 logo 的二维 ...

  6. 如何在实际项目中使用PageHelper分页插件

    PageHelper是一个分页插件,能够简单快速的帮助开发人员完成常见的分页功能,你只需要简单的使用两行代码就可以完成一个分页效果- 最近做一个科创项目,使用Maven+SSM的环境,有分页的功能,于 ...

  7. CS229 Lesson 5 生成学习算法

    课程视频地址:http://open.163.com/special/opencourse/machinelearning.html 课程主页:http://cs229.stanford.edu/ 更 ...

  8. PHPExcel之蛋疼

    限制了内存,处理个80+K的表就会GG,所以还要尽量删空行,选中某一行如A3,ctrl+shift+↓然后ctrl+小键盘的减号最后需要ctrl+s

  9. 查看python库文档

    安装完python第三方库以后,经常需要查询其文档,其实python就自带文档查看器.可以查看所有内置库和第三方库的文档,虽然不是很详尽,但是总比没有的好. 在命令行窗口 python -m pydo ...

  10. Docker实战之Redis-Cluster集群

    概述 接上一篇Docker实战之MySQL主从复制, 这里是Docker实战系列的第二篇,主要进行Redis-Cluster集群环境的快速搭建.Redis作为基于键值对的NoSQL数据库,具有高性能. ...