AJAX技术之网易滚动新闻的简单实现(附源码)--AJAX
1、AJAX简介:
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
2、本实例效果图：
3、实例代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="">
<meta name="description" content="">
<title></title>
<style type="text/css">
*{margin: 0;
padding: 0;}
html{
font-size: 14px;
}
#content{
width: 800px;
margin: 0 auto;
box-shadow:0 0 5px #666;
}
li{
list-style-type: none;padding-left: 5px;
height: 20px;
line-height: 20px;
}
li a{
color: blue;
text-decoration: none;
}
li .title{
color: black;
}
li span{
float: right;padding-right: 5px;color: #727171;font-size: 12px;
}
</style>
</head>
<body>
<div style="width: 962px;margin: 0 auto">
<img src="data:images/news.png" height="108" width="962"/>
</div>
<div id="content">
<!--
<ul>
<li>
<a href="">[社会]</a>黄河变清调查:每年泥沙减少7亿吨 大洪水几率增加<a href=""></a><span>2017-10-12 18:09:00</span>
</li>
<li>
<a href="">[社会]</a>谷歌推出阿尔法围棋工具 要让机器教人类下棋<a href=""></a><span>2017-10-12 18:09:00</span>
</li>
</ul>
-->
</div>
</body>
<script language="JavaScript">
var Ocontent = document.getElementById('content') ;
var oli = "";
var i = 0;
ajax({
type:'get',
url:'php/data.php',
data:'',
success: function (msg){
//console.log(msg);//typeof (msg)
var data = JSON.parse(msg);
console.log(data);
var oUL = document.createElement('ul'); for(var j = 0;j<data[i].length;j++) {
oli += '<li>' +
'<a href="#">'+data[i][j].type+'</a>' +
'<a href="#" class="title">'+data[i][j].title+'</a>' +
'<span style="">2017-10-12 18:09:00</span>' +
'</li>';
}
oUL.innerHTML=oli;
Ocontent.appendChild(oUL);
},
error: function(status) {
alert(status);
}
});
setInterval(function () {
ajax({
type:'get',
url:'php/data.php',
data:'',
success: function (msg){
//console.log(msg);//typeof (msg)
var data = JSON.parse(msg);
console.log(data);
var oUL = document.createElement('ul');
i++;
i %= data.length;
var oli = "";
for(var j = 0;j<data[i].length;j++) {
oli += '<li>' +
'<a href="#">'+data[i][j].type+'</a>' +
'<a href="#" class="title">'+data[i][j].title+'</a>' +
'<span style="">2017-10-12 18:09:00</span>' +
'</li>';
}
oUL.innerHTML=oli;
Ocontent.appendChild(oUL);
},
error: function(status) {
alert(status);
}
});
},5000);
function ajax(mJson) {
var type = mJson.type;
var url = mJson.url;
var data = mJson.data;
var success = mJson.success;
var error = mJson.error; var xmhr = new XMLHttpRequest();
xmhr.open(type,url,true);
xmhr.send();
xmhr.onreadystatechange = function () {
if(xmhr.readyState == 4){
if(xmhr.status == 200){
success&&success(xmhr.responseText);
}else {
error&&error(xmhr.status);
}
}
}
}
</script>
</html>
源码： ajax滚动新闻.zip
AJAX技术之网易滚动新闻的简单实现(附源码)--AJAX的更多相关文章
- 高性能页面加载技术（流水线加载）BigPipe的C#简单实现(附源码）
一,BigPipe简介 BigPipe是一个重新设计的基础动态网页服务体系.大体思路是,分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行.这是类似于 ...
- 3.NetDh框架之缓存操作类和二次开发模式简单设计(附源码和示例代码)
前言 NetDh框架适用于C/S.B/S的服务端框架,可用于项目开发和学习.目前包含以下四个模块 1.数据库操作层封装Dapper,支持多种数据库类型.多库实例,简单强大: 此部分具体说明可参考博客: ...
- jQuery+Ajax滚屏异步加载数据实现（附源码）
一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...
- POI导出大量数据的简单解决方案(附源码)-Java-POI导出大量数据，导出Excel文件，压缩ZIP（转载自iteye.com）
说明:我的电脑 2.0CPU 2G内存 能够十秒钟导出 20W 条数据 ,12.8M的excel内容压缩后2.68M 我们知道在POI导出Excel时,数据量大了,很容易导致内存溢出.由于Excel ...
- PHP简单的长文章分页教程 附源码
PHP简单的长文章分页教程 附源码.本文将content.txt里的内容分割成3页,这样浏览起来用户体验很好. 根据分页参数ipage,获取对应文章内容 include('page.class.php ...
- C#中的WinFrom技术实现串口通讯助手(附源码)
C#中的WinFrom技术实现串口通讯助手(附源码) 实现的功能: 1.实现自动加载可用串口. 2.打开串口,并且使用C#状态栏显示串口的状态. 3.实现了串口的接收数据和发送数据功能. 4.串口 ...
- 使用JDBC技术连接数据库(附源码)--JAVA的简单应用
一.创建数据库(以mysql数据库为例) mysql数据库的下载安装与配置 -可参考博主之前的随笔:Windows平台下搭建MySQL数据库 创建wxb数据库-create database wxb; ...
- 编写轻量ajax组件03-实现（附源码）
前言 通过前两篇的介绍,我们知道要执行页面对象的方法,核心就是反射,是从请求获取参数并执行指定方法的过程.实际上这和asp.net mvc框架的核心思想很类似,它会解析url,从中获取controll ...
- Managed DirectX中的DirectShow应用（简单Demo及源码)
阅读目录 介绍 准备工作 环境搭建 简单Demo 显示效果 其他 Demo下载 介绍 DirectX是Microsoft开发的基于Windows平台的一组API,它是为高速的实时动画渲染.交互式音乐和 ...
随机推荐
- 基于Python实现matplotlib中动态更新图片(交互式绘图)
最近在研究动态障碍物避障算法,在Python语言进行算法仿真时需要实时显示障碍物和运动物的当前位置和轨迹,利用Anaconda的Python打包集合,在Spyder中使用Python3.5语言和mat ...
- 23种设计模式JAVA 实现目录总结
曾看了不少的有关设计模式的文章,有的提供的实现在现在看来是有些问题,所以现在对以前看过的有关设计模式的文章在这里总结一下,随笔中有引用其他资料,并根据自己的理解重新实现了一次,23种设计模式中,并没有 ...
- zookeeper 笔记-小结
1.zookeeper为分布式应用设计的分布式开源协调服务 2.分布式应用可以建立在同步配置管理,选举,分布式锁,分组和命名等服务的更高级别的实现基础上 3.znode维护数据,ACL时间戳等交换版本 ...
- JavaScript--我发现，原来你是这样的JS（引用类型不简单，且听我娓娓道来）
一.介绍 没错,这是第五篇,到了引用类型,这次要分成两次博文了,太多内容了,这是前篇,篇幅很长也很多代码,主要讲引用类型和常用的引用类型,代码试验过的,老铁没毛病. 坚持看坚持写,不容易不容易,希望大 ...
- Oracle官方非托管Odac驱动与Oracle官方托管odac驱动
方便自己,方便他人,记一次连接oracle的经历,使用 [Oracle官方非托管Odac驱动,Oracle.DataAccess.Client]连接数据库的时候程序会报错,找了很久都不知道是什么原因, ...
- DUBBO初探-搭建DUBBO开发环境
我所理解的DUBBO 相对于传统web开发框架,dubbo更加适合于并行系统开发,分布式,模块化.将server和client都注册到zookeeper注册中心上,然后由最外层客户端发起请求到相应cl ...
- 初探 ELK - 每天5分钟玩转 Docker 容器技术（89）
在开源的日志管理方案中,最出名的莫过于 ELK 了.ELK 是三个软件的合称:Elasticsearch.Logstash.Kibana. Elasticsearch一个近乎实时查询的全文搜索引擎.E ...
- ELK 完整部署和使用 - 每天5分钟玩转 Docker 容器技术（90）
上一节已经部署了容器化的 ELK,本节讨论如何将日志导入 ELK 并进行图形化展示. 几乎所有的软件和应用都有自己的日志文件,容器也不例外.前面我们已经知道 Docker 会将容器日志记录到 /var ...
- 使用Mongodb+Shiro+SpringMVC实现动态权限分配
此次的文档只对Mongodb整合Shiro并且实现动态权限分配做整理,其它的内容以后会补上. 第一步.创建在web.xml中配置 Spring .Shiro shiroFilter 过滤器是用来将请求 ...
- sass学习--安装ruby
1.下载ruby:https://rubyinstaller.org/downloads/ 2.安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Promp ...