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,它是为高速的实时动画渲染.交互式音乐和 ...
随机推荐
- 关于欧几里得算法（gcd）的证明
求a,b的最大公约数我们经常用欧几里得算法解决,也称辗转相除法, 代码很简短, int gcd(int a,int b){ return (b==0)?a:gcd(b,a%b); } 但其中的道理却很 ...
- formData 无需form异步上传多个图片
上周帮其它公司套一下一个web端微信投票系统的后台接口,遇到了一个图片以及视频上传报名的小问题,网上实现方式有很多但都不是ui上面的效果,于是自己动手改造了一个.先来看看效果图 流程很简单,就是点击每 ...
- 使用vue-cli脚手架搭建简单项目框架
1.首先已经安装了node,最好版本6以上. 2.安装淘宝镜像 大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像.这样就可以直接使用cnpm了. npm insta ...
- 基于Vue.js的大型报告页项目实现过程及问题总结（一）
今年5月份的时候做了一个测评报告项目,需要在网页正常显示的同时且可打印为pdf,当时的技术方案采用jquery+template的方式,因为是固定模板所以并没有考虑报告的模块化区分,九月底产品提出新的 ...
- 深度学习系列 Part (2)
1. 神经网络原理 神经网络模型,是上一章节提到的典型的监督学习问题,即我们有一组输入以及对应的目标输出,求最优模型.通过最优模型,当我们有新的输入时,可以得到一个近似真实的预测输出. 我们先看一下如 ...
- Codeforces Round #386 (Div. 2) C. Tram
C. Tram time limit per test 1 second memory limit per test 256 megabytes input standard input output ...
- Disharmony Trees
/* 写完这篇博客有很多感慨,过去一段时间都是看完题解刷题,刷题,看会题解,没有了大一那个时候什么都不会的时候刷题的感觉,这个题做了一天半,从开始到结束都是从头开始自己构思的很有感觉,找回到当初的感觉 ...
- 原生JS实现图片放大镜插件
前 言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的 ...
- Python 解LeetCode：680. Valid Palindrome II
题目:给定一个字符串,在最多删除一个字符的情况下,判断这个字符串是不是回文字符串. 思路:回文字符串,第一想到的就是使用两个指针,前后各一个,当遇到前后字符不一致的时候,有两种情况,删除前面字符或者删 ...
- 不想再被鄙视？那就看进来！ 一文搞懂Python2字符编码
程序员都自视清高,觉得自己是创造者,经常鄙视不太懂技术的产品或者QA.可悲的是,程序员之间也相互鄙视,程序员的鄙视链流传甚广,作为一个Python程序员,自然最关心的是下面这幅图啦 我们项目组一值使用 ...