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的更多相关文章

  1. 高性能页面加载技术（流水线加载）BigPipe的C#简单实现(附源码）

    一,BigPipe简介 BigPipe是一个重新设计的基础动态网页服务体系.大体思路是,分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行.这是类似于 ...

  2. 3.NetDh框架之缓存操作类和二次开发模式简单设计(附源码和示例代码)

    前言 NetDh框架适用于C/S.B/S的服务端框架,可用于项目开发和学习.目前包含以下四个模块 1.数据库操作层封装Dapper,支持多种数据库类型.多库实例,简单强大: 此部分具体说明可参考博客: ...

  3. jQuery+Ajax滚屏异步加载数据实现（附源码）

    一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...

  4. POI导出大量数据的简单解决方案(附源码)-Java-POI导出大量数据，导出Excel文件，压缩ZIP（转载自iteye.com）

    说明:我的电脑 2.0CPU 2G内存 能够十秒钟导出 20W 条数据 ,12.8M的excel内容压缩后2.68M 我们知道在POI导出Excel时,数据量大了,很容易导致内存溢出.由于Excel ...

  5. PHP简单的长文章分页教程 附源码

    PHP简单的长文章分页教程 附源码.本文将content.txt里的内容分割成3页,这样浏览起来用户体验很好. 根据分页参数ipage,获取对应文章内容 include('page.class.php ...

  6. C#中的WinFrom技术实现串口通讯助手(附源码)

    C#中的WinFrom技术实现串口通讯助手(附源码)   实现的功能: 1.实现自动加载可用串口. 2.打开串口,并且使用C#状态栏显示串口的状态. 3.实现了串口的接收数据和发送数据功能. 4.串口 ...

  7. 使用JDBC技术连接数据库(附源码)--JAVA的简单应用

    一.创建数据库(以mysql数据库为例) mysql数据库的下载安装与配置 -可参考博主之前的随笔:Windows平台下搭建MySQL数据库 创建wxb数据库-create database wxb; ...

  8. 编写轻量ajax组件03-实现（附源码）

    前言 通过前两篇的介绍,我们知道要执行页面对象的方法,核心就是反射,是从请求获取参数并执行指定方法的过程.实际上这和asp.net mvc框架的核心思想很类似,它会解析url,从中获取controll ...

  9. Managed DirectX中的DirectShow应用（简单Demo及源码)

    阅读目录 介绍 准备工作 环境搭建 简单Demo 显示效果 其他 Demo下载 介绍 DirectX是Microsoft开发的基于Windows平台的一组API,它是为高速的实时动画渲染.交互式音乐和 ...

随机推荐

  1. PHP备忘录

    file_exists()在判断文件是否存在的时候是递归判断每个目录是不是有执行权限. Echo输出大字符串速度慢:打开apache配置项‘deflate’进行压缩输出.

  2. 关于git常见的一些问题

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 Mark一下,最近用的比较少,担心忘记了. 作为一个程序员,git或者SVN是必备技能,尤其是 ...

  3. IOS 中的JS

     文章摘自: http://www.cocoachina.com/ios/20150127/11037.html  JSContext/JSValue JSContext 即JavaScript代码的 ...

  4. PCL 1.60 +windows+vs2010 安装与配置

    PCL简介 PCL(Point Cloud Library)是在吸收了前人点云相关研究基础上建立起来的大型跨平台开源C++编程库,它实现了大量点云相关的通用算法和高效数据结构,涉及到点云获取.滤波.分 ...

  5. 区分window8中 ie10 window phone8

    Internet Explorer 10 并没有对 屏幕的宽度 和 视口(viewport)的宽度 进行区分   @-webkit-viewport   { width: device-width; ...

  6. Java IO编程全解（六）——4种I/O的对比与选型

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7804185.html 前面讲到:Java IO编程全解(五)--AIO编程 为了防止由于对一些技术概念和术语 ...

  7. Python中time和datetime模块的简单用法

    python中与时间相关的一个模块是time模块,datetime模块可以看为是time模块的高级封装. time模块中经常用到的有一下几个方法: time()用来获取时间戳,表示的结果为从1970年 ...

  8. luogu P1563 玩具谜题

    https://www.luogu.org/problemnew/show/1563 题目: 小南有一套可爱的玩具小人, 它们各有不同的职业. 有一天, 这些玩具小人把小南的眼镜藏了起来. 小南发现玩 ...

  9. SQL Server Backup & Restore

    USE [master]; GO CREATE DATABASE test; GO CREATE DATABASE test2; GO BACKUP DATABASE test TO DISK = ' ...

  10. C++雾中风景2：struct还是class?

    之前因为都在忙着毕业的开题答辩与投稿论文的事宜,一直没有时间更新这个系列的文章.师弟看了上一篇雾中风景的文章,希望我继续把这个系列的文章写下去.坦白说,C++的特性很多,这也不是教学指南的文章,我会选 ...