jquery+ajax+ashx
轉(zhuǎn)自：http://www.cnblogs.com/myaspnet/archive/2010/11/12/1876101.html
?
1、使用一般的webform，在頁面用jQuery ajax調(diào)用，再從取得的html數(shù)據(jù)中取得<body>內(nèi)的內(nèi)容，寫入DOM
優(yōu)點：不用改變現(xiàn)有的asp.net開發(fā)模式，可以使用現(xiàn)成的頁面；ajax取得的內(nèi)容是html文本，直接寫入DOM即可?
缺點：內(nèi)容浪費，<body>之外的內(nèi)容都不是必要的，而且如果使用了MasterPage那就。。。
2、使用一般的webform，但是用Response.Write()控制輸出html，在頁面用jQuery ajax調(diào)用，將獲取的內(nèi)容寫入DOM
優(yōu)點：內(nèi)容干凈，不浪費；ajax取得的內(nèi)容是html文本，可以直接寫入DOM?
缺點：需要在服務(wù)器端以字符串形式構(gòu)造html文本，編程不方便，不容易調(diào)試和維護(hù)
3、使用一般的webform，用Response.Write()控制輸出json數(shù)據(jù)，在頁面用jQuery ajax調(diào)用，將json數(shù)據(jù)在客戶端加工成html后寫入DOM
優(yōu)點：僅僅交換json數(shù)據(jù)，極干凈，符合高效的web設(shè)計理念?
缺點：需要在客戶端加工json數(shù)據(jù)，并且對DOM造成入侵
4、使用asmx，封裝成web service，用jQuery ajax調(diào)用asmx的內(nèi)容，將json或者xml數(shù)據(jù)在客戶端加工成html后寫入DOM?
優(yōu)點：僅僅交換json或/xml數(shù)據(jù)，非常干凈；web service易于跨平臺?
缺點：需要在客戶端加工json數(shù)據(jù)，并且對DOM造成入侵
5、使用自定義控件ascx，然后使用專門的webform頁面做wrapper（包裝）在頁面用jQuery ajax調(diào)用wrapper webform，將html數(shù)據(jù)寫入DOM
優(yōu)點：webform僅僅用作wrapper，根據(jù)不同的請求參數(shù)可以在wrapper中動態(tài)使用自定義控件；自定義控件輸出的是html文本，可以直接寫入DOM；編程方便，有VS2008代碼感知支持，易于調(diào)試和維護(hù)?
缺點：跟傳統(tǒng)的webform編程理念不一樣，弱化了webform的作用
以上就是討論的幾種可行的方案——不管是asp.net webform方式還是asp.net MVC方式，都是可行的。
昨天晚上又發(fā)現(xiàn)一種方案：使用ashx+jQuery .ashx是一個專門的用于處理HttpHandler的文件類型，用來處理自定義Http請求，可以在web.config定義運行時針對ashx的Http請求處理方式。
<add verb="*" path="*.ashx" type="System.Web.UI.SimpleHandlerFactory" validate="false" />
這樣我們就可以用SimpleHandlerFactory來處理ashx的http請求了。在ashx的類中實現(xiàn)IRequiresSessionState接口，using下System.Web.SessionState就可以使用Session了，很方便
using System.Web.SessionState;?????
public class checkCookie : IHttpHandler,IRequiresSessionState?
{???
???? ...??// todo somthing?
}
實例：使用ashx+jQuery實現(xiàn)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" οnclick="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處理內(nèi)容，webform做包裝所以 ashx+jQuery應(yīng)該算是是一個asp.net里輕量級的解決方案
asp.net中jQuery $post用法
函數(shù)原型：$.post(url,params, callback)??
url是提交的地址，eg：?"sample.ashx"
params是參數(shù)，eg：?{ name:"xxx" , id:"001" }
callback是回調(diào)函數(shù)，eg：?function(msg){ alert(msg); }
注意1：在sample.ashx那段，使用context.Request["id"]和context.Request["name"]來分別獲得值"001"和值"xxx"，而不是使用context.Request.QueryString["id"]
注意2：這里的callback里的函數(shù)是在服務(wù)器返回值后被觸發(fā)，所以不需要另行判斷xmlHttp.readyState==4 &&xmlHttp.status==200
接下來，我們來用一段代碼比較一下$.post方式和原始的xmlHttp方式
為了更好的對應(yīng)，我讓2個方式實現(xiàn)一樣的功能，傳的值和回調(diào)函數(shù)的名字一樣
/* xmlHttp方式 */
?? var xmlHttp;??? //定義對象xmlHttp
????functioncreateXMLHttpRequest()??????? //創(chuàng)建xmlHttpRequest的函數(shù)
??? {
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
}
else if(window.XMLHttpRequest)
{
xmlHttp = newXMLHttpRequest();??????????????
}
}
??? function btn_onclick()????? //假設(shè)一個button點了以后觸發(fā)這個ajax
{
createXMLHttpRequest();
var url="sample.ashx?id=1&name=a";??? //這里假設(shè)傳給sample.ashx，傳2個值，id=1和name=a
???????xmlHttp.open( "POST" ,url,true);
xmlHttp.onreadystatechange=Response; //回調(diào)函數(shù)是Response()
???????xmlHttp.send(null);???
}
?? functionResponse()
{
if( xmlHttp.readyState==4 && xmlHttp.status==200 )
{
alert( xmlHttp.responseText );?????? //彈出一個框顯示服務(wù)器返回的內(nèi)容
????????}
}
/* $.post方式 */
function btn_onclick()????? //同樣還是這個事件和函數(shù)，還是點了以后觸發(fā)
??{??????
/*
同樣還是sample.ashx，同樣是id=1&name=a
這里的function(msg)是回調(diào)的函數(shù)，你可以把執(zhí)行的內(nèi)容直接寫在{}里，msg表示服務(wù)器返回的數(shù)據(jù)。
為了和上面的方式更好的對應(yīng)起來，我這里依然讓他調(diào)用Response，但是需要增加參數(shù)msg
*/?
$.post("sample.ashx",{ id:"1",name:"a" }, function(msg){ Response(msg); });???
??? }
?? function Response(msg)
{
alert( msg );?????? //彈出一個框顯示服務(wù)器返回的內(nèi)容
??? }
?
jquery+ajax+asp.net實現(xiàn)Ajax操作
轉(zhuǎn)載?2010-05-17 01:46:41閱讀143 評論0 字號：大中小
文章簡介：關(guān)于jquery+ajax+asp.net實現(xiàn)Ajax操作的簡介
jquery,ajax,asp.net
是jquery+ajax+ashx的?? 現(xiàn)在這個是Handler.ashx:
========================================================================
<%@ WebHandlerLanguage="C#" class="Handler" %>
using System;
using System.Web;
...jquery+ajax+asp.net實現(xiàn)Ajax操作
是jquery+ajax+ashx的?? 現(xiàn)在這個是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調(diào)用代碼：
=================================================================
$(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",
文章簡介：關(guān)于jquery+ajax+asp.net實現(xiàn)Ajax操作的簡介
jquery,ajax,asp.net
是jquery+ajax+ashx的?? 現(xiàn)在這個是Handler.ashx:
========================================================================
<%@ WebHandlerLanguage="C#" class="Handler" %>
using System;
using System.Web;
...jquery+ajax+asp.net實現(xiàn)Ajax操作
是jquery+ajax+ashx的?? 現(xiàn)在這個是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調(diào)用代碼：
=================================================================
$(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頁面，那頁面多的數(shù)不清，自己也覺得很亂。
自己最近在工作中，也覺得同事用的jquery+ashx用起來相當(dāng)?shù)暮啙嵎奖恪驮谶@里做了一個小的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>無標(biāo)題頁</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"?οnclick='GetCategoryData(this.value)' />
?? ?<input type="radio"value="2" name="wangtao" οnclick='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;
?? ? ? ?}
?? ?}
}
雖然很簡單，但可以供大家舉一反三。
轉(zhuǎn)載于:https://www.cnblogs.com/Rising/archive/2013/04/10/3013328.html
總結(jié)
以上是生活随笔為你收集整理的jquery+ajax+ashx的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 恶心的Oracle的if else if
- 下一篇： webstorm 注册码，亲测可用