支持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. jQuery与其它js库共用

    <script src="js/zepto.min.js"></script>//其它js库<script src="http://comm ...

  2. IaaS，PaaS和SaaS

    云计算的三种服务模式:IaaS,PaaS和SaaS IaaS: Infrastructure-as-a-Service(基础设施即服务)是第一层. PaaS: Platform-as-a-Servic ...

  3. 漏测BUG借鉴

    2. websocket: 用户频繁刷新,后台每次请求新的排队,内存溢出 1. websocket: 北京中心连接正常,外地中心,连接超时,应考虑到外地延迟问题

  4. 【转】priority_queue优先队列

    转自:http://www.cppblog.com/shyli/archive/2007/04/06/21366.html http://www.cppblog.com/shyli/archive/2 ...

  5. BOM与DOM操作

    BOM: OM-JavaScript是运行在浏览器中的,所以提供了一系列对象用于和浏览器窗口进行交互,这些对象主要包括window.document.location.navigator和screen ...

  6. 别以为真懂Openstack: 虚拟机创建的50个步骤和100个知识点(2)

    二.nova-api 步骤3:nova-api接收请求 nova-api接收请求,也不是随便怎么来都接收的,而是需要设定rate limits,默认的实现是在ratelimit的middleware里 ...

  7. 音视频编解码技术（二）：AAC 音频编码技术

    一.AAC编码概述 AAC是高级音频编码(Advanced Audio Coding)的缩写,出现于1997年,最初是基于MPEG-2的音频编码技术,目的是取代MP3格式.2000年,MPEG-4标准 ...

  8. idea之debug

    [转载]原文地址:https://www.cnblogs.com/nihaorz/p/7613967.html 在Intellij IDEA中使用Debug Debug用来追踪代码的运行流程,通常在程 ...

  9. \r,\n,\r\n的区别和用法

    https://blog.csdn.net/xiaofei2010/article/details/8458605

  10. [Swift]LeetCode495. 提莫攻击 | Teemo Attacking

    In LOL world, there is a hero called Teemo and his attacking can make his enemy Ashe be in poisoned ...