Étapes de mise en œuvre pour implémenter le chargement différé et le cross-domain à l'aide de Js-js tutoriel-php.cn

Étapes de mise en œuvre pour implémenter le chargement différé et le cross-domain à l'aide de Js

php中世界最好的语言

Libérer： 2017-12-02 10:04:12

original

1906 Les gens l'ont consulté

Aujourd'hui, je vais vous apprendre à utiliser javascript pour implémenter le chargement paresseux et le cross-domain. Que sont le chargement paresseux et le cross-domain ? À quoi devons-nous prêter attention lors de la mise en œuvre du chargement différé et du cross-domain ? Ensuite, je vais vous présenter les étapes pour implémenter le chargement différé et le cross-domain à l'aide de 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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu ces cas s'il vous plaît. venez pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment définir la couleur de la police du texte CSS

Dans la mise en page Web HTML, div et span sont liés Quelle est la différence

Étapes pour implémenter l'effet de création de commutateurs dynamiques avec Css3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!