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的更多相关文章

  1. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  2. 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  3. 第一百六十节,封装库--JavaScript,ajax注册表单到数据库

    封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...

  4. 第一百五十八节,封装库--JavaScript,ajax说明

    封装库--JavaScript,ajax说明 封装库ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 /** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 * ...

  5. 原生JavaScript写AJAX

    前端JavaScript: function ajaxGet(url, obj) { var request; if(window.XMLHttpRequest) { request = new XM ...

  6. 原生javaScript完成Ajax请求

    使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...

  7. 用原生JavaScript写AJAX

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  8. javascript - 封装原生js实现ajax

    1 /* * ajax方法 */ var Ajax = function() { var that = this; //创建异步请求对象方法 that.createXHR = function() { ...

  9. 【转】封装原生JS实现Ajax

    function createXHR() { if (window.XMLHttpRequest) { //IE7+.Firefox.Opera.Chrome 和Safari return new X ...

随机推荐

  1. 在ubuntu下编写python

    一般情况下,ubuntu已经安装了python,打开终端,直接输入python,即可进行python编写. 默认为python2 如果想写python3,在终端输入python3即可. 如果需要执行大 ...

  2. 引用第三方 chalk 模块

    第三方模块没有默认引用到我们的电脑中,我们要进行下载 chalk 这个包是为了使输出不再单调,添加文字背景什么的,改变字体颜色什么的, npm install chalk //只需要写文件包名,不需要 ...

  3. centos6.4下安装python3.6.1

    1.安装编译环境所需包 #yum install zlib-devel bzip2-devel openssl-devel ncurese-devel gcc zlib 安装成功 2.下载源码包 #w ...

  4. openstack实战部署

    简介:Openstack系统是由几个关键服务组成,他们可以单独安装,这些服务根据你的云需求工作在一起,这些服务包括计算服务.认证服务.网络服务.镜像服务.块存储服务.对象存储服务.计量服务.编排服务和 ...

  5. Invalid argument value:无效参数值。原因是:把Session值user0当做username作为参数了。 而实际上此时username是user0的成员变量。参数应该是user0.getUsername();然后发现别人的List得加泛型,我的怎么不用加,运行报错,上网收了错误原因,因为导包错误,不小心导错包了,改为util.List包对了。

  6. Java基础:基本类型

    1.基本类型 Java中有8种基本类型,分为4类,分别为: 整型:包括  byte . short. int . long 泛型:float.double 字符型:char 布尔型:boolean 2 ...

  7. JS之缓冲动画

    原素材 main.html <!DOCTYPE html> <html lang="en"> <head> <link href=&quo ...

  8. Spring - JUnit整合测试

    1.导包:test.jar - (依赖 aop.jar) 2.使用@RunWith注解创建spring容器 - @RunWith(SpringJUnit4ClassRunner.class) 3.使用 ...

  9. webpack 简单笔记(三)vue-cli 使用 webpack-bundle-analyzer 分析

    当我们使用CommonsChunkPlugin插件时可以使用webpack-bundle-analyzer插件来分析分块是否达到我们的目地 安装 npm install --save-dev webp ...

  10. Longge's problem

    Longge's problem 求\(\sum_{i=1}^ngcd(i,n)\),\(n< 2^{31}\). 解 理解1: 注意式子的实际意义,显然答案只可能在n的约数中,而现在问题变成了 ...