概要:
由于之前做的项目一直基于普通的企业管理级的常规业务系统,对于使用Ajax异步做的需求也
不是要求很高,没有考虑类似“重复点击提交按钮,短时间内提交会出现数据覆盖问题”。而在
面试的过程中,面试官提到做基于网站类项目开发的时候,对于短时间内“重复点击提交按钮,
短时间内提交会出现数据覆盖问题”如何避免。重新学习了一下Ajax异步请求,以及对这个问
题的思考和提出的解决方案。
注意:想要解决这个问题,首先就是理解Ajax的前身。日常开发过程中,大多数的时候我们使
用的就是jQuery封装好的$.ajax(options);而没有理解是如何封装和原理是什么。如果理
解$.ajax(options)的构造原理的话,那么就能很容易想到对于上面面试官提到的问题的解
决方案。
第一步:
我们需要先去学习一下关于ajax的api文档,点击这里
小结:
(1)通过阅读和尝试一下之后,我们能够认识到ajax的前身,通过创建XMLHttpRequest对象来完成向服务器发送 请求与接收响应消息的。
(2)我们需要掌握这里的核心事件和方法,以及请求状态。
重要的东西看下图,详细内容就去阅读上面的api文档连接。
第二步:
实际环境编写原生代码测试(我的环境基于ASP.NET MVC),并且一步步的和服务一起debug调试,会让你印象非常深刻。
下面是,前后台代码展示
前台:一个按钮的点击click触发异步请求操作。
//测试ajax
function bindBtnCheckOperation() {
debugger;
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
debugger;
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open("POST", sysAreas + controller+ "/Check", true);
xmlhttp.send();
}
后台:服务器的简单处理代码。
public ActionResult Check()
{
message = "我从密室逃脱啦!";
return Json(new { message=message},JsonRequestBehavior.AllowGet);
}
下面是通过图片来阐述执行上面异步请求的过程。
总述过程:
下面是分步:
下一步:
下一步:
下一步:
下一步:
下一步:
下一步:
下一步:
到这里,原生的ajax请求与服务器端的交互过程分析结束了。下面会介绍jQuery封装好的$.ajax(options)。