AJAX技术之网易滚动新闻的简单实现(附源码)--AJAX

1、AJAX简介:

　 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

　　AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

　　AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

　　AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

2、本实例效果图：

3、实例代码:

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4     <meta charset="utf-8"/>
  5     <meta name="keywords" content="">
  6     <meta name="description" content="">
  7     <title></title>
  8     <style type="text/css">
  9         *{margin: 0;
 10         padding: 0;}
 11         html{
 12             font-size: 14px;
 13         }
 14         #content{
 15             width: 800px;
 16             margin: 0 auto;
 17             box-shadow:0 0 5px #666;
 18         }
 19         li{
 20             list-style-type: none;padding-left: 5px;
 21             height: 20px;
 22             line-height: 20px;
 23         }
 24         li a{
 25             color: blue;
 26             text-decoration: none;
 27         }
 28         li .title{
 29             color: black;
 30         }
 31         li span{
 32             float: right;padding-right: 5px;color: #727171;font-size: 12px;
 33         }
 34     </style>
 35 </head>
 36 <body>
 37 <div style=" 962px;margin: 0 auto">
 38     <img src="images/news.png" height="108" width="962"/>
 39 </div>
 40 <div id="content">
 41     <!--
 42     <ul>
 43         <li>
 44             <a href="">[社会]</a>黄河变清调查:每年泥沙减少7亿吨 大洪水几率增加<a href=""></a><span>2017-10-12 18:09:00</span>
 45         </li>
 46         <li>
 47             <a href="">[社会]</a>谷歌推出阿尔法围棋工具 要让机器教人类下棋<a href=""></a><span>2017-10-12 18:09:00</span>
 48         </li>
 49     </ul>
 50     -->
 51 </div>
 52 </body>
 53 <script language="JavaScript">
 54     var Ocontent = document.getElementById('content') ;
 55     var oli = "";
 56     var i = 0;
 57     ajax({
 58         type:'get',
 59         url:'php/data.php',
 60         data:'',
 61         success: function (msg){
 62             //console.log(msg);//typeof (msg)
 63            var data = JSON.parse(msg);
 64            console.log(data);
 65            var oUL = document.createElement('ul');
 66 
 67            for(var j = 0;j<data[i].length;j++) {
 68                oli += '<li>' +
 69                    '<a href="#">'+data[i][j].type+'</a>' +
 70                    '<a href="#" class="title">'+data[i][j].title+'</a>' +
 71                    '<span style="">2017-10-12 18:09:00</span>' +
 72                    '</li>';
 73            }
 74             oUL.innerHTML=oli;
 75             Ocontent.appendChild(oUL);
 76         },
 77         error: function(status) {
 78             alert(status);
 79         }
 80     });
 81     setInterval(function () {
 82         ajax({
 83             type:'get',
 84             url:'php/data.php',
 85             data:'',
 86             success: function (msg){
 87                 //console.log(msg);//typeof (msg)
 88                 var data = JSON.parse(msg);
 89                 console.log(data);
 90                 var oUL = document.createElement('ul');
 91                 i++;
 92                 i %= data.length;
 93                 var oli = "";
 94                 for(var j = 0;j<data[i].length;j++) {
 95                     oli += '<li>' +
 96                         '<a href="#">'+data[i][j].type+'</a>' +
 97                         '<a href="#" class="title">'+data[i][j].title+'</a>' +
 98                         '<span style="">2017-10-12 18:09:00</span>' +
 99                         '</li>';
100                 }
101                 oUL.innerHTML=oli;
102                 Ocontent.appendChild(oUL);
103             },
104             error: function(status) {
105                 alert(status);
106             }
107         });
108     },5000);
109     function ajax(mJson) {
110         var type = mJson.type;
111         var url = mJson.url;
112         var data = mJson.data;
113         var success = mJson.success;
114         var error = mJson.error;
115 
116         var xmhr = new XMLHttpRequest();
117         xmhr.open(type,url,true);
118         xmhr.send();
119         xmhr.onreadystatechange = function () {
120             if(xmhr.readyState == 4){
121                 if(xmhr.status == 200){
122                     success&&success(xmhr.responseText);
123                 }else {
124                     error&&error(xmhr.status);
125                 }
126             }
127         }
128     }
129 </script>
130 </html>

源码： ajax滚动新闻.zip

相关阅读:
【福利】idea最新激活码，绝对可用
 最好用的录屏工具Bandicam (班迪录屏)
markdown改变字体、颜色和大小
 idea 2020最新破解教程（可激活至2089年）
解决电脑桌面图标变白消失
 常见排序
 算法
 uWSGI、WSGI和uwsgi
RabbitMQ
flask请求和应用上下文
原文地址：https://www.cnblogs.com/qikeyishu/p/7986245.html