Ajax【ASP.NET】

秒速五厘米 2022-03-06 04:22 148阅读 0赞

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

<table> 
 <tbody> 
  <tr> 
   <td> <font>【 Ajax——get请求】 </font></td> 
  </tr> 
 </tbody> 
</table>

**.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;
                }
            }
        }
    }

<table> 
 <tbody> 
  <tr> 
   <td> <font>【 Ajax——post请求】 </font></td> 
  </tr> 
 </tbody> 
</table>

**.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的操作。**

<table> 
 <tbody> 
  <tr> 
   <td> <font>【常见的用jquery的Ajax 的三种写法】 </font></td> 
  </tr> 
 </tbody> 
</table>

--------------------

![SouthEast][]

[SouthEast]: /images/20220306/b221f8cfa7794386a85bdc9b56b83c83.png