我揭开了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都是基于这个函数的,如果小伙伴们有想深入了解的,可以看上面的那个网址~~

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

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 &#128515; https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: &quot;./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...