快速学习AJAX之三 Ajax实现登陆
???? 學習了前面的兩節課程之后，我們應該對AJAX有了一個比較簡單的印象了。學習技術就是為了應用，下面我們繼續，以后的課程我們可能會慢慢的做一些小實例了。
這些例子不會太大，但是我預期就是給大家完成一個完全采用AJAX與服務器交互的例子，希望大家跟上學習。當然我說了，我是基于ASP.NET的原生態AJAX，所以后面
的實例中我難免用.NET技術與C#開發語言。請大家諒解，所以，希望對.NET開發有一定基礎的童鞋們不要錯過啊。
這節課，終于在廢話連篇中開始了。
好了，我們最常見得應用是什么呢，哈哈，登陸。你想想，假如一個登陸需要去服務器端實現，那么可能會出現一個問題，就是，我單擊登陸按鈕之后，郁悶~~~網速不給力，白屏了。
等了老半天顯示一個文字，登陸成功。這么著用戶體驗肯定不友好，所以呢，我們采用AJAX實現，呵呵，至少不會出現白屏現象。好了，本打算，先創建數據庫的，后來，由于種種原因。
還是等以后的例子，在創建數據庫吧，我們先簡單的實現功能，以后在慢慢實現其他的。
登陸需要什么？用戶名，密碼? 驗證碼，這回就先不做了，下節課補上。 安全性傳送POST
先準備一個 表格
<body><table><tr><th colspan="2">登陸窗體</th></tr><tr><td>用戶名</td><td><input type="text" id="name"/></td></tr><tr><td>密碼</td><td><input type="password" id="pwd"/></td></tr><tr><td colspan="2" align="center"><input type="button" value="登陸" onclick="getAjax();" /></td></tr><tr><td colspan="2" id="returnLogin" align="center"></td></tr></table></body>頁面就不做美工了 ，呵呵，那個比較費時間的
看看效果，呵呵，一般般啦。
下面該做什么呢？當然是創建 XMLHttpRequest 異步對象了，沒這個，還做什么啊。
哎，算了，還是寫出AJAX代碼，然后再做研究吧
<style type="text/css">*{padding:0px;margin:0px;font-size :12px;}table{margin:0 auto;}</style><script type="text/javascript">var xmlHttp = false;try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch(e1) {try{xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}catch(e2){xmlHttp = false;}}if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {xmlHttp = new XMLHttpRequest();}function getAjax() { var name = document.getElementById("name").value;var pwd = document.getElementById("pwd").value;xmlHttp.open("POST", "Login.ashx", true);xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xmlHttp.onreadystatechange = function () {if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {document.getElementById("returnLogin").innerHTML = xmlHttp.responseText;}}xmlHttp.send("name="+name+"&pwd="+pwd);}</script>我像上面的代碼，大伙應該都看的懂吧 ，
?var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
這個是使用JS的辦法得到 兩個文本框中的數值。
然后我們采用上兩節課程中的簡單例子，實現了傳輸兩個參數到“Login.ashx”頁面
然后 Login.ashx 的代碼如下
public void ProcessRequest(HttpContext context) {context.Response.ContentType = "text/html";var name = context.Request["name"].ToString();var password = context.Request["pwd"].ToString();if (name=="kingdz"&&password=="kingdz")context.Response.Write("登陸成功");elsecontext.Response.Write("登錄失敗"); }好了，代碼寫完了，這么做就可以，實現最基本的登陸了，然后本來上面的用戶名和密碼都應該從數據庫讀取的，可是后來，想想還是算了，這么做簡單點，速度也快點啊，(*^__^*) 嘻嘻……
登陸成功了，然后我想大多數網站不是這么做的吧，登陸成功之后顯示什么呢？呵呵當然是顯示一個人的基本資料了啊。
我們現在嘗試實現以下? 我寫的數據全部都是虛擬的啊，首先，你先找個美女圖片走頭像，哈哈
public void ProcessRequest(HttpContext context) {context.Response.ContentType = "text/html";var name = context.Request["name"].ToString();var password = context.Request["pwd"].ToString();var sex = "男";var age = 16;var imageUrl="Images/6.png";//不寫代碼尋找路徑了，這里面的圖片路徑本來應該從數據庫中讀取出來。呵呵StringBuilder sb = new StringBuilder();if (name == "kingdz" && password == "kingdz"){sb.Append("<table><tr><td rowspan='4'><img src='");sb.Append(imageUrl);sb.Append("'alt='mmpic' /></td><td align='left'>姓名：");sb.Append(name);sb.Append("</td></tr><tr><td align='left'>性別：");sb.Append(sex);sb.Append("</td></tr><tr><td align='left'>年齡：");sb.Append(age);sb.Append("</td></tr><tr><td align='left'>密碼：");sb.Append(password);sb.Append("</td></tr></table>");context.Response.Write(sb);}elsecontext.Response.Write("登錄失敗"); }修改這個方法，看到沒？在這里我們需要把? 返回對象 responseText拼接成一個 Table
StringBuilder 效率高 首當其沖啊，哈哈
再次鄭重聲明 ，本AJAX是 基于ASP.NET 的“原生態AJAX”本教程里面的例子涉及很多 C#語言。
在運行以下吧
哈哈，性別搞錯了，不過我想這個效果比簡單的? 登陸成功好多了吧，當然你也可以嘗試做成下面的效果
登陸成功替換現在的這個窗體
好了，登陸應該可以了，下節課，我們在討論以下其他的AJAX在登陸上面可以做的文章。
轉載于:https://www.cnblogs.com/hihell/archive/2011/08/01/2123391.html
總結
以上是生活随笔為你收集整理的快速学习AJAX之三 Ajax实现登陆的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HDOJ 1398 Square Coi
- 下一篇： cxTreeList交换当前两个节点的的