用AJAX向服務器發送請求和獲得服務器返回的數據并更新到頁面中。
不是刷新整個頁面，而是在HTML頁面中使用javaScript創建xmlHTTPRequest對象向服務器發出請求以及獲得返回的數據。
常見例子：帖子評論、視頻下的評論，我們提交評論以后不會有整個HTML頁面的刷新，不會有視頻的中斷。
2，我們借助Nvelocity模板引擎寫一個一般處理程序，實現評論中常見的 [贊、踩] 功能。
Demo 下載 （1，Demo中的視頻需自行添加 2，方便排版Demo中用了Bootstrap， 可參考http://www.bootCSS.com/）
我們發現，每次點擊 贊或踩 頁面都重新刷新了一次，正在播放的視頻也重新播放了。
3，我們再用Ajax實現點擊顯示點贊次數。
新建CommentByAjax.html，頁面中給按鈕 “贊” 添加 onclick方法 ， onclick方法中 通過Javascript創建xmlhttpRequest對象向服務器端的一般處理程序請求處理結果。
處理結果返回到html頁面并顯示，這樣整個過程沒有刷新頁面，只是通過XMLHTTPRequest對象請求了點贊次數，實現了局部刷新。
效果如下：連續點贊 頁面顯示點贊次數遞增，視頻沒有中斷或者重播。
步驟：A, 新建CommnetByAJAX.html頁面，并添加 javascript 方法創建XMLHTTPRequest對象請求服務器
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <script type="text/javascript"> function AddZan() { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //創建XMLHTTP對象，考慮兼容性 xmlhttp.open("POST", "ZanCaiCount.ashx?" + "Action=Zan", true); //“準備”向服務器的ZanCaiCount.ashx發出Post請求（GET可能會有緩存問題）。這里還沒有發出請求 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) //readyState == 4 表示服務器返回完成數據了。之前可能會經歷2（請求已發送，正在處理中）、3（響應中已有部分數據可用了，但是服務器還沒有完成響應的生成） { if (xmlhttp.status == 200) //如果狀態碼為200則是成功 { document.getElementById("ZanNum").innerHTML = xmlhttp.responseText; } else { alert("AJAX服務器返回錯誤！"); } } } //不要以為if (xmlhttp.readyState == 4) {在send之前執行?。。?！ xmlhttp.send(); //這時才開始發送請求 //發出請求后不等服務器返回數據，就繼續向下執行，所以不會阻塞，界面就不卡了，這就是AJAX中“A”的含義“異步”。試著在ashx加一句Thread.Sleep(3000); } </script></head><body> <form action="CountComments.ashx" method="post"> <div class="row"> <div class="col-md-1"></div> <div class="col-md-5"> <video src="./Surface%20Pro%203.mp4" autoplay="autoplay" width="320" height="240" controls="controls" /> </div> <div class="col-md-6"></div> </div> <div class="row"> <div class="col-md-1"></div> <div class="col-md-1"> <input type="button" name="Zan" value="贊" onclick="AddZan()" /><label id="ZanNum"></label> </div> <div class="col-md-1"> <input type="button" name="Cai" value="踩" onclick="AddCai()" /><label id="CaiNum"></label> </div> <div class="col-md-9"></div> </div> </form> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script></body>
B, 添加 點贊、點踩 計算的一般處理程序: ZanCai.ashx ,接收CommentByAJAX.html傳遞過來的參數（Zan/Cai）計算次數，并返回
using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace AjaxDemo{ /// <summary> /// ZanCaiCount 的摘要說明 /// </summary> public class ZanCaiCount : IHttpHandler { private static int numZan = 0; private static int caiNum = 0; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; //根據Action參數判斷是贊 還是 踩 string strAction = context.Request.QueryString["Action"]; if (strAction == "Zan") { numZan++; context.Response.Write(numZan.ToString()); //輸出 } else if (strAction == "Cai") { caiNum++; context.Response.Write(caiNum.ToString()); //輸出 } } public bool IsReusable { get { return false; } } }}
C, 以上完成了AJAX請求點贊次數。 整個過程主要就是 javascript方法創建XMLHTTPRequest對象向服務器請求數據，如下代碼：
<script type="text/javascript"> function AddZan() { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //創建XMLHTTP對象，考慮兼容性 xmlhttp.open("POST", "ZanCaiCount.ashx?" + "Action=Zan", true); //“準備”向服務器的ZanCaiCount.ashx發出Post請求（GET可能會有緩存問題）。這里還沒有發出請求 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) //readyState == 4 表示服務器返回完成數據了。之前可能會經歷2（請求已發送，正在處理中）、3（響應中已有部分數據可用了，但是服務器還沒有完成響應的生成） { if (xmlhttp.status == 200) //如果狀態碼為200則是成功 { document.getElementById("ZanNum").innerHTML = xmlhttp.responseText; } else { alert("AJAX服務器返回錯誤！"); } } } //不要以為if (xmlhttp.readyState == 4) {在send之前執行?。。?！ xmlhttp.send(); //這時才開始發送請求 //發出請求后不等服務器返回數據，就繼續向下執行，所以不會阻塞，界面就不卡了，這就是AJAX中“A”的含義“異步”。試著在ashx加一句Thread.Sleep(3000); } </script>
4， 我們把上面一段JavaScript方法封裝到js文件中， 方便以后調用。
步驟： A, js文件夾下添加 ajax.js
function ajax(url, onsuccess) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //創建XMLHTTP對象，考慮兼容性 xmlhttp.open("POST", url, true); //“準備”向服務器的ZanCaiCount.ashx發出Post請求（GET可能會有緩存問題）。這里還沒有發出請求 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) //readyState == 4 表示服務器返回完成數據了。之前可能會經歷2（請求已發送，正在處理中）、3（響應中已有部分數據可用了，但是服務器還沒有完成響應的生成） { if (xmlhttp.status == 200) //如果狀態碼為200則是成功 { onsuccess(xmlhttp.responseText); //document.getElementById("ZanNum").innerHTML = xmlhttp.responseText; } else { alert("AJAX服務器返回錯誤！"); } } } //不要以為if (xmlhttp.readyState == 4) {在send之前執行！?。。?/span> xmlhttp.send(); //這時才開始發送請求 //發出請求后不等服務器返回數據，就繼續向下執行，所以不會阻塞，界面就不卡了，這就是AJAX中“A”的含義“異步”。試著在ashx加一句Thread.Sleep(3000);}
B, CommnetByAJAX.html頁面添加對ajax的引用 并 實現點擊 “踩”的時候顯示次數
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <script src="js/ajax.js"></script> <script type="text/javascript"> function AddZan() { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //創建XMLHTTP對象，考慮兼容性 xmlhttp.open("POST", "ZanCaiCount.ashx?" + "Action=Zan", true); //“準備”向服務器的ZanCaiCount.ashx發出Post請求（GET可能會有緩存問題）。這里還沒有發出請求 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) //readyState == 4 表示服務器返回完成數據了。之前可能會經歷2（請求已發送，正在處理中）、3（響應中已有部分數據可用了，但是服務器還沒有完成響應的生成） { if (xmlhttp.status == 200) //如果狀態碼為200則是成功 { document.getElementById("ZanNum").innerHTML = xmlhttp.responseText; } else { alert("AJAX服務器返回錯誤！"); } } } //不要以為if (xmlhttp.readyState == 4) {在send之前執行！?。?！ xmlhttp.send(); //這時才開始發送請求 //發出請求后不等服務器返回數據，就繼續向下執行，所以不會阻塞，界面就不卡了，這就是AJAX中“A”的含義“異步”。試著在ashx加一句Thread.Sleep(3000); } function AddCai() { ajax("ZanCaiCount.ashx?action=Cai", function (result) { document.getElementById("CaiNum").innerHTML = result }) } </script></head><body> <form action="CountComments.ashx" method="post"> <div class="row"> <div class="col-md-1"></div> <div class="col-md-5"> <video src="./Surface%20Pro%203.mp4" autoplay="autoplay" width="320" height="240" controls="controls" /> </div> <div class="col-md-6"></div> </div> <div class="row"> <div class="col-md-1"></div> <div class="col-md-1"> <input type="button" name="Zan" value="贊" onclick="AddZan()" /><label id="ZanNum"></label> </div> <div class="col-md-1"> <input type="button" name="Cai" value="踩" onclick="AddCai()" /><label id="CaiNum"></label> </div> <div class="col-md-9"></div> </div> </form> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script></body>
點贊點踩效果如下
5， AJAX的經常用在網站新用戶注冊的時候，檢查用戶名稱是否存在。
步驟： A, 添加新用戶注冊頁面，頁面中用戶名文本框中添加onbluer()事件，鼠標焦點離開以后觸發檢查用戶民是否存在
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>新用戶注冊</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <script src="js/ajax.js"></script> <script type="text/javascript"> function checkIfExist() { ajax("RegCheckNewUserName.ashx?NewName=" + document.getElementById("NewName").value, function (result) { document.getElementById(ReminderInfo.innerHTML = result) }); } </script></head><body> <form method="post"> <div class="row"> <div class="col-md-1"></div> <div class="col-md-1">用戶名：</div> <div class="col-md-2"> <input type="text" id="NewName" name="NewUserName" onblur="checkIfExist()" /> </div> <div class="col-md-4"> <label id="ReminderInfo"></label> </div> <div class="col-md-3"></div> </div> <div class="row"> <div class="col-md-1"></div> <div class="col-md-1">密碼：</div> <div class="col-md-2"> <input type="passWord" name="pwd" /> </div> <div class="col-md-8"></div> </div> <div class="row"> <div class="col-md-1"></div> <div class="col-md-1"> <input type="submit" name="btnRegister" value="注冊" /> </div> <div class="col-md-10"></div> </div> </form> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script></body></html>
B, 添加檢查用戶名稱是否存在的一般處理程序
using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace AjaxDemo{ /// <summary> /// RegCheckNewUserName 的摘要說明 /// </summary> public class RegCheckNewUserName : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; //檢查傳遞過來的參數是否存在 //新建數組存儲部分用戶名 List<string> strExist = new List<string> { "橙子", "柚子", "西瓜", "荔枝", "蘋果", "葡萄", "火龍果" }; if (string.IsNullOrEmpty(context.Request["NewName"])) { context.Response.Write("用戶名為空哦，請您填寫用戶名"); } else { string strUserName = context.Request["NewName"].ToString(); if (strExist.Contains(strUserName)) { //已經存在 context.Response.Write("用戶名已存在，請重新選擇用戶名"); } else { context.Response.Write("恭喜您，此用戶名可以注冊"); } } } public bool IsReusable { get { return false; } } }}
6， 以上我們借助AJAX進行簡單的數據傳輸，但是我們還會有一些復雜的數據請求需要借助AJAX完成。
例如，輸入員工工號以后，通過AJAX請求出來該工號對應的基本信息（姓名、性別、年齡、郵箱、電話號碼、戶籍、愛好等）
這樣，我們請求頁面傳遞工號參數，AJAX請求的一般處理程序頁面讀取相關數據以后返回，這些數據就需要一定的格式給請求頁面以方便請求頁面解析讀取各個字段屬性，這樣的解析我們借助Json就會更加方便了。
7，Json，是一種輕量級的數據交換格式，方便機器進行解析和生成，同時讓人們很容易的閱讀和編寫。Json是幾乎被所有的語言支持的。
我們新建一般處理程序，輸出一個數組對象，看看Json輸出的格式是怎樣的：
步驟：A, 新建Person類
using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace AjaxDemo{ public class Person { public string Name { get; set; } public string Age { get; set; } public string Gender { get; set; } public string Email { get; set; } public string Address { get; set; } }}
B, 添加JsonOutPut.ashx一般處理程序，程序中我們借助JavascriptSerializer把Person數組對象以Json格式輸出
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Script.Serialization;namespace AjaxDemo{ /// <summary> /// JsonOutput 的摘要說明 /// </summary> public class JsonOutput : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; //定義Person對象的數組 List<Person> perList = new List<Person>(); perList.Add(new Person() { Name = "橙子", Age = "18", Gender = "M", Email = "Orange@163.com", Address = "上海" }); perList.Add(new Person() { Name = "蘋果", Age = "17", Gender = "F", Email = "Apple@163.com", Address = "北京" }); perList.Add(new Person() { Name = "椰子", Age = "20", Gender = "F", Email = "CocoNut@163.com", Address = "廣州" }); //以Json格式字符串把 perList進行輸出 //------1,初始化一個JavaScriptSerializer對象 JavaScriptSerializer jss = new JavaScriptSerializer(); //------2,獲得一個對象的Json格式 string JsonList = jss.Serialize(perList); context.Response.Write(JsonList); } public bool IsReusable { get { return false; } } }}
C, Json格式輸出，這樣的字符串格式就很清晰明了，方便讀取
8，上面返回的Json字符串，在HTML頁面中我們怎么去解析呢 ？也就是咋么去讀取Name或者Age屬性呢 ？
HTMl頁面中就需要借助Json.Parse把Json字符串解析成對象
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/ajax.js"></script> <script type="text/javascript"> function readjsonlist() { ajax("JsonOutput.ashx", function (result) { var pers = JSON.parse(result); for (var i = 0; i < pers.length; i++) { var p = pers[i]; alert("姓名：" + p.Name + "年齡：" + p.Age); } }); } </script></head><body> <input type="button" onclick="readjsonlist()" value="點擊查看數組對象" /></body></html>
<script src="js/ajax.js"></script> <script type="text/javascript"> function readjsonlist() { ajax("JsonOutput.ashx", function (result) { var pers = JSON.parse(result); for (var i = 0; i < pers.length; i++) { var p = pers[i]; alert("姓名：" + p.Name + "年齡：" + p.Age); } }); } </script>
參考網站：Bootstrap http://www.bootcss.com/
完整Demo下載
新聞熱點
疑難解答
