Jquery+ashx實現Ajax
一 Ajax的實現方式javascript
一、使用通常的webform，在頁面用jQuery ajax調用，再從取得的html數據中取得<body>內的內容，寫入DOMhtml
優勢：不用改變現有的asp.net開發模式，可使用現成的頁面；ajax取得的內容是html文本，直接寫入DOM便可
缺點：內容浪費，<body>以外的內容都不是必要的，並且若是使用了MasterPage那就。。。java
二、使用通常的webform，可是用Response.Write()控制輸出html，在頁面用jQuery ajax調用，將獲取的內容寫入DOMjquery
優勢：內容乾淨，不浪費；ajax取得的內容是html文本，能夠直接寫入DOM
缺點：須要在服務器端以字符串形式構造html文本，編程不方便，不容易調試和維護web
三、使用通常的webform，用Response.Write()控制輸出json數據，在頁面用jQuery ajax調用，將json數據在客戶端加工成html後寫入DOMajax
優勢：僅僅交換json數據，極乾淨，符合高效的web設計理念
缺點：須要在客戶端加工json數據，而且對DOM形成入侵編程
四、使用asmx，封裝成web service，用jQuery ajax調用asmx的內容，將json或者xml數據在客戶端加工成html後寫入DOM
優勢：僅僅交換json或/xml數據，很是乾淨；web service易於跨平臺
缺點：須要在客戶端加工json數據，而且對DOM形成入侵json
五、使用自定義控件ascx，而後使用專門的webform頁面作wrapper（包裝）在頁面用jQuery ajax調用wrapper webform，將html數據寫入DOM服務器
優勢：webform僅僅用做wrapper，根據不一樣的請求參數能夠在wrapper中動態使用自定義控件；自定義控件輸出的是html文本，能夠直接寫入DOM；編程方便，有VS2008代碼感知支持，易於調試和維護
缺點：跟傳統的webform編程理念不同，弱化了webform的做用app
以上就是討論的幾種可行的方案——不論是asp.net webform方式仍是asp.net MVC方式，都是可行的。
2、使用jQuery +ashx
.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;
}
}
}
備註， ashx中IsReusable 必須實現， $.ajax()中，通常datatype可使用Json方式
- 1. jquery實現Ajax
- 2. JQuery實現Ajax
- 3. JavaScript實現Ajax
- 4. Springboot實現ajax
- 5. ajax的實現
- 6. jQuery實現Ajax
- 7. Ajax-Ajax概述&使用 XMLHttpRequest 實現 Ajax
- 8. Ajax實現原理
- 9. boa cgi實現ajax
- 10. 用jQuery實現Ajax
- 更多相關文章...
- • PHP 實例 - AJAX 實時搜索 - PHP教程
- • PHP 實例 - AJAX 與 XML - PHP教程
- • ☆基於Java Instrument的Agent實現
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. jquery實現Ajax
- 2. JQuery實現Ajax
- 3. JavaScript實現Ajax
- 4. Springboot實現ajax
- 5. ajax的實現
- 6. jQuery實現Ajax
- 7. Ajax-Ajax概述&使用 XMLHttpRequest 實現 Ajax
- 8. Ajax實現原理
- 9. boa cgi實現ajax
- 10. 用jQuery實現Ajax