Ajax方法的三种实现方式

1、自定义封装ajax方法

 

function ajax(url, onsuccess) {
    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建           //XMLHTTP对象，考虑兼容性。XHR
    xmlhttp.open("POST", url, true); //“准备”向服务器的GetDate1.ashx发出Post请求（GET可能会有缓存问题）。这里           //还没有发出请求

    //AJAX是异步的，并不是等到服务器端返回才继续执行
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2（请求已发送，            //正在处理中）、3（响应中已有部分数据可用了，但是服务器还没有完成响应的生成）
        {
            if (xmlhttp.status == 200) //如果Http状态码为200则是成功
            {
                onsuccess(xmlhttp.responseText);//成功之后，调用的方法，方法名是传过来的。                              //成功后会自动调用该方法
            }
            else {
                alert("AJAX服务器返回错误！");
            }
        }
    }
    //不要以为if (xmlhttp.readyState == 4) {在send之前执行！！！！
    xmlhttp.send(); //这时才开始发送请求。并不等于服务器端返回。请求发出去了，我不等！去监听onreadystatechange              //吧！
}
调用处：
function ajax(url, onsuccess)//onsuccess需已经定义
或者function ajax(url, function onsuccess(responseText){
//新定义一个方法 ，传方法，也就是传方法引用。
})

2、jquery下
    

  $(function () {
            $("#time").click(function () {
                $.ajax({
                    url: "/Ajax/GetDate",
                    type: "POST",
                    success: function (data) {
                        alert(data)
                    },
                    data:"id=2"
                });
                //或者。。
                $.get("/Ajax/GetDate", {}, function (data) {
                    alert(data)
                });
               //或者
                $.post("/Ajax/GetDate", {}, function (data) {
                    alert(data);
                });
            });
        });

 

3、微软MVC自带的，利用如下两个js

  <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
  
实例：
<script>
        function Success(data) {
            //alert(data)
  }
<div>
        @using(Ajax.BeginForm("GetDate","Ajax",new AjaxOptions(){
        Confirm="确定提交吗？",HttpMethod="Post",
        InsertionMode = InsertionMode.Replace,//模式 Replace 替换当前文本 InsertBefore 添加在前 InsertAfter 添加在后
        UpdateTargetId = "result",//返回内容放到ID为result的标签里
        OnSuccess="Success",  //返回成功时执行Success函数
        LoadingElementId="loading"//载入时显示ID为loading的内容
        }))
        {
         <div>
        用户名:<input type="text"  name="username"/><br />
        <input type="submit" value="提交" />
       </div>
        }

        <div id="result" >

        </div>
        <div id="loading" style="display:none">
            <img src="~/Content/ActionTest.jpg" />
        </div>
    </div>