• 封装ajax小工具:


      1 ajax-lib/ajaxutils.js:
      2 
      3 // 创建request对象
      4 function createXMLHttpRequest() {
      5     try {
      6         return new XMLHttpRequest();//大多数浏览器
      7     } catch (e) {
      8         try {
      9             return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
     10         } catch (e) {
     11             try {
     12                 return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本    
     13             } catch (e) {
     14                 alert("哥们儿,您用的是什么浏览器啊?");
     15                 throw e;
     16             }
     17         }
     18     }
     19 }
     20 /*
     21  * option对象有如下属性
     22  */
     23          /*  请求方式method, 
     24         /*  请求的url url, 
     25         /*  是 否异步asyn, 
     26         /*  请求体params, 
     27         /*  回调方法callback,
     28         /*  服务器响应数据转换成什么类型type
     29         */
     30 function ajax(option) {
     31     /*
     32      * 1. 得到xmlHttp
     33      */
     34     var xmlHttp = createXMLHttpRequest();
     35     /*
     36      * 2. 打开连接
     37      */
     38     if(!option.method) {//默认为GET请求
     39         option.method = "GET";
     40     }
     41     if(option.asyn == undefined) {//默认为异步处理
     42         option.asyn = true;
     43     }
     44     xmlHttp.open(option.method, option.url, option.asyn);
     45     /*
     46      * 3. 判断是否为POST
     47      */
     48     if("POST" == option.method) {
     49         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     50     }
     51     /*
     52      * 4. 发送请求
     53      */
     54     xmlHttp.send(option.params);
     55     
     56     /*
     57      * 5. 注册监听
     58      */
     59     xmlHttp.onreadystatechange = function() {
     60         if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断
     61             var data;
     62             // 获取服务器的响应数据,进行转换!
     63             if(!option.type) {//如果type没有赋值,那么默认为文本
     64                 data = xmlHttp.responseText;
     65             } else if(option.type == "xml") {
     66                 data = xmlHttp.responseXML;
     67             } else if(option.type == "text") {
     68                 data = xmlHttp.responseText;
     69             } else if(option.type == "json") {
     70                 var text = xmlHttp.responseText;
     71                 data = eval("(" + text + ")");
     72             }
     73             
     74             // 调用回调方法
     75             option.callback(data);
     76         }
     77     };
     78 };
     79 
     80 
     81 
     82 
     83 
     84 servlet:
     85     public void doGet(HttpServletRequest request, HttpServletResponse response)
     86             throws ServletException, IOException {
     87 
     88         String str = "{"name":"zhangSan", "age":189999, "sex":"male"}";
     89         response.getWriter().print(str);
     90         System.out.println(str);
     91         }
     92 
     93 使用:
     94 <script type="text/javascript">
     95     window.onload = function() {
     96         var btn = document.getElementById("btn");
     97         btn.onclick = function() {
     98             ajax(
     99             {
    100                 url : "<c:url value ='/Aservlet'/>",
    101                 type : "json",
    102                 callback : function(data) {
    103                     document.getElementById("h3").innerHTML = data.name +","
    104                             + data.age + "," + data.sex;
    105                     }
    106             }
    107             );
    108         };
    109     };
    110 </script>
    111 </head>
    112 <body>
    113     <button id="btn">点击这里</button>
    114     <h1>显示自己的ajax小工具</h1>
    115     <h3 id="h3"></h3>
    116 </body>
  • 相关阅读:
    将MySQL中的数据导入到Solr
    Solr中schema.xml的Field介绍
    Window下Nginx的安装和启动
    Idea中运行shell脚本
    window10 下安装Mysql5.6
    Solr Admin管理界面使用说明
    Solr 整合中文分词器mmseg4j
    Solr安装和使用
    ActiveMQ 安装和使用
    AbstractQueuedSynchronizer源码解析
  • 原文地址:https://www.cnblogs.com/xiaoxiao5ya/p/4932310.html
Copyright © 2020-2023  润新知