學習了前面的兩節課程之後，我們應該對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("登陸成功"); else context.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); } else context.Response.Write("登入失敗");}
修改這個方法，看到沒？在這裡我們需要把 返回對象 responseText拼接成一個 Table
StringBuilder 效率高 首當其衝啊，哈哈
再次鄭重聲明 ，本AJAX是 基於ASP.NET 的“原生態AJAX”本教程裡面的例子涉及很多 C#語言。
在運行以下吧
哈哈，性別搞錯了，不過我想這個效果比簡單的 登陸成功好多了吧，當然你也可以嘗試做成下面的效果
登陸成功替換現在的這個表單
好了，登陸應該可以了，下節課，我們在討論以下其他的AJAX在登陸上面可以做的文章。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
