jquery+ajax+ashx Ajax非同步資料互動
1、使用一般的webform，在頁面用jQuery ajax呼叫，再從取得的html資料中取得<body>內的內容，寫入DOM
優點：不用改變現有的asp.net開發模式，可以使用現成的頁面；ajax取得的內容是html文字，直接寫入DOM即可
缺點：內容浪費，<body>之外的內容都不是必要的，而且如果使用了MasterPage那就。。。
2、使用一般的webform，但是用Response.Write()控制輸出html，在頁面用jQuery ajax呼叫，將獲取的內容寫入DOM
優點：內容乾淨，不浪費；ajax取得的內容是html文字，可以直接寫入DOM
缺點：需要在伺服器端以字串形式構造html文字，程式設計不方便，不容易除錯和維護
3、使用一般的webform，用Response.Write()控制輸出json資料，在頁面用jQuery ajax呼叫，將json資料在客戶端加工成html後寫入DOM
優點：僅僅交換json資料，極乾淨，符合高效的web設計理念
缺點：需要在客戶端加工json資料，並且對DOM造成入侵
4、使用asmx，封裝成web service，用jQuery ajax呼叫asmx的內容，將json或者xml資料在客戶端加工成html後寫入DOM
優點：僅僅交換json或/xml資料，非常乾淨；web service易於跨平臺
缺點：需要在客戶端加工json資料，並且對DOM造成入侵
5、使用自定義控制元件ascx，然後使用專門的webform頁面做wrapper（包裝）在頁面用jQuery ajax呼叫wrapper webform，將html資料寫入DOM
優點：webform僅僅用作wrapper，根據不同的請求引數可以在wrapper中動態使用自定義控制元件；自定義控制元件輸出的是html文字，可以直接寫入DOM；程式設計方便，有VS2008程式碼感知支援，易於除錯和維護
缺點：跟傳統的webform程式設計理念不一樣，弱化了webform的作用
以上就是討論的幾種可行的方案——不管是asp.net webform方式還是asp.net MVC方式，都是可行的。
昨天晚上又發現一種方案：使用ashx+jQuery .ashx是一個專門的用於處理HttpHandler的檔案型別，用來處理自定義Http請求，可以在web.config定義執行時針對ashx的Http請求處理方式。
<add verb="*" path="*.ashx" type="System.Web.UI.SimpleHandlerFactory" validate="false" />
這樣我們就可以用SimpleHandlerFactory來處理ashx的http請求了。在ashx的類中實現IRequiresSessionState介面，using下System.Web.SessionState就可以使用Session了，很方便
using System.Web.SessionState;
public class checkCookie : IHttpHandler,IRequiresSessionState
{
... // todo somthing
}
例項：使用ashx+jQuery實現Email存在的驗證
.ashx檔案
<%@ WebHandler Language="C#" class="CheckUser" %>
using System;using System.Web;
public class CheckUser : IHttpHandler
{
public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write(UserRule.GetInstance().IsUserExist(context.Request["Email"]));
}
public bool IsReusable
{
get {
return false;
}
}
}
html：
<input type="text" id="email" />
<input type="button" value="test" onclick="check_email()" />
js：
function check_email()
{
var email = $("#email").attr("value");
$.get("../ajax/checkuser.ashx",
{ Email: email },
function(data)
{
window.alert(data);
});
}
simple的，顯然效率會比較高。不過simple的就只能夠做點simple的事情。如果要輸出html，還是不太方便。如果要輸出html的話，我還是比較傾向於用ascx處理內容，webform做包裝所以 ashx+jQuery應該算是是一個asp.net裡輕量級的解決方案
asp.net中jQuery $post用法
函式原型：$.post(url,params, callback)
url是提交的地址，eg： "sample.ashx"
params是引數，eg： { name:"xxx" , id:"001" }
callback是回撥函式，eg： function(msg){ alert(msg); }
注意1：在sample.ashx那段，使用context.Request["id"]和context.Request["name"]來分別獲得值"001"和值"xxx"，而不是使用context.Request.QueryString["id"]
注意2：這裡的callback裡的函式是在伺服器返回值後被觸發，所以不需要另行判斷xmlHttp.readyState==4 &&xmlHttp.status==200
接下來，我們來用一段程式碼比較一下$.post方式和原始的xmlHttp方式
為了更好的對應，我讓2個方式實現一樣的功能，傳的值和回撥函式的名字一樣
/* xmlHttp方式 */
var xmlHttp; //定義物件xmlHttp
functioncreateXMLHttpRequest() //建立xmlHttpRequest的函式
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
}
else if(window.XMLHttpRequest)
{
xmlHttp = newXMLHttpRequest();
}
}
function btn_onclick() //假設一個button點了以後觸發這個ajax
{
createXMLHttpRequest();
var url="sample.ashx?id=1&name=a"; //這裡假設傳給sample.ashx，傳2個值，id=1和name=a
xmlHttp.open( "POST" ,url,true);
xmlHttp.onreadystatechange=Response; //回撥函式是Response()
xmlHttp.send(null);
}
functionResponse()
{
if( xmlHttp.readyState==4 && xmlHttp.status==200 )
{
alert( xmlHttp.responseText ); //彈出一個框顯示伺服器返回的內容
}
}
/* $.post方式 */
function btn_onclick() //同樣還是這個事件和函式，還是點了以後觸發
{
/*
同樣還是sample.ashx，同樣是id=1&name=a
這裡的function(msg)是回撥的函式，你可以把執行的內容直接寫在{}裡，msg表示伺服器返回的資料。
為了和上面的方式更好的對應起來，我這裡依然讓他呼叫Response，但是需要增加引數msg
*/
$.post("sample.ashx",{ id:"1",name:"a" }, function(msg){ Response(msg); });
}
function Response(msg)
{
alert( msg ); //彈出一個框顯示伺服器返回的內容
}
jquery+ajax+asp.net實現Ajax操作
轉載 2010-05-17 01:46:41閱讀143 評論0 字號：大中小
文章簡介：關於jquery+ajax+asp.net實現Ajax操作的簡介
jquery,ajax,asp.net
是jquery+ajax+ashx的 現在這個是Handler.ashx:
========================================================================
<%@ WebHandlerLanguage="C#" class="Handler" %>
using System;
using System.Web;
...jquery+ajax+asp.net實現Ajax操作
是jquery+ajax+ashx的 現在這個是Handler.ashx:
========================================================================
<%@ WebHandlerLanguage="C#" class="Handler" %>
using System;
using System.Web;
public class Handler :IHttpHandler {
publicvoid ProcessRequest (HttpContext context) {
charmethod = Convert.ToChar(context.Request.Params["m"]);
context.Response.ContentType= "text/plain";
switch(method)
{
case'a':
context.Response.Write("HelloWorld<br/>This is a sample");
return;
case'b':
context.Response.Write("HelloWorld<br/>This is b sample");
return;
}
context.Response.Flush();
}
}
================================================================
jquery呼叫程式碼：
=================================================================
$(document).ready(function(){
$("#test2").click(function(){
$.ajax({
type: "post",
url: "Handler.ashx",
data: {m:'a'},
success: function(result){
$("#testText").append(result+ "<br/>");
}
});
});
});
$(document).ready(function(){
$("#test3").click(function(){
$.ajax({
type: "post",
文章簡介：關於jquery+ajax+asp.net實現Ajax操作的簡介
jquery,ajax,asp.net
是jquery+ajax+ashx的 現在這個是Handler.ashx:
========================================================================
<%@ WebHandlerLanguage="C#" class="Handler" %>
using System;
using System.Web;
...jquery+ajax+asp.net實現Ajax操作
是jquery+ajax+ashx的 現在這個是Handler.ashx:
========================================================================
<%@ WebHandlerLanguage="C#" class="Handler" %>
using System;
using System.Web;
public class Handler :IHttpHandler {
publicvoid ProcessRequest (HttpContext context) {
charmethod = Convert.ToChar(context.Request.Params["m"]);
context.Response.ContentType= "text/plain";
switch(method)
{
case'a':
context.Response.Write("HelloWorld<br/>This is a sample");
return;
case'b':
context.Response.Write("HelloWorld<br/>This is b sample");
return;
}
context.Response.Flush();
}
}
================================================================
jquery呼叫程式碼：
=================================================================
$(document).ready(function(){
$("#test2").click(function(){
$.ajax({
type: "post",
url: "Handler.ashx",
data: {m:'a'},
success: function(result){
$("#testText").append(result+ "<br/>");
}
});
});
});
$(document).ready(function(){
$("#test3").click(function(){
$.ajax({
type: "post",
url: "Handler.ashx",
data: {m:'b'},
success: function(result){
$("#testText").append(result+ "<br/>");
}
});
});
});
url: "Handler.ashx",
data: {m:'b'},
success: function(result){
$("#testText").append(result+ "<br/>");
}
});
});
});
己雖然以前也用ajax但總感覺那裡覺得不對，以前ajax都是請求aspx頁面，那頁面多的數不清，自己也覺得很亂。
自己最近在工作中，也覺得同事用的jquery+ashx用起來相當的簡潔方便。幫在這裡做了一個小的demo來
<%@ Page Language="C#"AutoEventWireup="true" CodeFile="AjaxGet.aspx.cs"Inherits="AjaxGet" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>無標題頁</title>
<scripttype="text/javascript" src="misc/js/jquery-1.2.6.js"></script>
</head>
<body>
<script type="text/javascript"language="javascript">
function GetCategoryData(type)
{
alert("test start");
$.ajax({
type:'GET',
url:'AjaxService/Handler.ashx',
dataType: 'text',
data:'type='+type,
success:function(msg)
{
alert(msg);
$("#category").html(msg);
},
error: function(data){
alert(data);
}
})
}
</script>
<form id="form1"runat="server">
<div>
<input type="radio"value="1" name="wangtao" onclick='GetCategoryData(this.value)' />
<input type="radio"value="2" name="wangtao" onclick='GetCategoryData(this.value)'/>
<select id="category" >
</select>
</div>
</form>
</body>
</html>
前臺頁後很簡單了，就是兩個radio和一個select。要把選中的radio的值放在select中去。
後臺ashx程式碼
<%@ WebHandler Language="C#"Class="Handler" %>
using System;
using System.Web;
using System.Text;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContextcontext) {
StringBuilder strBul = newStringBuilder();
strBul.Append("<option value='wangtao'>");
strBul.Append(context.Request.Params["type"].ToString());
strBul.Append("</option>");
context.Response.ContentType = "text/html";
context.Response.Write(strBul.ToString());
}
public bool IsReusable {
get {
returnfalse;
}
}
}
雖然很簡單，但可以供大家舉一反三