纯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. XE7 & IOS开发之开发账号（2）：发布证书、发布授权profile的申请使用，附Ad hoc真机调试、生成ipa文件演示（XCode所有版本通用，有图有真相）

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 注意,以下讨论都是以&q ...

  2. CentOS开机无法进入系统，如何查错

    开机时按e/F5按钮,进入选择系统界面 会出现 CentOS(2.6.32-...类似的选择列表,选择默认的系统然后按e: 这时会出现 root kernel ... initd... 三个选项,选择 ...

  3. HDNOIP201405杨辉三角

    2016.1.27 试题描述 杨辉三角是形如如下的数字三角形: 1 1    1 1   2    1 …… 现在想求出杨辉三角第N行的N个数中,有多少个数能被给定的质数p整除. 输入 一行两个空格隔 ...

  4. C++设计模式-Mediator中介者模式

    Mediator中介者模式作用:用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. UML如下: Colleage抽象同事类 ...

  5. Django1.7+JQuery+Ajax集成小例子

    Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证 ...

  6. 慕课网-Java入门第一季-6-10 练习题

    来源:http://www.imooc.com/ceping/1596 以下关于二维数组的定义和访问正确的是() A int[ ][ ] num = new int[ ][ ]; B int[ ][ ...

  7. JVM 内存的那些事

    转自:http://blog.jobbole.com/104863/ 对于Java程序员你来说,在虚拟机内存管理的帮助下,不需要为每个new对象都匹配free操作,内存泄露和内存溢出等问题也不太容易出 ...

  8. vs中使用openGL

    一.准备工作 创建Empty Project,为了能够使用OpenGL的库函数,需要把相关的库连接到项目中: 1.首先添加库的路径 如上,可以把需要添加的include.lib放到一起比较方便管理 这 ...

  9. 使用struts通配符报错

    报错截图如下: 主要原因是:对大小写敏感. struts.xml StudentAction.java jsp页面:(重点就是这里,锚里面需要特别注意,大小写应该与struts.xml里面的保持一致, ...

  10. winFrom 常用控件属性及方法介绍

    目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文本框)控件 4.RichTextBox控件 5.NumericUpDown控件 6.Button(按钮)控件 7.Gro ...