纯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. system verilog中的跳转操作

    在verilog中,使用disable声明来从执行流程中的某一点跳转到另一点.特别地,disable声明使执行流程跳转到标注名字的声明组末尾,或者一个任务的末尾. verilog中的disable命令 ...

  2. Linux网络基本配置

    一.Linux网络配置文件 1.  /etc/sysconfig/network-scripts/ifcfg-eth0 文件 在Red Hat系统中,系统网络设备的配置文件保存在/etc/syscon ...

  3. java.map使用

    Map以按键/数值对的形式存储数据,和数组非常相似,在数组中存在的索引,它们本身也是对象.       Map的接口       Map---实现Map       Map.Entry--Map的内部 ...

  4. WebViewJavascriptBridge详细使用（转载）

    WebViewJavascriptBridge是支持到iOS6之前的版本的,用于支持native的iOS与javascript交互.如果需要支持到iOS6之前的app,使用它是很不错的.本篇讲讲Web ...

  5. mysql自动添加最后修改时间

    字段不为空 NOT NULL 类型 :timestamp 默认值 :CURRENT_TIMESTAMP

  6. Linux Shell ---系统命令（1）

    date命令 功能说明:显示或设置系统时间与日期. 语 法: date [-d <字符串>][-u][+%H%I%K%l%M%P%r%s%S%T%X%Z%a%A%b%B%c%d%D%j%m ...

  7. 多媒体（1）：MCI接口编程

    目录 多媒体(1):MCI接口编程 多媒体(2):WAVE文件格式分析 多媒体(3):基于WindowsAPI的视频捕捉卡操作 多媒体(4):JPEG图像压缩编码 多媒体(1):MCI接口编程

  8. Exynos 4412 Uboot源码解析

    原文地址:http://www.cnblogs.com/jacklu/p/6226330.html Exynos 4412 Uboot的汇编代码就不贴了,没有的可以私信我. 这是我当时阅读代码时的思维 ...

  9. php查看网页源代码的方法

    这篇文章主要介绍了php查看网页源代码的方法,涉及php读取网页文件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了php查看网页源代码的方法.分享给大家供大家参考.具体实现 ...

  10. mysql优化要点（一）

    一  sql语句中使用函数需要注意,因为有可能结果每条语句都会调用,甚至表内每条记录都会调用. 二  注意转换,会消耗大量性能,甚至字符串的encoding不同,也会出现非常大的消耗 三  myisa ...