首页 > 代码库 > AJax

AJax

2024-11-22 05:03:39   202人阅读

                   今天学习了AJAX的几个方法，其实我很早在公司实习的时间就认识了它，但是对它一无所知，也并没有去学习它，今天学习它让我感到很兴奋因为重新了解了它，嘿嘿，下面就来总结一下今天学习的吧。

          一.在javascript中写AJAX

<script>        window.onload = function () {            document.getElementById("txtName").onblur = function () {                var xml = new XMLHttpRequest(); //1 首先要创建异步对象                xml.open("get", "JSAjax.ashx", true);//2 以get方式打开要发送的地址                xml.onreadystatechange = function () {                    if (xml.statusText == 4) {                        alert(xml.responseText);//当接受状态等于4的时候，已经接受到了服务器传递过来的值。                    }                }                xml.send(null);//发送邮件，当为get方式时间发送的请求为空            }        }        //window.onload = function () {        //    document.getElementById("txtName").onblur = function () {        //        var xml = new XMLHttpRequest();        //        xml.open("post", "JSAjax.ashx", true);        //        xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");        //        xml.onreadystatechange = function () {        //            if (xml.statusText == 4) {        //                alert(xml.responseText);        //            }        //        }        //        xml.send("txtname="+this.value)        //    }        //}    </script></head><body>    <input type="text" name="txtname" id="txtName"/></body></html>
  public void ProcessRequest (HttpContext context) {        context.Response.ContentType = "text/plain";        string name = context.Request.QueryString["txtname"];        //string name = context.Request.Form["txtname"];        if (!string.IsNullOrEmpty(name))        {            context.Response.Write("您的用户名"+name + "可用");        }        else        {            context.Response.Write("您的用户名不可用");        }    }

                      上面是在javascript中写的ajax，Ajax在本质上是一个浏览器端的技术，Ajax技术之主要目的在于局部交换客户端及服务器间之数据，这个技术的主角XMLHttpRequest的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)与服务器之间的沟通，完全是透过Javascript来实行，使用XMLHttpRequest本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序，AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦。使用XMLHttpRequest对象  按照下面模式，可以同步地XMLHttpRequest对象：创建对象；-new创建请求； -open（）发送请求；-send（），但是使用javascript比较麻烦，于是就改变为了jquery的使用方法。
                       二.JQuery中写AJAX

          1.AJAX的$.Load事件( url,[,data][.callback])

<script src="http://www.mamicode.com/Scripts/jquery-1.7.1.min.js"></script>    <script>        $(function () {            $("#Send").click(function () {                $("#resText").load("Ajax.ashx", { txtemail: "123@qq.com" }, function (msg) {                    alert(msg);                });            });        });    </script><body>    <input type="button"  value="http://www.mamicode.com/AjaxLoad"  id="Send"/>    <div class="comment">        已有评论    </div>    <div id="resText">       </div></body>
public void ProcessRequest (HttpContext context) {        context.Response.ContentType = "text/plain";        string email = context.Request.Form["txtemail"];        if (!string.IsNullOrEmpty(email))        {            context.Response.Write("<span>您的邮箱地址为"+email+"可用</span>");        }        else        {            context.Response.Write("<span>您的邮箱地址为" + email + "不可用</span>");        }    }

                  url：发送的地址，data：发送给服务器的键值对，callback：回调函数。

          2.$.Get和$.Post方法

 <script>         $(function () {             //$("#send").click(function () {             //    $.get("JQuery.ashx", { username: $("#username").val(), content: $("#content").val() }, function (msg) {             //        $("#resText").html(msg);             //    });             //});             $("#send").click(function () {                 $.post("JQuery.ashx", { username: $("#username").val(), content: $("#content").val() }, function (msg) {                     $("#resText").html(msg);                 });             });         });     </script><body>    <form id="form1" action="#">        <p>评论:</p>        <p>姓名:<input type="text" name="username" id="username"  /></p>        <p>内容:<textarea name="content" id="content" rows="2" cols="20"></textarea></p>        <p><input type="button" name="name" value="http://www.mamicode.com/提交" id="send" /></p>    </form>    <div class="comment">        已有评论    </div>    <div id="resText">    </div></body>

 

public void ProcessRequest (HttpContext context) {        context.Response.ContentType = "text/plain";        //string name = context.Request.QueryString["username"];        //string content = context.Request.QueryString["content"];        string name = context.Request.Form["username"];        string content = context.Request.Form["content"];        if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(content))        {            context.Response.Write("<span>"+name+"评论:"+content+"</span>");        }    }

          url：发送的地址，data：发送给服务器的键值对，callback：回调函数。

                  3.$.ajax方法

<script>        $(function () {            $("#send").click(function () {                $.ajax({                    type: "post",                    url: "1.js",                    dataType: "script",                    success: function (msg)                    {                        alert(msg);                    }                });            });        })    </script>

                       url：发送的地址，type:请求的类型，timeout：请求时间，beforesend是在请求之前，complete：回调函数，success:成功后的回调函数。
                       今天就简单的总结到这里啦，已经很晚啦，嘿嘿，休息。加油加油！！！

AJax


联系
我们