纯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. Maven-Build Lifecycle（构建生命周期）

    https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html https://www.w3cschoo ...

  2. DELPHI XE10，JSON 生成和解析，再利用INDYHTTP控件POST

    Delphi XE10,Json 生成和解析,再利用indyhttp控件Post 年09月20日 :: 阅读数: --不多说,直接上代码 procedure TFrmMain.Brand; var J ...

  3. 在做销售录入界面时,如何使用dbgrid?(50分)

    给你段源码看一看用stringgird做得: procedure Tfrmingoods.adddata ; var i:integer; begin do begin ,i])=trim(goods ...

  4. Java之修改文件内容：字符串逐行替换

    依赖包: <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</a ...

  5. cxf 方法添加注解

    /** * 登录 * @param uid * @param password * @return */ @POST @Path(value = "/login") public ...

  6. BZOJ2843极地旅行社&BZOJ1180[CROATIAN2009]OTOCI——LCT

    题目描述 给出n个结点以及每个点初始时对应的权值wi.起始时点与点之间没有连边.有3类操作:  1.bridge A B:询问结点A与结点B是否连通. 如果是则输出“no”.否则输出“yes”,并且在 ...

  7. BZOJ1030[JSOI2007]文本生成器——AC自动机+DP

    题目描述 JSOI交给队员ZYX一个任务,编制一个称之为“文本生成器”的电脑软件:该软件的使用者是一些低幼人群,他们现在使用的是GW文本生成器v6版.该软件可以随机生成一些文章―――总是生成一篇长度固 ...

  8. POJ3273-Monthly Expense-二分答案

    FJ对以后的每一天会花mi块钱,他想把这些天分成M个时段,然后每个时段的花费和最小. 二分答案,如果加上这天还没有达到mid,就加上它.之后看分成的时段是否大于M #include <cstdi ...

  9. bypy 用法

    因为服务器上爬取到的40个G的数据采用http,ftp,scp传输到本地效果不太理想.找资料就看到了bypy,利用百度云存储解决这个问题,解决了服务器带宽有限的问题. pip install bypy ...

  10. enumerate()用法

    语法: enumerate(sequence,[start=0]) test = [i for i in range(9)] for i in test: print(i) for i,j in en ...