支持get、post请求

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>自定义封装ajax</title>

     </head>

     <body>

     </body>

 </html>

 <script type="text/javascript">

     function ajax(obj) {

         obj = obj || {};

         obj.method = obj.method.toUpperCase() || "POST";

         obj.url = obj.url || "";

         obj.async = obj.async || true;

         obj.data = obj.data || null;

         obj.success = obj.success || function() {};

         obj.headers = obj.headers || null;

         var xmlHttp = null;

         if(window.XMLHttpRequest) {

             xmlHttp = new XMLHttpRequest(); //非IE浏览器

         } else {

             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") //IE

         }

         //            处理参数

         if(obj.method.toUpperCase() == "POST") {

             xmlHttp.open(obj.method, obj.url, obj.async);

             if(obj.headers.ContentType) {

                 xmlHttp.setRequestHeader("Content-Type", obj.headers.ContentType);

             } else {

                 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");

             }

             xmlHttp.send(JSON.stringify(obj.data)); //到了这的post是各个参数拼接在一起了，类似get请求？？？？？？？？？？

         } else {

             var par = [];

             for(var key in obj.data) {

                 par.push(key + '=' + obj.data[key])

             }

             var postData = par.join("&");

             xmlHttp.open(obj.method, obj.url + "?" + postData, obj.async);

             xmlHttp.send(null)

         }

         xmlHttp.onreadystatechange = function() {

             if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                 obj.success(JSON.parse(xmlHttp.responseText))

             }

         }

     }

     //get请求实例

     ajax({

         method: 'get',

         url: "http://risk.haitun.hk/risk-console/risk/messageInfo/list",

         data: {

             msgType: 1,

             pageNum: 1,

             pageSize: 6

         },

         success: function(res) {

             console.log(res, 'get请求实例')

         }

     })

     //post请求实例

     ajax({

         method: 'POST',

         url: "http://risk.haitun.hk/risk-console/risk/riskRule/list",

         data: {

             pageNum: 1,

             pageSize: 10

         },

         async: false,

         headers: {

             "ContentType": "application/json;charset=utf-8" //注意头部，ContentType

         },

         success: function(res) {

             console.log(res, 'post请求实例')

         }

     })

 </script>

自定义封装ajax，复制即可用的更多相关文章

  1. 封装Ajax框架！(前言篇)

    Ajax技术就是利用javascript和xml实现异步交互的功能. 首先先来介绍一下Ajax相关知识点,如果这些你都会的话,请直接跳转到封装ajax框架!(代码篇) 一.Ajax对象的创建 1.创建 ...

  2. 前后端交互之封装Ajax+SpringMVC源码分析

    为什么需要封装呢?因为用的多,我想将其封装成函数,当我想用它时,只需将那个函数对应的js文件引入即可,而不要重复写很多相同代码,利于开发效率的提高. 无论是$.ajax或$.post.$.get等,在 ...

  3. 封装AJax实现JSON前台与后台交互

    实践技术点:1.AJax自定义封装 2.后台序列化与反序列化JSON 3.客户端解析JSON字符串,处理DOM 实现代码如下: 1.JS脚本代码:   1 /*** NOTE:AJAX处理JS TIM ...

  4. Windows 环境搭建 PostgreSQL 逻辑复制高可用架构数据库服务

    本文主要介绍 Windows 环境下搭建 PostgreSQL 的主从逻辑复制,关于 PostgreSQl 的相关运维文章,网络上大多都是 Linux 环境下的操作,鲜有在 Windows 环境下配置 ...

  5. 使用原生JS封装Ajax

    使用原生 的JS封装 Ajax,实现 仿JQuery的Ajax,post,get三种异步请求方式: var MAjax = { //根据浏览器创建异步对象 createXhr: function () ...

  6. 原生javascript封装ajax和jsonp

    在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...

  7. AJAX编程-封装ajax工具函数

    即 Asynchronous [e'sɪŋkrənəs] Javascript And XML,AJAX 不是一门的新的语言,而是对现有技术的综合利用.本质是在HTTP协议的基础上以异步的方式与服务器 ...

  8. easyUI单元格合并自定义封装

    1.指定列的行合并 * 效果图: 合并自定义封装(一)   * 程序: function mergeGridColCells(grid,rowFildName) { var rows=grid.dat ...

  9. iOS开发——UI篇Swift篇&玩转UItableView（四）自定义&封装

    UItableView自定义&封装 一:Model class AppsModel: NSObject { //定义模型的三个属性 var imageName:String! //图片名称 v ...

随机推荐

  1. java DTO对象与PO对象的相互转换

    2018-09-27 10:27:50 前言: 在实际开发中往往需要DTO对象与PO对象的相互转换: 先说说什么是DTO对象吧,个人觉得DTO就是PO的扩展而已,PO专门指向数据库,DTO作扩展(字段 ...

  2. vue简单指令笔记

    v-once 执行一次性插值,数据改变插值处内容不会更新 <span v-once>这个将不会改变: {{ msg }}</span> v-text 插入文本 <!--两 ...

  3. JavaScript递归函数解“汉诺塔”

    “汉诺塔”是一个著名的益智游戏.塔上有3根柱子和一套直径各不相同的空心圆盘.开始时柱子上的所有圆盘都按照从小到大的顺序堆叠.目标是通过每次移动一个圆盘到另一根柱子,最终把一堆圆盘移动到目标柱子上,过程 ...

  4. windows运维如何批量远程桌面

    作用:windows下批量管理远程桌面, http://www.appmazing.com/ 官方站点  http://www.appmazing.com/files/RDO_Setup.exe wi ...

  5. Java作业五（2017-10-15）

    /*3-6.程序员;龚猛*/ 1 package zhenshu; import java.util.Scanner; public class text { public static void m ...

  6. 爱奇艺技术分享：爱奇艺Android客户端启动速度优化实践总结

    本文由爱奇艺技术团队原创分享,原题<爱奇艺Android客户端启动优化与分析>. 1.引言 互联网领域里有个八秒定律,如果网页打开时间超过8秒,便会有超过70%的用户放弃等待,对Andro ...

  7. [Swift]LeetCode60. 第k个排列 | Permutation Sequence

    The set [1,2,3,...,n] contains a total of n! unique permutations. By listing and labeling all of the ...

  8. [Swift]LeetCode969.煎饼排序 | Pancake Sorting

    Given an array A, we can perform a pancake flip: We choose some positive integer k <= A.length, t ...

  9. 面试题：反转字符串（leetcode344）

    编写一个函数,其作用是将输入的字符串反转过来.输入字符串以字符数组 char[] 的形式给出. 不要给另外的数组分配额外的空间,你必须原地修改输入数组.使用 O(1) 的额外空间解决这一问题. 你可以 ...

  10. 还在使用SimpleDateFormat？你的项目崩没？

    如果是在多线程环境下,就需要注意了. 要点: 1.加Synchronized同步: 2.使用ThreadLocal: 3.jdk8使用DateTimeFormatter替代SimpleDateForm ...