AJax
嘿嘿。今天学习了AJAX的几个方法
今天学习了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="Scripts/jquery-1.7.1.min.js"></script> <script> $(function () { $("#Send").click(function () { $("#resText").load("Ajax.ashx", { txtemail: "[email protected]" }, function (msg) { alert(msg); }); }); }); </script> <body> <input type="button" value="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="提交 " 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:成功后的回调函数。
今天就简单的总结到这里啦,已经很晚啦,嘿嘿,休息。加油加油!!!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。