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,它是为高速的实时动画渲染.交互式音乐和 ...
随机推荐
- CSS学习总结
CSS基础 简介 什么是CSS? CSS如何创建? 选择器 通用选择器 标签选择器 类选择器 ID选择器 属性选择器 后代选择器 子选择器 相邻元素选择器 伪类选择器 CSS样式 背景 文本 字体 链 ...
- LeetCode 414. Third Maximum Number （第三大的数）
Given a non-empty array of integers, return the third maximum number in this array. If it does not e ...
- C++ 对象成员函数（非静态方法）
1.神奇的inline语法与语义 inline语义C99和C++98都有.之前在单源文件编写的时候一直没有发现问题,但是一考虑到多文件的链接,就发现矛盾了. 一些inline的原则: 1. inlin ...
- Java 中冷门的 synthetic 关键字原理解读
看JAVA的反射时,看到有个synthetic ,还有一个方法isSynthetic() 很好奇,就了解了一下: 1.定义 Any constructs introduced by a Java co ...
- angular指令之complie和link不得不说的故事
angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚.当理解了指令的真正编译原理的时候,就会发现这相当的简单. ng怎 ...
- [板子]segTree
segTree 参考:http://www.cnblogs.com/TenosDoIt/p/3453089.html#c 初学者建议先参考上面“一步一步理解线段树”学习理论. 在这里Code分别为区间 ...
- 移动开发 meta元素
meta标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务. SEO优化: &l ...
- css 3d
Perspective 透视点,视角,CSS3D 的透视点在浏览器前方 默认值为none,是作用于子元素,指定观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果.z>0的三维元素比 ...
- 机器翻译评测——BLEU改进后的NIST算法
◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/7765345.html 上一节介绍了BLEU算的缺陷.NIS ...
- 虚拟软件vmware安装
什么是虚拟软件: 虚拟原件是一个可以使你在一台机器上同时运行二个或更多Windows.LINUX等系统.它可以模拟一个标准PC环境.这个环境和真实的计算机一样,都有芯片组.CPU.内存.显卡.声卡.网 ...