木灵鱼儿
阅读:1963
AJAX封装
笔记:
//创建XHR对象
function createXHR() {
if(typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest(); // ie7+ 及现代浏览器
}else if(typeof ActiveXObject != 'undefined') {
var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp']; //ie6及以下版本
for(var i = 0;i < versions.length;i++){
try {
return new ActiveXObject(versions[i]);
}catch(e) {
//跳过
}
}
}else {
throw new Error('您当前的浏览器不支持XHR对象!');
}
}
//ajax封装
function ajax(obj){
var xhr = createXHR();
obj.url += '?rang=' + Math.random();
if(obj.method === 'get') {
obj.url +=obj.url.indexOf('?') == -1 ? '?' +obj.data : '&' + obj.data; //这里要假设如果不使用'?rang=' + Math.random()的随机数字方法来使ie不读取缓存的话,就要这样判断
}
if(obj.async === true){
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
status();
}
}
}
xhr.open(obj.method,obj.url,obj.async);
if(obj.method === 'post') {
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(obj.data);
}else {
xhr.send(null);
}
if(obj.async === false) {
status();
}
function status() {
if(xhr.status == 200) {
obj.soccuss(xhr.responseText); //数据回调
}else {
throw new Error('数据返回出错!错误代码:' + xhr.status + '错误信息:' + xhr.statusText);
}
}
}
//字符转码
function encod(data){
var arr = [];
for(var i in data) {
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}
//调用代码
addEvent(document,'click',function(){
ajax({
method : 'post',
url : 'demo3.php',
async : true,
data : encod({
name : 'Lee',
age : 100
}),
soccuss : function(text) {
alert(text);
}
});
})
//兼容添加事件
function addEvent(obj,type,fn) {
if(obj.addEventListener) {
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
};
}
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
fetch和ajax获取不到头信息的解决办法
今天就遇到一个问题,后端从头信息给我携带了数据,我需要在请求头中获取,但是不管怎么get,返回的永远是null,但是f12去看响应头,那个数据就在那,亮瞎了眼。一个大大的问号?why???谷歌查了下原因,大概就两种:安全限制,不允许客户端获取部分头信息跨域了,对于跨域请求,客户端允许获取的response header字段只限于“simple response header”和“Access-Control-Expose-Headers” ,在“Access-Control-Allow-Headers”中加了无效说到底,还是后端的设置,如果是nigix可以参考下面的代码:以token头信...
快递信息查询 ajax+api
依旧采用ajax配合阿里云api来获取快递信息,支持自动判断快递公司,初次对接,json部分筛选好做,就是整体的事件判断太麻烦了,快递100的网页还可以通过快递单号先做一个本地预判,这个主要他有大数据分析,有数据库支持,我这边没这个基础,不然也能做,他无非就是分析多少位,开头什么数字,结束什么数字,开头是什么字母,为此我尝试的为顺丰加了一个单独预判,就是单号开始输入sf,大小写都能识别为顺丰。瞬间被用完100次免费查询额度,我还没体验几次呢,无奈续费了下api不多说,上图:demo地址查看功能介绍[x] 采用html5+css3构建[x] 使用jq v3.4.1[x] 响应式结构支持32...

Ajax壁纸站点(跨域)
以前写静态站点的时候一直想要一个图片的站点,但是又不想弄成个本地的,个人又懒得更新,这次ajax尝试使用api来获取别人分享的图片,为此就有了这个页面。提供了诸多筛选条件,分类,排序,图片px大小,比例,色系,后续有能力再加上搜索关键词,下一步就是加上图箱,我要想一个好一点的图箱办法,然后支持后续更新升级,长期使用,以前写的有点简陋。不多说,上图:功能详解:[x] 无刷新加载图片[x] 跨域[x] 丰富的筛选条件[x] 支持翻页,因为是ajax刷新,目前固定6页的页值,下一页可以无限,只要还有内容就可以一直下一页[x] 响应式结构[ ] 后续增加图箱[ ] 后续增加指定跳转到某一页Dem...

Ajax
异步监听readyState == 3当readyState的值等于3时,此时服务器正在与浏览器传输数据,这个时候其实是可以进行获取到responseText值得,但是这个值并不完整,只有当readyState == 4时,值才是完整的。但是如果我们需要获取的内容是极其长的字符,那么就可以通过监听这个状态,然后轮询的方式,可以在内容没有全部下载来之前就可以提前更新内容了,这样就可以避免在下载的过程中产生的等待时间。var req = new XMLHttpRequest(); var getLastInterval =null, lastLength = 0; req.open(...