原生封装的ajax
原生封装的ajax的代码如下:
//将数据转换成 a=1&b=2格式;
function json2url(json){
var arr = [];
//加随机数防止缓存;
json.t = Math.random();
for(var name in json){
arr.push(name+'='+json[name]);
}
return arr.join('&');
}
function ajax(json){
//1.创建一个ajax对象;
if(window.XMLHttpRequest){
var oAjax = new XMLHttpRequest();
}else{
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
//考虑默认值:
if(!json.url){
alert('请输入合理的请求地址!');
return;
}
json.type = json.type || 'get';
json.time = json.time || 5000;
json.data = json.data || {};
//判断用户传递的是get还是post请求:
switch (json.type.toLowerCase()){
case 'get':
//2.打开请求;
oAjax.open('get',json.url+'?'+json2url(json.data),true);
//3.发送数据:
oAjax.send();
break;
case 'post':
//打开请求;
oAjax.open('post',json.url,true);
//设置请求头;
oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//发送数据;
oAjax.send(json2url(json.data));
}
//4.获取响应数据
oAjax.onreadystatechange = function() {
if (oAjax.readyState == 4) {
if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
//如果外边传递了成功的回调函数,那么就执行,
json.success && json.success(oAjax.responseText);
} else {
//如果外边传递了失败的回调函数,那么就执行,
json.error && json.error(oAjax.status);
}
clearTimeout(timer);//规定时间内取到数据后清除定时器;
}
};
var timer;
timer = setTimeout(function(){//设置网络响应超时;
alert('网络响应超时,请稍后再试');
oAjax.onreadystatechange = null;//网络超时后清除事件;
},json.time);
}
希望对大家有用
原生封装的ajax的更多相关文章
- 类似jQuery的原生JS封装的ajax方法
一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- javascript - 封装原生js实现ajax
1 /* * ajax方法 */ var Ajax = function() { var that = this; //创建异步请求对象方法 that.createXHR = function() { ...
- 原生js实现ajax封装
一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...
- 原生js中用Ajax进行get传参
原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 原生 JavaScript 实现 AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
- 用原生JavaScript写AJAX
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- 原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
随机推荐
- Atitit.故障排除系列---NoClassDefFoundError NoClassDefFoundError
Atitit.故障排除系列---NoClassDefFoundError NoClassDefFoundError java.lang.ClassNotFoundException找不到类异常.当应 ...
- 各种波形文件vcd,vpd,shm,fsdb生成的方法(zz)
仿真是IC设计不可或缺的重要步骤,仿真后一般需要记录下波形文件,用于做详细分析和研究.说一下几种波形文件WLF(Wave Log File).VCD(Value Change Dump)文件,fsdb ...
- xcode下build release版本号的.a库
1. 点击房子 图标button watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnlmZGl6dW8=/font/5a6L5L2T/fontsize/40 ...
- android.animation(5) - PropertyValuesHolder与Keyframe(转)
前几篇给大家讲了ValueAnimator.ObjectAnimator的知识,讲解了它们ofInt(),ofFloat(),ofObject()函数的用法.细心的同学可能会注意到,ValueAnim ...
- logcat的调试 比较有用的几个命令
网上很多的logcat调试命令,但是太多的命令只会令人盐杂. (主要是adt工具带的调试功能容易死掉 每次都要重启太烦) 个人认为有一下几个常用命令: adb logcat -c 清除所有以前的日志 ...
- win7下如何显示缅文和使用缅文输入法?
windows 7 操作系统默认不支持缅文,所以缅文在win7上不能显示,当然也没有提供缅文输入法. 一.显示缅文 windows系统下显示缅文字母只需要安装缅文字体就可以了.目前常见的缅文字体就是Z ...
- 转:Linux下which、whereis、locate、find 命令的区别
我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有时很长时间不会用到,当要用的时候经常弄混了,所以放到这里方便使用. which ...
- arduino知识
如果你买过Adafruit, Sparkfun, Seeedstudio和Arduino Store的Kit,不难发现Arduino官方的无论从包装和印刷上都是最具艺术气质的,其次是Sparkfun, ...
- 使用JAVASCRIPT进行数据完整性验证
页面输入完整性是编写BS经常遇到的问题,如果那里需要就到那里写,那可是要花不少的时候,并且造成不必要的浪费,下面是一个通过校验脚本,使用非常方便,通过传入FORM名就可以进行校验,通过在页面控件中增加 ...
- 22SpringMvc_jsp页面上的数据传递到控制器的说明
假设有这个一个业务:在jsp页面上写入数据,然后把这个数据传递到后台. 效果如下: