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,它是为高速的实时动画渲染.交互式音乐和 ...
随机推荐
- Win10开启“上帝模式”
win10的上帝模式就是win10的全部功能展示模式,因为功能太强大,所以被戏称为"上帝模式".要开启win10的上帝模式,需要按下面的步骤来操作:1.在window桌面新建一个普 ...
- Kafka 学习笔记-基本概念
一.基本概念 Kafka是一个分布式的,可分区的,可复制的消息系统 Kafka以由一个或多个服务以集群的方式运行,服务叫broker producer,consuer通过kafka topic发布,预 ...
- 跟着弦哥学人工智能2—HAND-CRAFTED RULES实现的人工智能及其缺陷
隔壁有个妹纸喷我,好高兴....给她回复了下 哎呀,没想到是个妹纸,其实我就随便那么一说,没合计妹纸还专门写个檄文声讨我,受宠若惊其实你的评论一看就比较专业,所以我就去你博客大概扫了一眼,发现个大问 ...
- LeetCode 202. Happy Number （快乐数字）
Write an algorithm to determine if a number is "happy". A happy number is a number defined ...
- c# Invoke和Begininvoke区别
一.对Invoke和Begininvoke的认识 1.Invoke():同步委托,会阻塞当前主线程的运行,等待invoke()方法返回才执行后面的代码: 2.Begininvoke():异步委托,调用 ...
- Linux 源码编译Python 3.6
Linux 源码编译Python 3.6 1.操作系统以及版本显示 # uname -sr Linux 3.10.0-514.el7.x86_64 # uname -sr Linux 3.10.0-5 ...
- Shell中bash的特性小结
Shell: 用户与操作系统之间完成交互式操作的一个接口程序,为用户提供简化了的操作:上世纪的70年代中期在贝尔实验室,Bourne位Unix开发了一个shell程序Bourne Shell,简称sh ...
- linux C 文件操作之fscanf()
描述: int fscanf(FILE *stream, const char *format, ...) 从流 stream 读取格式化输入. 声明: int fscanf(FILE *stream ...
- 中高级JavaScript易错面试题
写出下题的输出 1.函数的实参与形参length var length = 10; function fn() { console.log(this.length); } var obj = { le ...
- Java 链表常见考题总结
首先定义自定义结点类,存储节点信息: public class Node { Node next=null; int data; public Node(int data){ this.data=da ...