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

纯js异步无刷新请求(只支持IE)【原】的更多相关文章

  1. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  2. Asp.net页面无刷新请求实现

    Asp.net页面无刷新请求实现 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...

  3. ASP.NET MVC 使用Uploadify实现多文件异步无刷新上传

    软件技术开发,合作请联系QQ:858-048-581 这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解 ...

  4. js实现无刷新表单提交文件，将ajax请求转换为form请求方法

    最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...

  5. ajaxFileUpload.js 无刷新上传图片，支持多个参数同时上传，支持 ie6-ie10

    /* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...

  6. history.js 一个无刷新就可改变浏览器栏地址的插件（不依赖jquery）

    示例: http://browserstate.github.io/history.js/demo/     简介   HTML4有一些对浏览历史的前进后退API的支持如:   window.hist ...

  7. js实现无刷新上传

    在新增数据项的时候,用ajax实现无刷新提交,但上传文件的时候,由于数据类型原因,不能将页面的<asp:FileUpload>中以字符串值的方式传到js里调用.我一共找到了两个方法予以解决 ...

  8. knockout Ajax异步无刷新分页 Demo +mvc+bootstrap

    最近工作中web客户端需要用到knockout,在此记录下一些Demo,以后用到的时候查找起来方便.也希望给新入门的knockout使用者一点经验.knockout官方文档.这儿是一个使用knocko ...

  9. js写的复制功能，只支持IE

    如果用js写,只能支持IE,如果想全支持,需要用jQuery的插件:jquery.zclip.js 下面是用js写的: var copyHref = function(){               ...

随机推荐

  1. Docker attach

    Description Attach local standard input, output, and error streams to a running container Usage dock ...

  2. windows 与linux 上面PG的简单验证

    0.0 目的 验证一下 windows 上面 和linux上面的数据文件是否可以 冷备份 恢复. 1 方法关闭 windows机器上面postgresql 的服务 我这边是PG10.4 可以使用命令 ...

  3. PRML读书笔记_绪论

    一.基本名词 泛化(generalization) 训练集所训练的模型对新数据的适用程度. 监督学习(supervised learning) 训练数据的样本包含输入向量以及对应的目标向量. 分类( ...

  4. delphi有关获取其他程序的窗口及对窗口内控件的操作

    1.获取当前所有窗口 procedure TForm1.Button1Click(Sender: TObject);var szText: array[0..254] of char; hCurren ...

  5. codeforces515B

    Drazil and His Happy Friends CodeForces - 515B Drazil有很多朋友,他们中有些人是快乐的,有些人是不快乐的. Drazil想让他的朋友变得快乐.于是, ...

  6. codeforces9A

    Die Roll CodeForces - 9A Yakko,Wakko和Dot,世界著名的狂欢三宝,哈哈,不知道你是否看过这个动画片. 某一天,过年了,他们决定暂定卡通表演,并去某些地方旅游一下.Y ...

  7. Hadoop源码分析之FileSystem抽象文件系统

    Hadopo提供了一个抽象的文件系统模型FileSystem,HDFS是其中的一个实现. FileSystem是Hadoop中所有文件系统的抽象父类,它定义了文件系统所具有的基本特征和基本操作. Fi ...

  8. BZOJ3129 SDOI2013方程（容斥原理+扩展lucas）

    没有限制的话算一个组合数就好了.对于不小于某个数的限制可以直接减掉,而不大于某个数的限制很容易想到容斥,枚举哪些超过限制即可. 一般情况下n.m.p都是1e9级别的组合数没办法算.不过可以发现模数已经 ...

  9. 洛谷P3628 [APIO2010]特别行动队（动态规划，斜率优化，单调队列）

    洛谷题目传送门 安利蒟蒻斜率优化总结 由于人是每次都是连续一段一段地选,所以考虑直接对\(x\)记前缀和,设现在的\(x_i=\)原来的\(\sum\limits_{j=1}^ix_i\). 设\(f ...

  10. [HNOI2010] 城市建设_动态最小生成树（Dynamic_MST）

    这个题...暴力单次修改\(O(n)\),爆炸... $ $ 不过好在可以离线做 如果可以在 分治询问 的时候把图缩小的话就可以做了 硬着头皮把这个骚东西看完了 $ $ 动态最小生成树 然后,就把它当 ...