纯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 ;width: 42%">
<textarea id="requestData" class="width99" rows="30" title="请求报文" ></textarea> </div>
<div style="float: left;width: 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>