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,它是为高速的实时动画渲染.交互式音乐和 ...
随机推荐
- 上海2017QCon个人分享总结
有幸作为讲师受邀参加InfoQ在上海举办的QCon2017,不得不说,不论是从讲师还是听众的角度衡量,QCon进一步扩大了技术视野.虽然前端专题只有四场,但每一场分享都是目前的热门话题.并且Qcon的 ...
- LeetCode 78. Subsets（子集合）
Given a set of distinct integers, nums, return all possible subsets. Note: The solution set must not ...
- Coredata中的多线程
=================== 疑问: 1.coredata是什么?结构 2.如果在简单的demo中,我们可以在主线程中使用coredata.但是如果在真正的大项目中,这样可行么? 3.假设都 ...
- python、java和php的百度指数对比
Python: Python是纯粹的自由软件, 源代码和解释器CPython遵循 GPL(GNU General Public License)协议.Python语法简洁清晰,特色之一是强制用空白符( ...
- Handshakes
Description Last week, n students participated in the annual programming contest of Marjar Universit ...
- Chinese Rings
Chinese Rings Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- Pseudoforest(伪最大生成树）
Pseudoforest Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total ...
- Day1作业-模拟登录
# /usr/bin/env python# -*- coding: utf-8 -*-# Author:jenvid.yangimport getpassimport shutiluserspwd ...
- 离线缓存 manifest
程序的离线缓存由一个叫做manifest的文本文件控制,把需要离线缓存的文件列在里面即可,这个列表还可以控制需要缓存的情况,甚至当用户从缓存地址进入到没有缓存的地址应该显示什么 当浏览器下载解析了ma ...
- Number 类型
Javascript使用IEEE -754格式存储整型和浮点型(有些语言称为双精度) 因为这种存储格式,所以javascript中有正的0和负的0 整型也可以存储八进制和十六制 八进制第一个数 ...