AJAX与拖放例子

**AJAX**

----------
在不刷新页面的情况下，动态加载网页的内容。    
方法：1.创建动态。  2：请求（发送）。  3：响应。  4：准备开始     

同步执行：必须等待数据返回才能执行下一步    
异步执行：各不相干，不用等待数据返回依旧执行下一步    

----------
    例：    
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .div1{width: 200px;height: 200px;background: yellowgreen}
    </style>
    /head>
    <body>
    <div id="div1" class="div1">
       <p>AJAX</p>
    </div>
    <input type="button" onclick="input1()" value="跳转"/>
    </body>
    <script type="text/javascript">
    var div1=document.getElementById("div1");   
 
      创建对象
    function input1(){
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

       响应
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("div1").innerHTML=xmlhttp.responseText;
            }
        };    

         发送请求
        xmlhttp.open("GET","111.html",true);
        xmlhttp.send();
    }
    </script>
    </html>

----------
**拖放**    
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。    

    例：        
    <body>
    <div style="width: 100px;height: 100px;background: yellowgreen;border-radius: 50%;position: absolute;top: 200px;left: 200px;" id="div1"></div>
    </body>
    <script type="text/javascript">
    var div1=document.getElementById("div1");
    div1.onmousedown=function(e){
        var ev= e||window.event;
        var x=ev.clientX-parseInt(div1.style.left);
        var y=ev.clientY-parseInt(div1.style.top);
        div1.onmousemove=function(e){
            var ev=e||window.event;
            div1.style.left=ev.clientX-x+"px";
            div1.style.top=ev.clientY-y+"px";
        };
        div1.onmouseup=function(){
            div1.onmousemove=null
        };
        div1.onmouseout=function(){
            div1.onmousemove=null
        }
    }
    </script>


----------

posted on 2016-05-20 15:07  名字怎么取  阅读(164)  评论(0)    收藏  举报

导航