原生ajax封装及用法
/* 封装ajax函数
 * @param {string}opt.type http连接的方式,包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的
 * @param {object}opt.data 发送的参数,格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
function ajax(opt) {
    opt = opt || {};
    opt.method = opt.method.toUpperCase() || 'POST';
    opt.url = opt.url || '';
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.success = opt.success || function () {};
    var xmlHttp = null;
    if (XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    else {
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    // xmlHttp.withCredentials = true; // 携带跨域cookie
    var params = [];
    for (var key in opt.data){
        params.push(key + '=' + opt.data[key]);
    }
    var postData = params.join('&');
    if (opt.method.toUpperCase() === 'POST') {
        xmlHttp.open(opt.method, opt.url, opt.async);
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
        xmlHttp.send(postData);
    }
    else if (opt.method.toUpperCase() === 'GET') {
        xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
        xmlHttp.send(null);
    }
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            opt.success(xmlHttp.responseText);
        }
    };
}
ajax({
    method: 'GET',
    url: 'http://cdn.aiclk.com/game/dice/dice.html?iclicashid=7664017&&gameTimes=8&&iclicashsid=&&redpack=1&&appShow=0&&back=0',
    data: {},
    success: function (response) {
       console.log(response);
    }
});
原生ajax封装及用法的更多相关文章
- 原生ajax封装,包含post、method方式
		原生ajax封装,包含post.method方式 function ajax(method, url, data, success) { var xhr = null; try { xhr = new ... 
- 浅谈AJAX的基本原理和原生AJAX的基础用法
		一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ... 
- 原生 Ajax 封装 和 Axios 二次 封装
		AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ... 
- 原生AJAX封装
		var ajaxHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function () { //声明异步对象变量 var xmlHttp = false; //声 ... 
- 原生Ajax封装随笔
		XMLHttpRequest 对象用于和服务器交换数据.我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: open(method,url,async) metho ... 
- 原生ajax封装,数据初始化,
		var ajaxTool = { setting : { method : 'get', url : location.href, data : '', callback : function(){a ... 
- 原生js封装ajax:传json,str,excel文件上传表单提交
		由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ... 
- 原生JS封装Ajax插件(同域&&jsonp跨域)
		抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ... 
- 原生javascript封装ajax和jsonp
		在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ... 
随机推荐
- Spring Boot 启动,1 秒搞定!
			Java技术栈 www.javastack.cn 优秀的Java技术公众号 原文: dev.to 翻译: ImportNew.com - 唐尤华译文: http://www.importnew.com ... 
- 2008年国外50个最佳CSS设计欣赏
			这50个CSS网站是由WebDesignerWall评选出来的,很具参考价值.我们在欣赏的同时,也能从中吸取很多灵感,也能从它们的源代码中学习更高级的CSS技术.今年,越来越多的设计师开始使用超大的背 ... 
- OC开发系列-成员变量的作用域
			成员变量的作用域 OC中成员变量有四种作用域,同时每一种作用域对应着响应的关键字. * @private:自能在当前类的实现@implementation中访问 * @protected: 可以在当前 ... 
- Spark应用程序
- 第一个Vus.js
			<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ... 
- --master-data 的作用
			Use this option to dump a master replication server to produce a dump file that can be used to set u ... 
- ES5-call,apply,bind的用法
			区别bind()与call()和apply()? 1. Function.prototype.bind(obj) : * 作用: 将函数内的this绑定为obj, 并将函数返回2. 面试题: 区别bi ... 
- [JZOJ6258] 【省选模拟8.9】轰炸
			题目 题目大意 给你一棵树和树上的许多条从后代到祖先的链,选择每条链需要一定代价,问覆盖整棵树的所有点的最小代价是多少. \(n,m\leq 100000\) 正解 (由于时间过于久远,所以直接说正解 ... 
- [JZOJ3320] 【BOI2013】文本编辑器
			题目 题目大意 给你一个文本,要删去其中所有的'e'. 有三种操作: h光标左移. x删除光标上面的字母(光标是横着的). fc跳到后面的第一个字符为'c'的位置. 问操作序列的最短长度. 思考历程 ... 
- 校园商铺-2Logback配置与使用-1Logback介绍
			日志的作用: 1.故障定位 2.显示程序运行状态 好的日志记录方式可以提供给我们足够多定位问题的依据,因此我们引入logback组件来进行日志的记录 1. Logback标准配置 1.1 Logbac ... 
