AJAX分为同步与异步两种方式,通常采用异步模式,因其不会阻塞页面,提升用户体验。但异步编程会增加代码复杂度,初学者若掌握不当,容易引发各类错误。
1、 页面加载一个jQuery库文件
2、 在ajax请求中添加async: false参数,即可实现同步发送数据。
3、 });
4、 通过选择发送前、执行ajax后、发送成功后三个时间点测试输出顺序,验证请求的同步特性。
5、 }
6、 });
7、 去掉async: false后,重新测试并对比两者的输出顺序。
8、 输出未按代码顺序执行,正是异步操作的特点。
9、 }
10、 });
11、 异步为何更复杂?观察代码,第2行与第3行输出顺序不确定,可能互相颠倒,难以预测执行流程。
12、 }
13、 });
14、 }
15、 });
16、 嵌套越深,顺序越难预料
17、 }
18、 });
19、 }
20、 });
21、 }
22、 });
23、 }
24、 });
25、 对比同步AJAX代码,输出顺序与代码书写一致,逻辑更清晰,便于理解与编写。
26、 同步代码的弊端在于,请求发出后页面会冻结,直到响应完成,期间用户无法进行任何操作,体验极差,如同浏览器卡死。正因如此,同步方式不适用于实际项目开发中。
