<!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. Xpath 入门教程

    准备xml 文档 <?xml version="1.0" encoding="UTF-8"?> <bookstore> <book ...

  2. mysql挖掘与探索------第一章（简介）

    一.数据库简介: 1按照数据库发展时间,主要出现下面几个类型的数据库系统: a 网状型数据库 b 层次型数据库 c 关系型数据库 d 面向对象数据库 上面4中数据库系统中,关系型数据库使用最为广泛.面 ...

  3. python--防止SQL注入

    from pymysql import * def main(): # 创建Connextion连接 conn = connect(host='localhost', port=3306, user= ...

  4. Linux上部署Tomcat+Nginx负载均衡

    前提:配置好了JDK. 我这里是vm上的linux虚拟机,可能不适用于所有情况. 一.Linux上配置Tomcat 1.下载地址:https://tomcat.apache.org/download- ...

  5. 在腾讯云服务器上安装JDK+Tomcat并启动tomcat

    由于Java web项目需要使用到tomcat所以决定在腾讯云服务器(centos7.X)上安装JDK和tomcat,来部署我们的项目. 准备工具: 云服务器:centos7.x+ 本地连接服务器:X ...

  6. Ceph块设备

    Ceph块设备 来自这里. 块是一个字节序列(例如,一个512字节的数据块).基于块的存储接口是最常见的存储数据的方法,它通常基于旋转介质,像硬盘.CD.软盘,甚至传统的9道磁带. 基本的块设备命令 ...

  7. History of AI

    人工智能的历史源远流长.在古代的神话传说中,技艺高超的工匠可以制作人造人,并为其赋予智能或意识.[1]现代意义上的AI始于古典哲学家用机械符号处理的观点解释人类思考过程的尝试.20世纪40年代基于抽象 ...

  8. iptables学习02-nat表应用

    nat表应用实验 第一步 准备工作 A机器两块网卡ens33(192.168.2.106).再添加一块自定义网卡ens37(192.168.100.1),添加到LAN内网区段(自定义名字,写什么无所谓 ...

  9. JavaScript中的innerHTML属性的使用

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldh ...

  10. MySQL集群MGR架构for多主模式

    本文转载自: https://www.93bok.com MGR简介 MySQL Group Replication(简称MGR)是MySQL官方于2016年12月推出的一个全新的高可用与高扩展的解决 ...