zoukankan      html  css  js  c++  java
  • 自定义封装ajax,复制即可用

    支持get、post请求

      1 <!DOCTYPE html>
      2 <html>
      3 
      4     <head>
      5         <meta charset="UTF-8">
      6         <title>自定义封装ajax</title>
      7     </head>
      8 
      9     <body>
     10     </body>
     11 
     12 </html>
     13 <script type="text/javascript">
     14     function ajax(obj) {
     15 
     16         obj = obj || {};
     17         obj.method = obj.method.toUpperCase() || "POST";
     18         obj.url = obj.url || "";
     19         obj.async = obj.async || true;
     20         obj.data = obj.data || null;
     21         obj.success = obj.success || function() {};
     22         obj.headers = obj.headers || null;
     23         var xmlHttp = null;
     24 
     25         if(window.XMLHttpRequest) {
     26 
     27             xmlHttp = new XMLHttpRequest(); //非IE浏览器
     28 
     29         } else {
     30             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") //IE
     31         }
     32 
     33         //            处理参数
     34 
     35         if(obj.method.toUpperCase() == "POST") {
     36             xmlHttp.open(obj.method, obj.url, obj.async);
     37 
     38             if(obj.headers.ContentType) {
     39 
     40                 xmlHttp.setRequestHeader("Content-Type", obj.headers.ContentType);
     41 
     42             } else {
     43 
     44                 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
     45 
     46             }
     47 
     48             xmlHttp.send(JSON.stringify(obj.data)); //到了这的post是各个参数拼接在一起了,类似get请求??????????
     49         } else {
     50             var par = [];
     51 
     52             for(var key in obj.data) {
     53 
     54                 par.push(key + '=' + obj.data[key])
     55 
     56             }
     57             var postData = par.join("&");
     58 
     59             xmlHttp.open(obj.method, obj.url + "?" + postData, obj.async);
     60             xmlHttp.send(null)
     61 
     62         }
     63 
     64         xmlHttp.onreadystatechange = function() {
     65 
     66             if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
     67                 obj.success(JSON.parse(xmlHttp.responseText))
     68             }
     69 
     70         }
     71 
     72     }
     73 
     74     //get请求实例
     75     ajax({
     76 
     77         method: 'get',
     78         url: "http://risk.haitun.hk/risk-console/risk/messageInfo/list",
     79         data: {
     80             msgType: 1,
     81             pageNum: 1,
     82             pageSize: 6
     83         },
     84         success: function(res) {
     85             console.log(res, 'get请求实例')
     86         }
     87 
     88     })
     89 
     90     //post请求实例
     91     ajax({
     92         method: 'POST',
     93         url: "http://risk.haitun.hk/risk-console/risk/riskRule/list",
     94         data: {
     95             pageNum: 1,
     96             pageSize: 10
     97         },
     98         async: false,
     99         headers: {
    100             "ContentType": "application/json;charset=utf-8" //注意头部,ContentType
    101         },
    102         success: function(res) {
    103 
    104             console.log(res, 'post请求实例')
    105 
    106         }
    107     })
    108 </script>
  • 相关阅读:
    20165320 第四次实验 Android开发
    20165320 第十周课上测试补做
    20165320 第九周课下测试补做
    20165320 Java实验三:敏捷开发与XP实践
    20165320 第九周学习总结
    20165320 第八周课下补做
    20165320 结对编程第二周
    20165320 第八周学习总结
    20165329 Java实验二:面向对象编程
    第十周课上测试补做
  • 原文地址:https://www.cnblogs.com/YKSlu/p/7405882.html
Copyright © 2011-2022 走看看