封装原生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 ...
随机推荐
- iOS疑问
1.__NSFrozenDictionaryM在数组类簇中是什么角色?
- Apache服务器性能如何优化
配置网站,要充分的把系统资源利用出去,榨干系统的一切潜能,让网站速度发挥到极致.Apache,是用户浏览和网站数据的一个中间桥梁.但是在这里,我们虽然做得并不是很多,但是如果心细打理,有些设置也会起到 ...
- nodejs之连接mysql数据库
一:demo var mysql = require('mysql'); var connection = mysql.createConnection({ host : '192.16 ...
- USACO training course Checker Challenge N皇后 /// oj10125
...就是N皇后 输出前三种可能排序 输出所有可能排序的方法数 vis[0][i]为i点是否已用 vis[1][m+i]为i点副对角线是否已用 m+i 为从左至右第 m+i 条副对角线 vis[1] ...
- DNA repair HDU - 2457 AC自动机+DP
题意: 给你N个模板串,并且给你一个文本串, 现在问你这个文本串最少需要改变几个字符才能使得它不包含任何模板串. (以上字符只由A,T,G,C构成) 题解: 刚开始做这一题的时候表示很懵逼,好像没有学 ...
- pg总览
一.编译安装初始化等 ./configure --prefix=/release --with-openssl --without-ldap --with-libxml - -enable-threa ...
- fetchSql是3.2.3新增的连贯操作方法,用于直接返回SQL而不是执行查询。
fetchSql是3.2.3新增的连贯操作方法,用于直接返回SQL而不是执行查询. 例如: $result = M('User')->fetchSql(true)->find(1); 输出 ...
- import: not authorized `time' @ error/constitute.c/WriteImage/1028. import: not authorized `rospy' @ error/constitute.c/WriteImage/1028.
- 19-10-26-Night-D
压表的技巧. ZJ一下: T1,考试不会哈夫曼树只压到$1MB$最后截掉了一部分. T2,直接暴力丢上去.$\Theta(N+\sqrt{N}\log N)$ T3,现场码出左右旋然后就不会了$QAQ ...
- hession RMI 远程调用
/** * * @author administror * 在java中,需要去extends 继承java.rmi.Remote 接口,才能称为在于服务器流的远程对象. * 各客服端调用 * */p ...