/* 封装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封装及用法的更多相关文章

  1. 原生ajax封装,包含post、method方式

    原生ajax封装,包含post.method方式 function ajax(method, url, data, success) { var xhr = null; try { xhr = new ...

  2. 浅谈AJAX的基本原理和原生AJAX的基础用法

    一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...

  3. 原生 Ajax 封装 和 Axios 二次 封装

    AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...

  4. 原生AJAX封装

    var ajaxHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function () { //声明异步对象变量 var xmlHttp = false; //声 ...

  5. 原生Ajax封装随笔

    XMLHttpRequest 对象用于和服务器交换数据.我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: open(method,url,async) metho ...

  6. 原生ajax封装,数据初始化,

    var ajaxTool = { setting : { method : 'get', url : location.href, data : '', callback : function(){a ...

  7. 原生js封装ajax:传json,str,excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  8. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  9. 原生javascript封装ajax和jsonp

    在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...

随机推荐

  1. 拾遗:不用使 sizeof 获取数组大小

    ... #include <stdio.h> #include <unistd.h> int main(void) { ] = {}; size_t num = () - (i ...

  2. 剑指offer——09青蛙跳台阶

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果).   题解: 说俗一点,就是找规律: 不不,首先,我们分析一下,青蛙第一 ...

  3. Spark中的各种action算子操作(java版)

    在我看来,Spark编程中的action算子的作用就像一个触发器,用来触发之前的transformation算子.transformation操作具有懒加载的特性,你定义完操作之后并不会立即加载,只有 ...

  4. Flutter BottomNavigationBar切换会刷新当前页面解决方

    问题描述 BottomNavigationBar 是flutter 中最常用的UI组建,刚接触时发现在切换tab 的时候,会刷新当前的所有状态,每个页面都会重新刷新.于是乎,在这里先记录下解决方案. ...

  5. CSIC_716_20191105【数字、字符串、列表】

    python数据类型及其内置方法 一.整型:主要用于数学运算 其他进制----->转十进制 """ 其他进制转换为十进制 通过int('x进制数',x)实现 &qu ...

  6. 【JZOJ6376】樱符[完全墨染的樱花]

    description analysis 无向图上任意两点最大流不超过\(2\),说明该图是仙人掌 由于最大流等于最小割,如果一条边在两个环里,断掉两个端点至少需要\(3\)的代价 对于该仙人掌,求两 ...

  7. luoguP1029 最大公约数和最小公倍数问题 [gcd][数论]

    题目描述 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1.P,Q是正整数 2.要求P,Q以x0为 ...

  8. SQL Server [join] 整理

    [表A]Aid    Aname   Acode1       aa      0012       bb      0023       cc      0034       dd      004 ...

  9. spring mvc多环境下配置文件的设置

    在实际开发时经常需要把一些配置信息写在配置文件,比如mysql的主机地址.端口号.用户名和密码等.另外,在开发代码时可能用一套配置参数,而部署到测试环境时又会用另一套配置参数,测试完毕再部署到线上环境 ...

  10. selenium python bindings 项目结构总结

    一个合理的文档结构在import的过程中会避免很多错误,踩完坑来记录. webtests/ framework.py webdriver.py test_file.py module/ __init_ ...