纯js异步无刷新请求(只支持IE)【原】

纯js异步无刷新请求

下载地址:http://pan.baidu.com/s/1slakL1F

所以因为非IE浏览器都禁止跨域请求,所以以只支持IE.

<HTML>
<!-- 乱码(未实践是否有用) http://blog.csdn.net/myfuturein/article/details/6603500 -->
<HEAD>
<!--  meta 解释 :  http://www.haorooms.com/post/html_meta_ds -->
<meta http-equiv="content-Type"content="text/html;charset=gbk">
<meta name="author" content="king">
<style>
*{ margin:2;padding:0;}
.top{background:#5DF5FD; height:20px; position:fixed; z-index:8000;width:100%}
.width99{width:99%;padding:0;}
.trigger{background:red}
</style>

<TITLE>纯js异步无刷新请求</TITLE>

<script type="text/javascript">
    var xmlHttpRequest;   
    //XmlHttpRequest对象   
    function createXmlHttpRequest(){   
        if(window.ActiveXObject){ //如果是IE
            return new ActiveXObject("Microsoft.XMLHTTP");   
        }else if(window.XMLHttpRequest){ //非IE浏览器   
            return new XMLHttpRequest();   
        }   
    }   
    function sendRequest(){   
        //发送前改变下按钮颜色
        var btn = document.getElementById("sendButton");
        btn.setAttribute('class','trigger');

        // "http://localhost:8080/httpserver?a=2";
        
        var url = document.getElementById("url").value;
        //1.创建XMLHttpRequest组建   
        xmlHttpRequest = createXmlHttpRequest();   
           
        //2.设置回调函数   
        xmlHttpRequest.onreadystatechange = callbackFunc;   
        
        //3.初始化XMLHttpRequest组建   
        xmlHttpRequest.open("post",url,true);   
           
        //4.发送请求   
        var requestXml = document.getElementById("requestData").innerText;
        xmlHttpRequest.send(requestXml);

        //发送后,过1秒还原按钮颜色
        setTimeout("document.getElementById('sendButton').removeAttribute('class')",1000);
    }        
    //回调函数   
    function callbackFunc(){   
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            var response = xmlHttpRequest.responseText;
            document.getElementById("responseData").innerText=response;
        }   
    }  

    //enter键按下
    function KeyDown()
    {
      if (event.keyCode == 13){
        event.returnValue=false;
        event.cancel = true;
        sendRequest();//或者触发document.getElementById("sendButton").click(); //调用请求按钮的单击事件
      }
    }

</script>
</HEAD>
<BODY>
    <nav class="" ><span></span></nav><br/><br/>

    <div>
    <input id="url" type="text"  value="http://localhost:8080/httpserver?a=2" class="width99" style="font-size:17px" title="请求地址,Enter触发请求"  onkeydown="KeyDown()"/>
    </div>    
    <div style="float: left ; 42%">
        <textarea id="requestData" class="width99"  rows="30" title="请求报文" ></textarea>
    
    </div>
    <div style="float: left; 56%">
            <button id="sendButton" onclick="sendRequest()" onkeydown="KeyDown()" title="Enter触发请求" ><font size="5">单击此按钮请求(或聚集于地址栏按Enter请求)</font></button>
        <textarea id="responseData" class="width99" rows="30" title="返回报文"></textarea>
    </div>

    
</BODY>
</HTML>

扩展 添加额外快捷键 (热键)js方法 

以下转自: js事件绑定快捷键以ctrl+k为例

<html>
<head>
<script type="text/javascript">
    window.onload = function() {
        HotKeyHandler.Init();
    }

    var HotKeyHandler = {
        currentMainKey : null,
        currentValueKey : null,
        Init : function() {
            HotKeyHandler.Register(0, "K", function() {
                alert("注册成功");
            });
        },
        Register : function(tag, value, func) {
            var MainKey = "";
            switch (tag) {
            case 0:
                MainKey = 17; //Ctrl 
                break;
            case 1:
                MainKey = 16; //Shift 
                break;
            case 2:
                MainKey = "18"; //Alt 
                break;
            }
            document.onkeyup = function(e) {
                HotKeyHandler.currentMainKey = null;
            }

            document.onkeydown = function(event) {
                //获取键值 
                var keyCode = event.keyCode;
                var keyValue = String.fromCharCode(event.keyCode);

                if (HotKeyHandler.currentMainKey != null) {
                    if (keyValue == value) {
                        HotKeyHandler.currentMainKey = null;
                        if (func != null)
                            func();
                    }
                }
                if (keyCode == MainKey)
                    HotKeyHandler.currentMainKey = keyCode;
            }
        }
    }
</script>
</head>
<body>测试,按下ctrl+k你就会发现神奇的事情发生了
</body>
</html>
原文地址:https://www.cnblogs.com/whatlonelytear/p/5783930.html