一 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方式，都是可行的。

二、使用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方式

Jquery+ashx实现Ajax的更多相关文章

  1. JQuery 插件之Ajax Autocomplete（ajax自动完成）搜索引擎自动显示下拉框

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  2. JQuery 插件之Ajax Autocomplete（ajax自动完成）

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  3. jquery中的ajax方法参数

    引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...

  4. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

  5. 【jQuery实例】Ajax登录页面

    登录界面是信息系统提供的必备的功能,是提供给用户提供维护信息的接口.接下来,我来带领大家打造一个漂亮.安全的登录界面,使用的技术是ASP.NET+jQuery 先来看看预览效果   Ajax登录重点在 ...

  6. Jquery中的Ajax

    AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...

  7. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  8. 从jquery里的$.ajax()到angularjs的$http

    jquery中对ajax的使用做了很多封装,使得我们使用习惯了,反而并不大清楚在请求过程中的一些细节. 在第一次使用angularjs的$http时,后台一直接受不到前端请求的数据,于是小小研究了一下 ...

  9. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

随机推荐

  1. 常用的机器学习&数据挖掘知识点总结

    Basis(基础): MSE(Mean Square Error 均方误差),LMS(LeastMean Square 最小均方),LSM(Least Square Methods 最小二乘法),ML ...

  2. Lightoj 1020 - A Childhood Game

    Allice先拿,最后拿球的输. Bob先拿,最后拿球的赢. 考虑Alice先拿球,当n=1时 Alice输  记dp[1]=0; n=2,  dp[2]=1 n=3,  dp[3]=1 因为n=1, ...

  3. Android5.1修改以太网MAC地址（SElinux）【转】

    本文转载自:http://blog.csdn.net/LoongEmbedded/article/details/71477203 最近高通平台Android5.1项目中有个关于设置以太网MAC的需求 ...

  4. iphone设备尺寸规格

    1.以下是iphone各种设备的尺寸规格 2.开发时只需要按“逻辑分辨率”来,1x,2x,3x主要用于切图时按不同大小来切图,如1x的图就是按照“逻辑分辨率”大小的效果图切出来的原图,2x就是1x原图 ...

  5. python编写九九乘法表代码

    打印九九乘法表 代码: #!/usr/bin/env python # -*- coding: UTF-8 -*- # 项目二: # 1.要求:编写九九乘法表 # 2.分析: # 根据九九乘法表的样式 ...

  6. appium封装显示等待Wait类和ExpectedCondition接口

    此文已由作者夏鹏授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 使用WebDriver做Web自动化的时候,org.openqa.selenium.support.ui中提供 ...

  7. J20170524-hm

    取りこぼし 意外地输给较自己实力弱的对手,爆出冷门,败给手下败将 振り分け 分配,整理 スキーマ 图解.模式.图式

  8. POJ2800:Joseph's Problem(等差数列)

    传送门 题意 计算 \(\sum_{i=1}^n(kmodi)\) 分析 1.n>k 直接输出k*(n-k) 2.n<=k 我们发现k/i相同的k%i构成一个等差数列,那么我们从k/i-& ...

  9. bzoj 3566: [SHOI2014]概率充电器【树形概率dp】

    设g[u]为这个点被儿子和自己充上电的概率,f[u]为被儿子.父亲和自己充上电的概率 然后根据贝叶斯公式(好像是叫这个),1.P(A+B)=P(A)+P(B)-P(A)*P(B),2.P(A)=(P( ...

  10. 深入学习Ajax

    1.什么是Ajax? AJAX的全称是Asynchronous Javascript And XML (异步的JavaScript和XML).是一种在无需重新加载整个网页的情况下,能够更新部分网页的技 ...