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>
  • 相关阅读:
    QFramework 使用指南 2020(二):下载与版本介绍
    QFramework 使用指南 2020 (一): 概述
    Unity 游戏框架搭建 2018 (二) 单例的模板与最佳实践
    Unity 游戏框架搭建 2018 (一) 架构、框架与 QFramework 简介
    Unity 游戏框架搭建 2017 (二十三) 重构小工具 Platform
    Unity 游戏框架搭建 2017 (二十二) 简易引用计数器
    Unity 游戏框架搭建 2017 (二十一) 使用对象池时的一些细节
    你确定你会写 Dockerfile 吗?
    小白学 Python 爬虫(8):网页基础
    老司机大型车祸现场
  • 原文地址:https://www.cnblogs.com/YKSlu/p/7405882.html
Copyright © 2011-2022 走看看