支持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. Python（day1）

    一.Python的属于解释型语言. 编译型:一次性,将全部的程序编译成二进制文件,然后再运行. 优点:运行速度快. 缺点:开发效率低,不能跨平台. 解释型:当你的程序运行时,一行一行的解释,并运行. ...

  2. 验证码无法显示，服务器端出现异常：Could not initialize class sun.awt.X11GraphicsEnvironment

    异常信息: Caused by: java.lang.NoClassDefFoundError: Could not initialize class sun.awt.X11GraphicsEnvir ...

  3. ajax经典面试题

    1.什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识) 什么是ajax: AJAX是“Asynchronous JavaScript and XML”的缩写.他是指一种创建交互式网页应 ...

  4. org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): cn.e3mall.search.mapper.ItemMapper.getItemList

    java.lang.RuntimeException: org.apache.ibatis.binding.BindingException: Invalid bound statement (not ...

  5. Github远程推送一直Everything up-to-date

    问题描述: Github远程推送一直Everything up-to-date,但其实并没有推送成功,远程库中没有更新文件 可能原因分析及解决方法: "git push with no ad ...

  6. 《JavaScript DOM编程艺术》学习笔记（三）

    终于要完成这最后一部分了,距离第二部分已经过去五天了,一直想早点写的,但还是拖到今天了………… 34.position属性的和法制:static是position属性的默认值,意思是有关元素将按照它们 ...

  7. 关于Tensorflow安装opencv和pygame

    1.安装opencv https://www.lfd.uci.edu/~gohlke/pythonlibs/#opencv C:\ProgramData\Anaconda3\Lib\site-pack ...

  8. Redis Cluster(集群)

    一.概述 在前面的文章中介绍过了redis的主从和哨兵两种集群方案,redis从3.0版本开始引入了redis-cluster(集群).从主从-哨兵-集群可以看到redis的不断完善:主从复制是最简单 ...

  9. 高性能网络服务器编程：为什么linux下epoll是最好，Netty要比NIO.2好？

    基本的IO编程过程(包括网络IO和文件IO)是,打开文件描述符(windows是handler,java是stream或channel),多路捕获(Multiplexe,即select和poll和ep ...

  10. 1 小时 SQL 极速入门（二）

    上篇我们说了 SQL 的基本语法,掌握了这些基本语法后,我们可以对单表进行查询及计算分析.但是一个大的系统,往往会有数十上百张表,而业务关系又错综复杂.我们要查的数据往往在好几张表中,而要从多张表中来 ...