我们可以在前端使用jQuery.ajax与后台程序进行数据交互。如下是一个简单的$.ajax函数。
$.ajax({
url: "/api/UserApi",
type: "GET",
data: { name: "Maggie"},
contentType: "application/json;charset=utf-8",
statusCode: {
200: function (result) {
// some code to deal with result
},
500: function () {
alert("Failed to get user by name");
}
}
});
$.ajax函数具有多个可选的参数。其中asyc(Boolean)参数默认值为true，这代表当前的ajax请求是异步的。我们可以通过设置asyc参数来控制ajax的请求模式。
若使用默认的异步模式，发送ajax异步后，在等待server端返回数据的过程中，前段程序会继续执行ajax块之后的内容，直到server返回结果。这段时间中，程序拥有多个执行的线程，这样可以适当的提高性能和用户体验。而使用同步方式时，发送ajax请求后，程序会一直等待server端，直到server端返回数据。这段期间内，页面会出现假死状态直至整个ajax块执行完毕。
但是某些情况下使用异步模式反而会影响用户体验或者造成程序出错：
- 在加载页面时，如果页面的某个子模块需要使用ajax请求向后台获取数据进行显示，而获取数据的时间又比较长，这样页面中该子模块在ajax加载完毕之前就没有数据。但用户却并不知道页面并未加载完成，以至用户误操作页面。这种情况下可以使用下面几种方法来解决:
- 在该模块加载完成之前显示加载条，来提醒用户该模块并未加载完成。
- 也可以将ajax设置为同步模式，这样在页面加载完成前整个页面会由于等待进入假死状态直至页面加载完成。
- 使用异步的ajax请求时，若代码需要严格的运行顺序，比如ajax块之后的内容依赖ajax的返回数据，在执行ajax之后的内容时往往ajax还没有执行完毕，因此程序便会出错。以下几种方法可以用来解决这个问题。
- 一种是将需要在ajax请求返回后所做的操作写在Ajax的回调函数中。但是这样ajax模块就失去了通用性。
- 也可以通过Jquery Callback函数来解决。在主流程调用含有ajax函数的方法时，将需要在ajax块之后执行的方法作为回调函数传入，然后在ajax的回调函数中调用传入的回调函数。
- 可以将ajax设置为同步模式便可以保证程序的顺序执行。某些情况下这种方法最简单有效，但也就失去了异步模式带来的好处。
我会在之后加入各种方法的实例。