原生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 ...
随机推荐
- 专题:“find -perm”
Search for files which have read and write permission for their owner, and group, but which other us ...
- Ant属性文件
直接在构建文件中设置属性是好的,如果你使用的是少数属性.然而,对于一个大型项目,是要存储在一个单独的属性文件中. 存储在一个单独的文件中的属性可以让你重复使用相同的编译文件,针对不同的执行环境不同的属 ...
- mybatis浅显认识
mybatis主配置文件: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configu ...
- 20140315 模板类pair的用法 2、visual 2010调整代码格式是ctrl+k+
1.模板类pair的用法 包含头文件#include<utility> http://blog.csdn.net/laixingjun/article/details/9005200 ...
- 使用豆瓣源安装python包
Python pip安装的原理就是从Python的官方源https://pypi.python.org/pypi下载到本地安装, 但是访问官方源网络不稳定,速度较慢,我经常会遇到一个问题,pip安装包 ...
- 17-MySQL-Ubuntu-数据表的查询-分页(六)
分页(limit) 注: (1)limit位于SQL语句的最后面; (2)limit 2; 2表示查询前两条数据; (3)limit 0,2; 0表示查询第1页的起始数据的下标,2表示每页有两条数据 ...
- LA 3263 /// 欧拉定理 oj21860
题目大意: n个端点的一笔画 第n个和第1个重合 即一笔画必定是闭合曲线 输出平面被分成的区域数 欧拉定理 V+F-E=2 即 点数+面数-边数=2 (这里的面数包括了外部) #include < ...
- 深度探索C++对象模型之第一章:关于对象之对象的差异
一.三种程序设计范式: C++程序设计模型支持三种程序设计范式(programming paradiams). 程序模型(procedural model) char boy[] = "cc ...
- 7.ICMP与ping
ping是基于ICMP(Internet Control Message Protocol)协议工作的 ICMP报文封装在IP包里,作为“侦察兵”,非常轻巧. ICMP报文的类型有很多,最常用的是 ...
- 云HBase备份恢复,为云HBase数据安全保驾护航
摘要: 介绍了阿里云HBase自研备份恢复功能的基本背景以及基本原理架构和基本使用方法. 云HBase发布备份恢复功能,为用户数据保驾护航.对大多数公司来说数据的安全性以及可靠性是非常重要的,如何 ...