封装原生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 ...
随机推荐
- win 安装composer (详细教程)
Composer是PHP的一个依赖管理工具,申明项目所依赖的代码库,它会在项目中为你安装,所以在实际项目开发中很方便,那么如何安装呢?今天就与大家分享下. 1首先下载好Composer,文件为exe类 ...
- VS2010-MFC(常用控件:静态文本框)
转自:http://www.jizhuomi.com/software/179.html 关于对话框的使用和各种通用对话框的介绍就到此为止,从本节开始将讲解各种常用控件的用法.常用控件主要包括:静态文 ...
- Python入门教程 超详细1小时学会Python
Python入门教程 超详细1小时学会Python 本文适合有经验的程序员尽快进入Python世界.特别地,如果你掌握Java和Javascript,不用1小时你就可以用Python快速流畅地写有用的 ...
- shell脚本练习04
######################################################################### # File Name: -.sh # Author ...
- 廖雪峰Java13网络编程-2Email编程-2接收Email
1接收Email协议类型 接收Email:收件人通过MUA软件把邮件从MDA抓取到本地计算机的过程. 1.1 POP3 从MUA到MDA使用最广泛的是协议是POP3 Post Office Proto ...
- 箭头函数报错:Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
解决:根目录新建babel.config.js加入如下内容 module.exports = { presets: [ "@babel/preset-env", "@ba ...
- 移动端自定义输入框的vue组件 ----input
<style scoped lang="less"> .keyboard { font-family: -apple-system, BlinkMacSystemFon ...
- iOS7新特性-完美解决iOS7关于自定义导航条UIBarButtonItem偏移的问题
前言: 本文由DevDiv社区@Vincent 原创,转载请注明出处! http://www.devdiv.com/iOS_iPhone-ios_ios_uibarbuttonitem_-thread ...
- Bean容器的初始化
Bean容器的初始化
- iOS开发CATransform3D.h属性详解和方法使用
1.CATransform3D简介 layer有个属性transform,是CATransform3D类型.可以使其在三维界面作平移.缩放和旋转单独或组合动画! CATransform3D结构体: / ...