標籤：roc default 列表 image 通過 prot 基於 格式 互動
AJAX 即“ Asynchronous Javascript And XML ”（非同步JavaScript和XML），是指一種建立 互動式網頁應用的網頁開發技術。AJAX = 非同步 JavaScript和XML（標準通用標記語言 (SGML)的子集）。AJAX 是一種 用於建立快速動態網頁的技術。 通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著 可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新 。傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。這個術語源自描述從基於 Web 的應用到基於資料的應用的轉換。在基於資料的應用中，使用者需求的資料如連絡人清單，可以從獨立於實際網頁的服務端取得並且可以被動態地寫入網頁中，給緩慢的Web應用體驗著色使之像案頭應用一樣。 AJAX 的核心是 JavaScript 對象 XMLHttpRequest。該對象在 Internet Explorer 5 中首次引入，它是一種支援非同步請求的技術。簡而言之， XMLHttpRequest使您可以使用 JavaScript 向伺服器提出請求並處理響應，而不阻塞使用者。 百度百科：http://baike.baidu.com/item/ajax/8425 先引用jQuery，再寫代碼代碼格式：（李獻策lxc）$.ajax({ url:"",//要將此次請求發送到哪個服務端去 data:{},//給服務端帶的資料，可以沒有，也可以是多個 type:"post", //傳遞的方式 dataType:"json",//資料傳遞的格式 success:function(data){}//如果成功返回執行此方法，“data”為自訂名}); 1、一般資料處理程式（資料介面）：ashx檔案 2、跨語言傳遞資料XML 可擴充的標記語言 結構不清晰 代碼量比較大 尋找起來比較費事 非物件導向結構json 結構清晰 代碼量相對較小 物件導向的處理方式，尋找資料很簡單 基本結構： 索引值對：{"":"","":‘‘,"":""}（英文狀態下）=============================================================練習：驗證使用者名稱是否可用一、普通方式，不用ajax前台代碼：
<body> <form id="form1" runat="server"> <div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true"></asp:TextBox> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> </form></body>
<body> <form id="form1" runat="server"> <div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true"></asp:TextBox> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> </form></body>
後台代碼：
public partial class _Default : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { TextBox1.TextChanged += TextBox1_TextChanged; } void TextBox1_TextChanged(object sender, EventArgs e) { if (TextBox1.Text == "zhangsan" || TextBox1.Text == "lisi") { Label1.Text = "使用者名稱已存在！"; Label1.ForeColor = System.Drawing.Color.Red; } else { Label1.Text = "恭喜！使用者名稱可以使用！"; Label1.ForeColor = System.Drawing.Color.Green; } }}
public partial class _Default : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { TextBox1.TextChanged += TextBox1_TextChanged; } void TextBox1_TextChanged(object sender, EventArgs e) { if (TextBox1.Text == "zhangsan" || TextBox1.Text == "lisi") { Label1.Text = "使用者名稱已存在！"; Label1.ForeColor = System.Drawing.Color.Red; } else { Label1.Text = "恭喜！使用者名稱可以使用！"; Label1.ForeColor = System.Drawing.Color.Green; } }}
焦點丟失時觸發事件，會重新載入整個頁面，使用者體驗差！
二、ajax局部重新整理
前台代碼：
<body> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> </form></body>
<body> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> </form></body>
後台代碼：
var txt1 = document.getElementById("TextBox1");txt1.onkeyup = function () { var v = txt1.value; $.ajax({ url: "../ajax/Handler.ashx", data: { "txt1": v }, type: "post", dataType: "json", success: function (data) { document.getElementById("Label1").innerHTML = data.ok; if (data.ok1 == "true") { document.getElementById("Label1").style.color = "green"; } else { document.getElementById("Label1").style.color = "red"; } } });};
var txt1 = document.getElementById("TextBox1");txt1.onkeyup = function () { var v = txt1.value; $.ajax({ url: "../ajax/Handler.ashx", data: { "txt1": v }, type: "post", dataType: "json", success: function (data) { document.getElementById("Label1").innerHTML = data.ok; if (data.ok1 == "true") { document.getElementById("Label1").style.color = "green"; } else { document.getElementById("Label1").style.color = "red"; } } });};
<%@ WebHandler Language="C#" Class="Handler" %>using System;using System.Web;public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { string s=context.Request["txt1"]; string json = "{\"ok\":\"恭喜！使用者名稱可用！\",\"ok1\":\"true\"}"; if (s == "zhangsan" || s == "lisi") { json = "{\"ok\":\"此使用者名稱不可用！\",\"ok1\":\"false\"}"; } context.Response.Write(json); context.Response.End(); } public bool IsReusable { get { return false; } }}
<%@ WebHandler Language="C#" Class="Handler" %>using System;using System.Web;public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { string s=context.Request["txt1"]; string json = "{\"ok\":\"恭喜！使用者名稱可用！\",\"ok1\":\"true\"}"; if (s == "zhangsan" || s == "lisi") { json = "{\"ok\":\"此使用者名稱不可用！\",\"ok1\":\"false\"}"; } context.Response.Write(json); context.Response.End(); } public bool IsReusable { get { return false; } }}
C#-WebForm-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
