Ajax【ASP.NET】

【Ajax】

Ajax在本质上是一个浏览器端的技术
Ajax技术之主要目的在于局部交换客户端及服务器间数据
这个技术的主角XMLHttpRequest的最主要的特点，在于能够不用重载载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新）
与服务器之间的沟通，完全是透过Javascripe来执行
使用XMLHttpRequest本身传送的数据量小，所以反应会更快，也就是让网络程序更像一个桌面应用程序
Ajax就是运用Javascript在后天悄悄帮你跟服务器要资料，最后再由Javascript或DOM来把你呈现结果，因为所有的动作都是由JavaScript代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦。

【 Ajax——get请求】

.aspx文件

    <title></title>
    <script src="../Js/jquery-1.7.1.js"></script>
   <script type="text/javascript">
        $(function () {
            $("#btnGetDate").click(function () {
                //开始通过AJAX向服务器发送请求.
                var xhr;
                if (XMLHttpRequest) {//表示用户使用的高版本IE，谷歌，狐火等浏览器
                    xhr = new XMLHttpRequest();
                } else {// 低IE
                   xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("get", "GetDate.ashx?name=zhangsan&age=12", true);//打开方式，地址，是否异步
                xhr.send();//开始发送
                //回调函数:当服务器将数据返回给浏览器后，自动调用该方法。
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {//表示服务端已经将数据完整返回，并且浏览器全部接受完毕。
                        if (xhr.status == 200) {//判断响应状态码是否为200.

                            alert(xhr.responseText);
                        }
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="button" value="获取服务器端时间"id="btnGetDate" />
        </div>
    </form>
</body>
</html>

.ashx文件

 public class GetDate : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write(DateTime.Now.ToString());
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

【 Ajax——post请求】

.aspx文件

   <title></title>
    <script src="../Js/jquery-1.7.1.js"></script>
    <script type="text/javascript">
          $(function () {
            $("#btnPost").click(function () {
                var xhr;
                if (XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("post", "GetDate.ashx", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send("name=zhangsan&pwd=123");
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            alert(xhr.responseText);
                        }
                    }
                  }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="button"value="获取数据"id="btnPost" />
        </div>
    </form>
</body>
</html>

.ashx文件

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write(context.Request["name"]); 
        }

以上写的Ajax的两种请求方式均为最原始的请求方式，不适用第三方插件，面试中可能会用到，但在平时的项目中一般不会这样写，因为jquery中已经封装了Ajax的操作。

【常见的用jquery的Ajax 的三种写法】

 <script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                $.get("GetDate.ashx", { "name": "lisi", "pwd": "123" }, function (data) {
                    alert(data)
                });
            });
            $("#btnPost").click(function () {
                $.post("GetDate.ashx", { "name": "lisi", "pwd": "123" }, function (data) {
                    alert(data)
                });
            });
            $("#btnAjax").click(function () {
                $.ajax({
                    type: "POST",
                    url: "some.php",
                    data: "name=john&location=Boston",
                    success: function (msg) {
                        alert("Data Saved:" + msg);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="button"value="GET获取数据"id="btnGet" />
             <input type="button"value="POST获取数据"id="btnPost" />
            <input type="button"value="AJAX获取数据"id="btnAjax" />
        </div>
    </form>
</body>
</html>

景月娇-Kathy

发布了178 篇原创文章 · 获赞 178 · 访问量 9万+

他的留言板关注

猜你喜欢