原生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 ...