ajax在asp.net中的應用
（1）Ajax的發展史
Ajax從一種十分模糊稀罕的技術一下變成最熱門的東西。Ajax最開始出現的是全球資訊網。比較於桌面應用程式,web應用程式相當緩慢和沉悶。無論如何，人們都喜歡上了web應用程式，因為他們無論在什麼地方都能上網，只要身邊的計算機上安裝一個瀏覽器就行。之後，微軟在Internet Explorer 5中建立了XMLHttpRequest,它使得瀏覽器端JavaScript可以與web伺服器在後臺進行通訊而不需要瀏覽器顯示一新的web頁面。這使得人們有可能開發更具有流暢性和響應性的web應用程式。Mozilla不久在它的瀏覽器中也實現了XMLHttpRequest,還有Apple(Safari瀏覽器)和Opera等公司。
XMLHttpRequest原先一定是Web上的一個被保持得最好的祕密。自從它在1998年初次登場,只有很少幾個站點使用它,而大多數開發者,如果他們曾經瞭解過它的話,也從未使用過它。Google最終改變了這一現狀-它發行了一系列的高度輪廓性的web應用程式-在XMLHttpRequest技術支援下，它們擁有平滑的新穎的UI。最具有視覺吸引力的是Google Maps,它給你產生這樣的幻想-能夠在它的很小的視窗中圍繞著一個無限大小的地圖拖動滑鼠。
當Google的突出對XMLHttpRequest的使用的事實戲劇性地表明完全可以大大改進web應用程式UI效果的時候，是Jesse James Garrett的一篇論文最終給了這種技術一個可用的名字：Ajax(非同步JavaScript和XML)。
（2）Ajax的基本概念
-
type:請求方式 get/post
-
url:請求的Uri
-
async：請求是否為非同步
-
headers：自定義的header引數
-
data：發往伺服器的引數
-
dataType：引數格式，常見的有string、json、xml等
-
contents：決定怎樣解析response的一個”字串/正則表示式” map
-
contentType：傳送到伺服器的額資料的內容編碼型別，它的預設值是"application/x-www-form-urlencoded; charset=UTF-8""。
-
success:請求成功後呼叫的一個提示
10.error：請求失敗後呼叫的一個提示
（3）通過Ajax獲取內容
（3.1）獲取asp.net頁面程式碼
（1）jquery的下載地址：http://www.jq22.com/jquery-info122
自己可以根據自己的需求，下載不同的版本，如下是下載當前的一個介面
（2）建立一個Default.aspx
程式碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ajax.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>這個是Ajax的練習</title>
<%---引用如jquery.js檔案,如果沒有這個檔案，可以到網上下載，然後引進到這個專案當中--%>
<script src="jquery/jquery.js" type="text/javascript"></script>
<style type="text/css">
form
{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#container
{
margin: 100px;
height: 300px;
width: 500px;
background-color: #eee;
border: double 1px #0e0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<input type="button" value="Test Ajax" onclick="testGet()" />
<br />
</div>
<script type="text/javascript">
function setContainer(text) {
document.getElementById("container").innerHTML += ('<br/>' + text);
}
function testGet() {
$.ajax({
type: 'get',<%----get的請求----%>
url: 'testAjax.aspx',<%-----請求成功後的路徑-----%>
async: true,<%---是否非同步請求----%>
<%---請求成功所彈出的內容---%>
success: function (result) {
alert(result);
},
<%---請求錯誤時所彈出的提示---%>
error: function () {
setContainer('ERROR!');
}
});
}
</script>
</form>
</body>
</html>（3）執行效果
在鍵盤上按CTRL + shift + w就可以運行了
未點選Test Ajax執行之前：
點選Test ajax之後
（4） 獲取wep介面
（1）前端Default.aspx程式碼
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ajax.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>這個是Ajax的練習</title>
<%---引用如jquery.js檔案,如果沒有這個檔案，可以到網上下載，然後引進到這個專案當中--%>
<script src="jquery/jquery.js" type="text/javascript"></script>
<style type="text/css">
form
{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#container
{
margin: 100px;
height: 300px;
width: 500px;
background-color: #eee;
border: double 1px #0e0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<input type="button" value="Test Ajax" onclick="testGet()" />
<input type="button" value="Test Ajax2" onclick="testGet2()" />
<br />
</div>
<script type="text/javascript">
function setContainer(text) {
document.getElementById("container").innerHTML += ('<br/>' + text);
}
function testGet() {
$.ajax({
type: 'get',<%----get的請求----%>
url: 'testAjax.aspx',<%-----請求成功後的路徑-----%>
async: true,<%---是否非同步請求----%>
<%---請求成功所彈出的內容---%>
success: function (result) {
alert(result);
},
<%---請求錯誤時所彈出的提示---%>
error: function () {
setContainer('ERROR!');
}
});
}
function testGet2(){
$.ajax({
type:'get',
url:'testAjax.aspx',
data:{action:'getTime'},
success:function(result){
setContainer(result);
},
error:function(){
setContainer('ERROR!');
}
});
}
</script>
</form>
</body>
</html>
（2）前端testAjax.aspx程式碼
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testAjax.aspx.cs" Inherits="Ajax.testAjax" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Ajax例項1</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="scriptmanager1" runat="server">
<Services>
<asp:ServiceReference Path="~/Service1.svc" />
</Services>
</asp:ScriptManager>
</div>
<div>
使用者名稱：<input id="tbxUid" type="text" /><br/>
密碼：<input id="tbxpwd" type="text" /><br />
<input id="button1" type="button" value="Submit" onclick="Button1_onclick();" />
</div>
</form>
</body>
</html>
（3）後臺testAjax.aspx程式碼
using System;
using System.Collections.Generic;
using System.Linq;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace Ajax
{
public partial class testAjax : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
public void test()
{
string action = Request.QueryString["action"];
Response.Clear();
if (!string.IsNullOrEmpty(action))
{
switch (action)
{
case "getTime":
Response.Write(GetTime());
break;
case "getDate":
Response.Write(GetDate());
break;
}
}
Response.End();
}
private string GetDate()
{
return DateTime.Now.ToShortDateString();
}
private string GetTime()
{
return DateTime.Now.ToShortDateString();
}
}
}（4）執行的效果
未執行之前效果：
點選Test Ajax2執行之後效果：
那麼細心的朋友就會發現如下的問題
如果你把test()的這個方法放到page_Load中就能獲取系統時間
效果如果所示：
好了，打完收工，如果有什麼疑問的話，歡迎程式設計愛好者來騷擾我，同時也希望這一篇文章能夠幫助到更多的程式設計愛好者。