Ajax中的2个容易忽略的地方

前端之家收集整理的这篇文章主要介绍了Ajax中的2个容易忽略的地方前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Ajax在WEB程序中是一件利器,无论api的调用,还是与后台数据的交互等都需要用到,这儿记录下在使用过程中发现2个容易忽略而导致错误的地方,这两个地方也是一些javascript的基础知识,也可以当作重温一下javascript的基础。


1. 异步获取数据

异步是指,在ajax发送请求后,会继续执行下面的方法,直到请求返回时,再回过头来执行ajax中的回调方法。这也是ajax异步的强大之处,不会因为请求而影响程序的执行时间。但如果你下面执行的代码中,有需要请求返回的数据,那就会发生错误了,因为请求还没回来,你的代码就执行了。如下:

$.ajax({

url:'/test/test.PHP',dataType:'json',type:'get',success:function(data){
console.log(1);
}
});
console.log(2);
//控制台结果:
//2
//1

你会发现,控制台先出现的数字是2,之后才是1。如果后面有需要用到请求返回数据的代码,不妨写在回调方法success的function里面。


2.ajax中的this变量

在一个对象中,this变量代表的是自身这个对象,而在ajax中,this变量所代表的是传入ajax中的对象本身,如下:

vartestObj={

type:'thisistestObj.type',test:function(){

console.log('this.type:'+this.type);
var_this=this;

$.ajax({

url:'/test/test.PHP',success:function(data){
console.log('this.typeinajax:'+this.type);
console.log('_this.type:'+_this.type);
}
});
}
};
testObj.test();
//控制台出现的数据是:
//this.type:thisistestObj.type
//this.typeinajax:get
//_this.type:thisistestObj.type

所以说,要在ajax中使用this指向ajax以外的对象,是会导致一些错误的,所以先在ajax外面将this赋值给别的变量就可以了。如上面的_this。

猜你在找的Ajax相关文章