今天學習了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: "123@qq.com" }, 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:成功后的回調函數。
今天就簡單的總結到這里啦，已經很晚啦，嘿嘿，休息。加油加油！！！