當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

快速学习AJAX之三 Ajax实现登陆

發(fā)布時間：2024/4/15 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了快速学习AJAX之三 Ajax实现登陆小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

???? 學(xué)習(xí)了前面的兩節(jié)課程之后，我們應(yīng)該對AJAX有了一個比較簡單的印象了。學(xué)習(xí)技術(shù)就是為了應(yīng)用，下面我們繼續(xù)，以后的課程我們可能會慢慢的做一些小實(shí)例了。

這些例子不會太大，但是我預(yù)期就是給大家完成一個完全采用AJAX與服務(wù)器交互的例子，希望大家跟上學(xué)習(xí)。當(dāng)然我說了，我是基于ASP.NET的原生態(tài)AJAX，所以后面

的實(shí)例中我難免用.NET技術(shù)與C#開發(fā)語言。請大家諒解，所以，希望對.NET開發(fā)有一定基礎(chǔ)的童鞋們不要錯過啊。

這節(jié)課，終于在廢話連篇中開始了。

好了，我們最常見得應(yīng)用是什么呢，哈哈，登陸。你想想，假如一個登陸需要去服務(wù)器端實(shí)現(xiàn)，那么可能會出現(xiàn)一個問題，就是，我單擊登陸按鈕之后，郁悶~~~網(wǎng)速不給力，白屏了。

等了老半天顯示一個文字，登陸成功。這么著用戶體驗(yàn)肯定不友好，所以呢，我們采用AJAX實(shí)現(xiàn)，呵呵，至少不會出現(xiàn)白屏現(xiàn)象。好了，本打算，先創(chuàng)建數(shù)據(jù)庫的，后來，由于種種原因。

還是等以后的例子，在創(chuàng)建數(shù)據(jù)庫吧，我們先簡單的實(shí)現(xiàn)功能，以后在慢慢實(shí)現(xiàn)其他的。

登陸需要什么？用戶名，密碼? 驗(yàn)證碼，這回就先不做了，下節(jié)課補(bǔ)上。安全性傳送POST

先準(zhǔn)備一個表格

頁面就不做美工了，呵呵，那個比較費(fèi)時間的

看看效果，呵呵，一般般啦。

下面該做什么呢？當(dāng)然是創(chuàng)建 XMLHttpRequest 異步對象了，沒這個，還做什么啊。

哎，算了，還是寫出AJAX代碼，然后再做研究吧

我像上面的代碼，大伙應(yīng)該都看的懂吧，

?var name = document.getElementById("name").value;

var pwd = document.getElementById("pwd").value;

這個是使用JS的辦法得到兩個文本框中的數(shù)值。

然后我們采用上兩節(jié)課程中的簡單例子，實(shí)現(xiàn)了傳輸兩個參數(shù)到“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("登錄失敗"); }

好了，代碼寫完了，這么做就可以，實(shí)現(xiàn)最基本的登陸了，然后本來上面的用戶名和密碼都應(yīng)該從數(shù)據(jù)庫讀取的，可是后來，想想還是算了，這么做簡單點(diǎn)，速度也快點(diǎn)啊，(*^__^*) 嘻嘻……

登陸成功了，然后我想大多數(shù)網(wǎng)站不是這么做的吧，登陸成功之后顯示什么呢？呵呵當(dāng)然是顯示一個人的基本資料了啊。

我們現(xiàn)在嘗試實(shí)現(xiàn)以下? 我寫的數(shù)據(jù)全部都是虛擬的啊，首先，你先找個美女圖片走頭像，哈哈

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";//不寫代碼尋找路徑了，這里面的圖片路徑本來應(yīng)該從數(shù)據(jù)庫中讀取出來。呵呵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("登錄失敗"); }

修改這個方法，看到?jīng)]？在這里我們需要把? 返回對象 responseText拼接成一個 Table

StringBuilder 效率高首當(dāng)其沖啊，哈哈

再次鄭重聲明，本AJAX是基于ASP.NET 的“原生態(tài)AJAX”本教程里面的例子涉及很多 C#語言。

在運(yùn)行以下吧

哈哈，性別搞錯了，不過我想這個效果比簡單的? 登陸成功好多了吧，當(dāng)然你也可以嘗試做成下面的效果

登陸成功替換現(xiàn)在的這個窗體

好了，登陸應(yīng)該可以了，下節(jié)課，我們在討論以下其他的AJAX在登陸上面可以做的文章。

轉(zhuǎn)載于:https://www.cnblogs.com/hihell/archive/2011/08/01/2123391.html

總結(jié)

以上是生活随笔為你收集整理的快速学习AJAX之三 Ajax实现登陆的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： HDOJ 1398 Square Coi
下一篇： cxTreeList交换当前两个节点的的