纯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>