支持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. ctf密码学习题总结

    1.变异凯撒 加密密文:afZ_r9VYfScOeO_UL^RWUc格式:flag{ }   一看题中说的是凯撒加密,我就赶快使用工具列出了所有的组合,然而发现没有一个是我想要的. 于是乎,又重新审题 ...

  2. 创建一个git仓库

    1.git init 使用git init命令初始化一个git仓库,git仓库会生成一个.git目录 git init 1.使用指定的目录作为我们的git仓库 git init newrepo 2.初 ...

  3. 使用PIA查找组件的PeopleSoft导航

    导航到企业组件>查找对象导航. 使用组件名称 使用页面名称 使用辅助页面名称 使用内容参考名称 只需输入对象名称,然后单击“搜索”即可.在这个例子中.我们知道组件名称即'PRCSDEFN',我们 ...

  4. Windows系统MySQL安装配置

    MySQL是一个开放源代码的数据库管理系统,是由MySQL AB公司开发.发布并支持的,现在属于Oracle旗下产品. 与其他大型数据库管理系统如Oracle.DB2.SQL Server等相比,虽然 ...

  5. python | Elasticsearch-dsl常用方法总结(join为案例)

    Elasticsearch DSL是一个高级库,其目的是帮助编写和运行针对Elasticsearch的查询.它建立在官方低级客户端(elasticsearch-py)之上. 它提供了一种更方便和习惯的 ...

  6. webpack配置非CMD规范的模块

    一.前言 webpack在配置多页面开发的时候 ,发现用 import 导入 Zepto 时,会报 Uncaught TypeError: Cannot read property 'createEl ...

  7. cmd 创建用户，并授权管理员权限就可以远程登陆了

    创建账号 net user 用户名 密码 /add     //注意空格 授权管理员权限 net localgroup Administrators 用户名 /add              // ...

  8. python scrapy框架爬取豆瓣

    刚刚学了一下,还不是很明白.随手记录. 在piplines.py文件中 将爬到的数据 放到json中 class DoubanmoviePipelin2json(object):#打开文件 open_ ...

  9. [python] 溜了，溜了，七牛云图片资源批量下载 && 自建图床服务器

    故事背景: 七牛云最近一波测试域名操作真是把我坑死了!这简直和百度赠送你2T网盘,之后再限速一样骚操作.于是,痛定思痛自己买个云主机.自己搭图床应用! 1.七牛图片批量下载到本地 1.1 曲折尝试 当 ...

  10. 实战深度学习OpenCV(三)：视频实时canny边缘检测

    #include <stdio.h> #include"opencv2/opencv.hpp" using namespace cv; int main() { Vid ...