支持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. css实现中文换行，英文换行，超出省略

    英文换行时,是以单词换行,在对应的标签添加对应的属性即可 1 word-break:break-all;只对英文起作用,以字母作为换行依据 2 word-wrap:break-word; 只对英文起作 ...

  2. 《JavaScript DOM编程艺术》学习笔记（二）

    终于开始接着写我的读书笔记了. 17.DOM有insertBefore方法,但并没有提供insertAfter()方法.不过可利用已有的DOM方法和属性编写此函数: function insertAf ...

  3. 数据调试~~TCP转串口、串口转TCP调试

    Android socket开发了一个socket客户端,当输入服务器ip以及端口,建立连接之后,Android可以发送数据到电脑接收服务器端. 如果电脑端没有socket服务器怎么办?方法如下: 1 ...

  4. 【安富莱】【RL-TCPnet网络教程】第10章 RL-TCPnet网络协议栈移植（FreeRTOS）

    第10章     RL-TCPnet网络协议栈移植(FreeRTOS) 本章教程为大家讲解RL-TCPnet网络协议栈的FreeRTOS操作系统移植方式,学习了第6章讲解的底层驱动接口函数之后,移植就 ...

  5. 高级Java面试总结2

    1. JVM结构原理.GC工作机制详解 答:具体参照:JVM结构.GC工作机制详解     ,说到GC,记住两点:1.GC是负责回收所有无任何引用对象的内存空间. 注意:垃圾回收回收的是无任何引用的对 ...

  6. 动态规划----最长公共子序列(LCS)问题

    题目: 求解两个字符串的最长公共子序列.如 AB34C 和 A1BC2   则最长公共子序列为 ABC. 思路分析:可以用dfs深搜,这里使用到了前面没有见到过的双重循环递归.也可以使用动态规划,在建 ...

  7. [SQL]LeetCode181. 超过经理收入的员工 | Employees Earning More Than Their Managers

    SQL架构 Create table If Not Exists Employee (Id ), Salary int, ManagerId int) Truncate table Employee ...

  8. 容器云架构中使用gorouter+haproxy作为流量入口

    ​ 小贴士 Gorouter 项目地址:https://github.com/cloudfoundry/gorouter/Gorouter来源于CloudFoundry.是一个高性能.轻量级的路由器及 ...

  9. 8.Django缓存和信号

    缓存 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将某个views的返回值保存至内存或者memcache中, ...

  10. Zabbix4.0.3解决中文乱码

    字体下载地址:https://github.com/hejianlai/Zabbix/raw/master/font/msyh.ttf放到以下目录,可能你的路径和我的不一样用find查出来cd /us ...