认识Ajax——前身【一】

概要：

由于之前做的项目一直基于普通的企业管理级的常规业务系统，对于使用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)。