纯js异步无刷新请求

下载地址:http://pan.baidu.com/s/1slakL1F

所以因为非IE浏览器都禁止跨域请求,所以以只支持IE.

  1. <HTML>
  2. <!-- 乱码(未实践是否有用) http://blog.csdn.net/myfuturein/article/details/6603500 -->
  3. <HEAD>
  4. <!--  meta 解释 :  http://www.haorooms.com/post/html_meta_ds -->
  5. <meta http-equiv="content-Type"content="text/html;charset=gbk">
  6. <meta name="author" content="king">
  7. <style>
  8. *{ margin:2;padding:0;}
  9. .top{background:#5DF5FD; height:20px; position:fixed; z-index:8000;width:100%}
  10. .width99{width:99%;padding:0;}
  11. .trigger{background:red}
  12. </style>
  13.  
  14. <TITLE>纯js异步无刷新请求</TITLE>
  15.  
  16. <script type="text/javascript">
  17.     var xmlHttpRequest;
  18.     //XmlHttpRequest对象
  19.     function createXmlHttpRequest(){
  20.         if(window.ActiveXObject){ //如果是IE
  21.             return new ActiveXObject("Microsoft.XMLHTTP");
  22.         }else if(window.XMLHttpRequest){ //非IE浏览器
  23.             return new XMLHttpRequest();
  24.         }
  25.     }
  26.     function sendRequest(){
  27.         //发送前改变下按钮颜色
  28.         var btn = document.getElementById("sendButton");
  29.         btn.setAttribute('class','trigger');
  30.  
  31.         // "http://localhost:8080/httpserver?a=2";
  32.  
  33.         var url = document.getElementById("url").value;
  34.         //1.创建XMLHttpRequest组建
  35.         xmlHttpRequest = createXmlHttpRequest();   
  36.  
  37.         //2.设置回调函数
  38.         xmlHttpRequest.onreadystatechange = callbackFunc;   
  39.  
  40.         //3.初始化XMLHttpRequest组建
  41.         xmlHttpRequest.open("post",url,true);   
  42.  
  43.         //4.发送请求
  44.         var requestXml = document.getElementById("requestData").innerText;
  45.         xmlHttpRequest.send(requestXml);
  46.  
  47.         //发送后,过1秒还原按钮颜色
  48.         setTimeout("document.getElementById('sendButton').removeAttribute('class')",1000);
  49.     }
  50.     //回调函数
  51.     function callbackFunc(){
  52.         if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
  53.             var response = xmlHttpRequest.responseText;
  54.             document.getElementById("responseData").innerText=response;
  55.         }
  56.     }  
  57.  
  58.     //enter键按下
  59.     function KeyDown()
  60.     {
  61.       if (event.keyCode == 13){
  62.         event.returnValue=false;
  63.         event.cancel = true;
  64.         sendRequest();//或者触发document.getElementById("sendButton").click(); //调用请求按钮的单击事件
  65.       }
  66.     }
  67.  
  68. </script>
  69. </HEAD>
  70. <BODY>
  71.     <nav class="" ><span></span></nav><br/><br/>
  72.  
  73.     <div>
  74.     <input id="url" type="text"  value="http://localhost:8080/httpserver?a=2" class="width99" style="font-size:17px" title="请求地址,Enter触发请求"  onkeydown="KeyDown()"/>
  75.     </div>
  76.     <div style="float: left ;width: 42%">
  77.         <textarea id="requestData" class="width99"  rows="30" title="请求报文" ></textarea>
  78.  
  79.     </div>
  80.     <div style="float: left;width: 56%">
  81.             <button id="sendButton" onclick="sendRequest()" onkeydown="KeyDown()" title="Enter触发请求" ><font size="5">单击此按钮请求(或聚集于地址栏按Enter请求)</font></button>
  82.         <textarea id="responseData" class="width99" rows="30" title="返回报文"></textarea>
  83.     </div>
  84.  
  85. </BODY>
  86. </HTML>

扩展 添加额外快捷键 (热键)js方法

以下转自：js事件绑定快捷键以ctrl+k为例

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.     window.onload = function() {
  5.         HotKeyHandler.Init();
  6.     }
  7.  
  8.     var HotKeyHandler = {
  9.         currentMainKey : null,
  10.         currentValueKey : null,
  11.         Init : function() {
  12.             HotKeyHandler.Register(0, "K", function() {
  13.                 alert("注册成功");
  14.             });
  15.         },
  16.         Register : function(tag, value, func) {
  17.             var MainKey = "";
  18.             switch (tag) {
  19.             case 0:
  20.                 MainKey = 17; //Ctrl
  21.                 break;
  22.             case 1:
  23.                 MainKey = 16; //Shift
  24.                 break;
  25.             case 2:
  26.                 MainKey = "18"; //Alt
  27.                 break;
  28.             }
  29.             document.onkeyup = function(e) {
  30.                 HotKeyHandler.currentMainKey = null;
  31.             }
  32.  
  33.             document.onkeydown = function(event) {
  34.                 //获取键值
  35.                 var keyCode = event.keyCode;
  36.                 var keyValue = String.fromCharCode(event.keyCode);
  37.  
  38.                 if (HotKeyHandler.currentMainKey != null) {
  39.                     if (keyValue == value) {
  40.                         HotKeyHandler.currentMainKey = null;
  41.                         if (func != null)
  42.                             func();
  43.                     }
  44.                 }
  45.                 if (keyCode == MainKey)
  46.                     HotKeyHandler.currentMainKey = keyCode;
  47.             }
  48.         }
  49.     }
  50. </script>
  51. </head>
  52. <body>测试，按下ctrl+k你就会发现神奇的事情发生了
  53. </body>
  54. </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. linux和Mac上安装composer

    使用命令行方式,可以直接使用下面的命令,顺序执行: php -r "copy ('https://getcomposer.org/installer','composer-setup.php ...

  2. PAT 1037 在霍格沃茨找零钱

    https://pintia.cn/problem-sets/994805260223102976/problems/994805284923359232 如果你是哈利·波特迷,你会知道魔法世界有它自 ...

  3. Windows 安装 docker 以及1709的简单使用

    PS C:\> Install-Module -Name DockerMsftProvider -Repository PSGallery -Force PS C:\> Install-P ...

  4. 流程控制之if判断，while循环，for循环

    if判断? 什么是if判断? 判断一个条件如果成立则做...不成立则... 为什么要有判断? 让计算机像人一样具备判断的能力 如何用if判断 if 条件1: code1    code2    cod ...

  5. ssh 将22端口换为其它 防火墙设置

    废话不多说,先通过当前的SSH端口(默认为:22)登陆. 1.修改配置文件:/etc/ssh/sshd_config ,找到 #port 22 2.先将Port 22 前面的 # 号去掉,并另起一行. ...

  6. js timeout

    setTimeOut(“”,毫秒):調用函數時,不是立刻執行,而是間隔一定的時間后在執行: clearTimeOut():清除計時器

  7. python之random函数

    # random各种使用方法 import random # 随机生成[0.1)的浮点数 print("random():", random.random()) # 随机生成100 ...

  8. 在property里面设置版本号可灵活引用

  9. idea 项目打包发布

    clean install -Dmaven.test.skip=true -pl 项目名(maven为准) -am -amd

  10. MT【204】离散型最值

    (联赛一试2006,14)．将2006表示成5个正整数$x_1,x_2,x_3,x_4,x_5$之和．记$S=\sum\limits_{1\le i<j\le5}{x_ix_j}$问:(1) 当 ...