我揭开了Ajax的红盖头之二~Ajax异步~

前端之家收集整理的这篇文章主要介绍了我揭开了Ajax的红盖头之二~Ajax异步~前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

上次整理了下ajax的$.get,$.post,$.getJSON这三个函数,Ajax都是异步的,那么今天就简单的说说异步这个事儿吧~~
我们在上次的demo.html里加一句alert(1),代码如下:

<script>
	$(function() {
		$.getJSON('data.json',function(json) {
			alert('用户名是:'+json.username);
			alert('说的话是:'+json.text);
		});
		alert(1);
	});
</script>
猜猜那个会先执行?


看,为什么alert(1)会先执行,是因为 Ajax 要通过网络去请求data.json 这个文件,当请求成功并返回结果的时候才会调用回调函数,也就是getJSON 里面的function,那么这个时候alert(1)已经先执行,来个图让你们看的更明白点


代码执行到$.getJSON的时候会出发送网络请求,这时候代码不会等待请求结束,而是继续向下执行,那么就执行到了alert(1); ,过了一会网络请求结束并返回结果才会调用$.getJSON里面的function,也就是回调函数,所以如果想让alert(1) 在返回结果的后面执行就要把alert(1)放在回调函数里面啦。

OK,我们再来看看$.get和$.getJSON有什么不同,按照之前写的比较一下就可以发现了,$.get 返回的其实是一个字符串,那么$.getJSON 呢? 返回的是一个JSON 对象,接着上面的代码,如果我把$.getJSON 的请求地址改成2.html 会发生什么呢?来,咱们实践下,发现了吗,只执行了alert(1),后面的没有再执行了,这是为什么呢,因为出错了,2.html 返回的并不是一个json对象,那么getJSON会认为这是一个错误的请求,那既然出错了,我们不能让用户觉得系统一点反应都没有,这样不好对吧,我要给用户一个提示,告诉他操作出错了,我们再改写一下:

<script>
	$(function() {
		$.getJSON('2.html',{'hello':'啊啊啊!'},function(json) {
			alert('用户名是:'+json.username);
			alert('说的话是:'+json.text);
		}).fail(function(){
			alert('请求出错了!');
		});
	});
</script>

运行之后呢

OK啦,当请求出错的时候我们要给用户一个提示。整理到这里,常用的Ajax方法就讲完啦,最后再说一个,打开http://www.css88.com/jqapi-1.9/jQuery.ajax/ 翻到下面有个例子:



我们可以看出来请求的方法是post,请求的地址是url,请求的参数name=John&location=Boston,请求完成后会执行一个alert。之前讲的$.get,$.post,$.getJSON都是基于这个函数的,如果小伙伴们有想深入了解的,可以看上面的那个网址~~

发完之前的Ajax之后,发现自己还是米有睡意~~所以就想着把剩下的也整理出来再去睡~~嘿嘿~ 师父呀,你教我的Ajax我都整理完咯~~接下来我会整理出来lesscss和jade的~~

猜你在找的Ajax相关文章