封装原生JavaScript的ajax
function obj2str(data) {
data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
data.t = new Date().getTime();
var res = [];
for (var key in data){
//在URL中是不可以出现中文的,如果出现了中文需要转码,可以调用encodeURIComponent方法,URL中只可以出现字母、数字、下划线
res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key]));
}
return res.join("&");
}
function myAjax(option){
var params = obj2str(option.data);//key=value&key=value;
var xmlhttp,timer;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (option.type.toUpperCase()==="GET") {//toLowerCase将大写转化为小写
xmlhttp.open("GET",option.url+"?"+params,true)
xmlhttp.send();
}else{
xmlhttp.open("POST",option.url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(params);
}
xmlhttp.onreadystatechange = function (ev2) {
if (xmlhttp.readyState === 4){
clearInterval(timer);
//判断是否请求成功(Http状态码大于等于200,且小于300,和状态码等于304为请求成功)
if (xmlhttp.status>=200&&xmlhttp.status<300||xmlhttp.status===304) {
option.success(xmlhttp);
}else{
option.error(xmlhttp);
}
}
};
if (option.timeout){
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
},option.timeout);
}
}
封装原生JavaScript的ajax的更多相关文章
- 原生 JavaScript 实现 AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
- 原生JavaScript实现AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
- 第一百六十节,封装库--JavaScript,ajax注册表单到数据库
封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...
- 第一百五十八节,封装库--JavaScript,ajax说明
封装库--JavaScript,ajax说明 封装库ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 /** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 * ...
- 原生JavaScript写AJAX
前端JavaScript: function ajaxGet(url, obj) { var request; if(window.XMLHttpRequest) { request = new XM ...
- 原生javaScript完成Ajax请求
使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...
- 用原生JavaScript写AJAX
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- javascript - 封装原生js实现ajax
1 /* * ajax方法 */ var Ajax = function() { var that = this; //创建异步请求对象方法 that.createXHR = function() { ...
- 【转】封装原生JS实现Ajax
function createXHR() { if (window.XMLHttpRequest) { //IE7+.Firefox.Opera.Chrome 和Safari return new X ...
随机推荐
- Hadoop完全分布式配置
***** 全部三个节点 *****1. 关闭防火墙 service iptables stop chkconfig iptables off2. 修改主机名,Hadoop主机名中不能出现_和- vi ...
- East Central North America 2006 Hie with the Pie /// 状压dp oj22470
题目大意: 输入n,有n个地方(1~n)需要送pizza pizza点为0点 接下来n+1行每行n+1个值 表示 i 到 j 的路径长度 输出从0点到各点送pizza最后回到0点的最短路(点可重复走) ...
- 工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox
原文:工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox 1. 背景 因为最近在使用wpf开发桌面端应用,在查看页面需要把TextBox和Combox等控件设置为只读的.原本是个很简 ...
- Django问题2
接触django是从上个月开始,学习python时间也不长,但我经常在社区看看别人发表的文章,早上看到一篇不错的博客,却一直不能访 问,最终从bing的缓存里找到,因为害怕丢失和忘掉,所以顺便翻译过来 ...
- eval()方法与str()方法
eval()方法与str()方法 #_author:Administrator#date:2019/10/31 a={ 'q':{'xxx':3456}}#将一个字典转换成一个字符串a=str(a)p ...
- 有关阿里云对SaaS行业的思考,看这一篇就够了
过去二十年,随着改革开放的深化,以及中国的人口红利等因素,中国诞生了大批To C的高市值互联网巨头,2C的领域高速发展,而2B领域一直不温不火.近两年来,在C端流量饱和,B端数字化转型来临的背景下,中 ...
- 使用java代码动态配置与xml文件结合的方式使用mybatis-generator生成代码配置
1.使用java代码动态配置与xml文件结合的方式使用mybatis-generator生成代码配置 2.上代码:在resources目录下新建:generatorConfiguration.xml文 ...
- nginx 解决问题
- Windows的SEH机理简要介绍
1.异常分类 一般来说,我们把Exception分为2类,一类是CPU产生的异常,我们称之为CPU异常(或者硬件异常).另一类为是通过调用RaiseException API产生的软件异常,我们称之为 ...
- iOS之CATextLayer属性简介
1.CATextLayer简介 CATextLayer快速高效简单地来渲染纯文本.NSAttributedString /* The text layer provides simple text l ...