Rumah > Artikel > hujung hadapan web > 用Js实现懒加载和跨域的实现步骤
用Js实现懒加载和跨域的实现步骤

php中世界最好的语言asal: 2017-12-02 10:04:121873semak imbas
今天教大家怎样用javascript来实现懒加载和跨域，懒加载和跨域是什么？实现懒加载和跨域有什么要注意的？接下来就给大家介绍用Js实现懒加载和跨域的实现步骤
<!DOCTYPE html>
<html>
<head>
         <meta charset="UTF-8">
         <title>跨域</title>
         <script src="ajax.js"></script>
         <script>
                   getAJAX(function(data){
                            console.log(data);
                   },"http://10.9.156.51:8086/API/article/add.aspx");
         </script>
</head>
<body> 
</body>
</html>
<!DOCTYPE html>
<html>
<head>
         <meta charset="UTF-8">
         <title>查询数据</title>
         <style>
                   #container{
                            width: 992px;
                            margin: 20px auto;
                   }
                   th,td{
                            background:#fff;
                            font-size:14px;
                            height: 30px;
                            text-align: center;
                            "微软雅黑";
                   }
                   a{
                            color:#00468C;
                            text-decoration: none;
                   }
                   a:hover{
                            color:#00468C;
                            text-decoration: underline;
                   }
                   .even{
                            background:#ff6600;
                   }
                   #cover{
                            position: absolute;
                            left: 0;
                            top: 0;
                            width:100%;
                            height: 100%;
                            background: #000;
                            opacity:0.6;
                            filter:alpha(opacity=60);
                            display: none;
                   }
                   #updateform{
                            width:300px;
                            height: 300px;
                            border:solid 1px #CCC;
                            position: absolute;
                            left:50%;
                            margin-left: -150px;
                            top:50%;
                            margin-top: -200px;
                            display: none;
                            background: #fff;
                   }
                   #updateform h3{
                            display: block;
                            border-bottom:solid 1px #CCC;
                            border-bottom:solid 1px #CCC;
                            height: 38px;
                            line-height: 38px;
                            background: #ff6600;
                            margin: 0;
                            "">微软雅黑;
                            color:#fff;
                            font-size: 16px;
                   }
                   #updateform form div{
                            padding-top: 10px;
                   }
         </style>
         <script src="ajax.js"></script>
         <script>
                   function createData(b){
                            var str = "";
                            for(var i = 2; i < b.length; i++){
                                     var css = "";
                                     if(i % 2 == 0){
                                               css = "even"
                                     }
                                     str += "<tr>"
                                                + "<td class=&#39;"+css+"&#39;>"+b[i].ID+"</td>"
                                                + "<td class=&#39;"+css+"&#39;>"+b[i].ATitle+"</td>"       
                                                + "<td class=&#39;"+css+"&#39;>"+b[i].AClickCount+"</td>"     
                                                + "<td class=&#39;"+css+"&#39;>"+b[i].ATime+"</td>"
                                                + "<td class=&#39;"+css+"&#39;>"
                                                + "<a href=\"javascript:;\" onclick=&#39;updateData(this)&#39;>修改</a> | <a href=\"javascript:;\" onclick=&#39;delDOM(this)&#39;>删除</a>"
                                                + "</td>"
                                                + "</tr>";
                            }
                            var html = "<table id=\"tb1\" cellspacing=\"1\" style=\"width:990px; background:#000;\">"
                                                + "<tr>"
                                                + "<th>编号</th>"        
                                                + "<th>标题</th>"        
                                                + "<th>点击量</th>"   
                                                + "<th>发布时间</th>"        
                                                + "<th>操作</th>"
                                                + "</tr>"
                                                + str
                                                + "</table>";
                            container.innerHTML = html;
                   }
                   window.onload = function(){
                            var url = "../../API/article/get.aspx";
                            getAJAX(function(data){
                                               createData(data);
                            },url);
                   }
                   function delDOM(obj){
                            var tb1 = document.getElementById("tb1");
                            var id = obj.parentNode.parentNode.children[0].innerHTML;
                            getAJAX(function(data){
                                     if(data.result == "ok"){
                                               tb1.children[0].removeChild(obj.parentNode.parentNode);
                                     }
                            },"../../API/article/del.aspx?id="+id+"");
                   }
                   function updateData(obj){
                            var cover = document.getElementById("cover");
                            var updateform = document.getElementById("updateform");
                            console.log(cover);
                            cover.style.display = "block";
                            updateform.style.display = "block";
                            var atitle = obj.parentNode.parentNode.children[1].innerHTML;
                            var clickcount = obj.parentNode.parentNode.children[2].innerHTML;
                            var id = obj.parentNode.parentNode.children[0].innerHTML;
                            var form = document.forms[0];
                            form.elements[0].value = atitle;
                            form.elements[1].value = clickcount;
                            form.elements[2].onclick = function(){
                                     var xhr = createXHR();
                                     xhr.open("POST","../../API/article/update.aspx",true);
                                     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                                     xhr.onreadystatechange = function(){
                                               if(xhr.readyState == 4){
                                                        if(xhr.status == 200){
                                                                 var data = eval("("+xhr.responseText+")");
                                                                 if(data.result == "ok"){
                                                                           updateform.style.display = "none";
                                                                           cover.style.display = "none";
 
                                                                           obj.parentNode.parentNode.children[1].innerHTML = form.elements[0].value;
                                                                           obj.parentNode.parentNode.children[2].innerHTML = form.elements[1].value;
 
                                                                           // var url = "../../API/article/get.aspx";
                                                                           // getAJAX(function(data){
                                                                           //              createData(data);
                                                                           // },url);
                                                                 }
                                                        }
                                               }
                                     }
                                     xhr.send("atitle="+form.elements[0].value+"&aclickcount="+form.elements[1].value+"&id="+id+"");
                            }
                   }
 
 
                  
         </script>
</head>
<body>
         <div id="cover"></div>
         <div id="updateform">
                   <h3>修改数据</h3>
                   <form>
                            <div>标 题：<input type="text"></div>
                            <div>点击量：<input type="text"></div>
                            <div><input type="button" value="保存数据"></div>
                   </form>
         </div>
         <div id="container">
                  
         </div>
</body>
</html>
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
Artikel berkaitan

Lihat lagi