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. QT：用QWebSocket实现webchannel，实现C++与HTML通信

    基本原理是通过channel将C++对象暴露给HTML,在HTML中调用qwebchannel.js.前提是建立transport,QT只提供了一个抽象基类QWebChannelAbstractTra ...

  2. iOS 通讯录空格

    iOS 通讯录联系人出现 ASCII 码值为 160 的空格  NOTE:       这里的"空格"是指 在通讯录中取出的联系人中带有特殊空格 带有特殊空格的字符串 " ...

  3. Java企业微信开发_Exception_02_java.security.InvalidKeyException: Illegal key size

    今天换了重新装了一个jdk,然后运行昨天还好好的企业微信工程,结果启动的时候就给我报了这么个错: java.security.InvalidKeyException: Illegal key size ...

  4. Ajax通过FormData上传文件

    1.使用<form>表单初始化FormData对象方式上传文件 HTML代码 <form id="uploadForm" enctype="multip ...

  5. 【JAVA零基础入门系列】Day12 Java类的简单应用

    俗话说的好,实践出真知,所以除了理论知识掌握扎实以外,更重要的是要多加操练,这样才能掌握核心科技. 今天我们就用刚学会的类来实践一下,目标便是完成上一篇中的剁手任务. 我们的商品类已经准备好了,代码重 ...

  6. poj 3340 Barbara Bennett's Wild Numbers(数位DP)

    Barbara Bennett's Wild Numbers Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 3153   A ...

  7. js input输入事件兼容性问题

    if(navigator.userAgent.indexOf('Android') > -1){ $("#sign").on("input", funct ...

  8. web前端优化--DOM性能优化

    1.DOM访问与修改的优化: DOM访问是有代价的,修改DOM则会引起DOM的重绘与重排,而这两种操作会消耗性能. (1)缓存DOM:将频繁访问的对象或属性使用变量缓存起来,每次访问的时候,直接使用变 ...

  9. media query 单位

    使用em 判断的media query 在用户缩放的时候不会被破坏,使用em更加合适内容为王的页面趋势   内容的容器需要根据内容而按比例设置,就像line-height:1.14em,文字大小的1. ...

  10. 引入servlet概念

    Servlet简介 Java Servlet是和平台无关的服务器端组件,它运行在Servlet容器中.Servlet容器负责Servlet和客户的通信以及调用Servlet的方法,Servlet和客户 ...