<!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. deeplearning.ai 神经网络和深度学习 week4 深层神经网络

    1. 计算深度神经网络的时候,尽量向量化数据,不要用for循环.唯一用for循环的地方是依次在每一层做计算. 2. 最常用的检查代码是否有错的方法是检查算法中矩阵的维度. 正向传播: 对于单个样本,第 ...

  2. UFT基本操作

    1.打开界面F6快捷录制 2.选择web或者C/S架构软件 3.以C/S为例,点击添加找到相应的地址 4.点击左键添加断点 5.切换视图,初级模式或者代码模式 6.新增步骤 7.点击“手指”图标获取元 ...

  3. Dubbo+zookeeper 基础讲解

    一.dubbo是什么? 1)本质:一个Jar包,一个分布式框架,,一个远程服务调用的分布式框架. 既然是新手教学,肯定很多同学不明白什么是分布式和远程服务调用,为什么要分布式,为什么要远程调用.我简单 ...

  4. jdk源码理解-String类

    String类的理解 简记录一下对于jdk的学习,做一下记录,会持续补充,不断学习,加油 1.String的hash值的计算方法. hash值的计算方法多种多样,jdk中String的计算方法如下,比 ...

  5. vm文件的优点

    vm文件的优点 相较于内容写在jsp 文件: 1.在网页上上浏览和下载的内容用的是同一套,也就是说只需要维护一套内容,页面上看到的和下载得到的是一致的. 2.版本控制较为简便, 实现了页面内容和jsp ...

  6. linux下光标操作

    Ctrl+左右键    单词间跳转 Ctrl+a    跳到行首 Ctrl+e    跳到行尾 Ctrl+u    删除当前光标前的文字 Ctrl+k    删除当前光标后的文字 Ctrl+w    ...

  7. HTC新机A9足以取代iPhone 你相信吗？

    你相信吗?" title="HTC新机A9足以取代iPhone 你相信吗?"> 自信和嘴硬之间,往往就是成功与失败的分水岭.乔老爷子当年推出iPhone.iPad等 ...

  8. 千亿VR市场 将被国内厂商玩坏多少？

    将被国内厂商玩坏多少?" title="千亿VR市场 将被国内厂商玩坏多少?"> 智能硬件行业在不断寻求新的突破口,当智能手机.平板.电视.家电等都司空见惯之后,能 ...

  9. CS229 Lesson 13 高斯混合模型

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

  10. 对话|首席研究员童欣：从长远看，AR的应用范围远比VR广泛

    ​童欣博士现任微软亚洲研究院网络图形组首席研究员.1993年毕业于浙江大学计算机系,获工学学士学位:1996年获浙江大学计算机系硕士学位:1999年获清华大学计算机系博士学位,同年加入微软亚洲研究院. ...