Ajax本地取模板--完善窗口隐藏与共用

Ajax也可以本地取模板 ，示例--完善窗口隐藏与共用,简单示例模板代码放在templet文件夹中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地取模板--完善窗口隐藏与共用</title>
    <style>
        .add{
            width: 300px;
            background-color: gray;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>打开<input type="button"id="open"></li>
        <li>浏览<input type="button" id="look"></li>     
    </ul>
</body>
<script>

     var getHTML=function(url,fn){
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.setRequestHeader("content-type", "text/plain");
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                fn(xhr.responseText);
            }
        }
        xhr.send(null);
    }


    //打开窗口一
    var open = document.getElementById("open");
    open.onclick=function(){
        getHTML("templet/add.html",function(html){
            var dialog=document.createElement("div");
            dialog.innerHTML=html;
            document.body.appendChild(dialog);
            var words=document.getElementById("words");
            words.setAttribute("status","open");  //设置属性
            words.innerText="haaaaaaaa";
            Bind_Event();           //打开窗口里各种操作函数的执行
        });
    }
    //打开窗口二
    var look=document.getElementById("look");
    look.onclick=function() {
        getHTML("templet/add.html",function(html){
        var dialog=document.createElement("div");
        dialog.innerHTML=html;
        document.body.appendChild(dialog);
        var words=document.getElementById("words");
        words.setAttribute("status","look"); 
        words.innerText="xiiiiiiii";
        Bind_Event();   
        });
    }
    //退出
    var Bind_Event=function(){
        var exit=document.getElementById("exit");
        exit.addEventListener("click",function() {
            document.getElementById("add").remove();
            
        } )
    }
</script>
</html>

templet文件夹

<div class="add" id="add">
    <p class="words" id="words"></p>
    <input type="button" value="退出" id="exit">
</div>

 

posted @ 2016-09-14 17:50  超小级小萝莉  阅读(271)  评论(0)  编辑  收藏  举报