纯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. Xilinx FPGA全局时钟和全局时钟资源的使用方法

    对FPGA的全局时钟了解不多,遂转载一篇文档: http://xilinx.eetop.cn/?action-viewnews-itemid-42 目前,大型设计一般推荐使用同步时序电路.同步时序电路 ...

  2. Linux内核模块设计

    内核的设计有两种方式:单内核和微内核,两者各有优劣,关于两者的比较可以参见wiki．windowds和Solaris采用微内核结构． Linux内核采用单内核结构,设计比较简单,但单内核的理念是把所有 ...

  3. python 核心编程课后练习(chapter 6)

    6-1 #6-1 #help(string) import string str = "helloworld" substr = "h1e" if string ...

  4. Asprise-OCR的使用

    Asprise-OCR下载地址: http://asprise.com/product/ocr/download.php?lang=csharp 其中需要使用的3个dll是AspriseOCR.dll ...

  5. 如何创建vss2005的数据库

    配置如下 VSS手工创建数据库的步骤(设数据库根目录为D:\VSS): 1.在根目录中创建名为srcsafe.ini(全局配置文件)的文件,文件内容如下: Data_Path = data Temp_ ...

  6. Java反射机制DOME

    Java反射机制 public class TestHibernate { @Test public void TestHb(){ try { Class cs = Class.forName(&qu ...

  7. PHP数据类型

    在PHP中,一共支持8种数据类型:整型,浮点型,布尔型,字符串型,数组,对象,空类型(NULL),资源型 标量类型 int(integet)整数类型 整型数据:在内存中占4个字节,也就是32个bit位 ...

  8. Entity Framework学习笔记——记一个错误解决方式及思路

    继续之前设定的学习目标前,先来一篇小小的外篇.按照第一篇里的配置方式配置好的工程前两天还能正常工作,昨天却突然无法通过Add-Migration命令进行数据库的升级.错误信息如下: System.Da ...

  9. IIS7 IIS8 中多个版本php共存的方法

    原文地址: https://blog.cozof.com/pieces/54.shtml 最近又重回.net,用回IIS.然后用到某个php开源项目,需要低版本的php,之前装的一个php5.5不能用 ...

  10. 24. Oracle 10g安装检测中DHCP报错

    编辑hosts文件: #vi /etc/hosts 添加虚拟机ip 主机名,原来的保持不变,如: 192.168.100.12          localhost.localdomain