一 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. Part1-Redefining your data-access strategy 重新定义你的数据访问策略

    欢迎来到Entity Framework 4 In Action,EF是微软3.5 SP1推出的ORM工具,现在已经更新到4.0版本(...)本书能确保你in a  robust and model- ...

  2. Facebook Flux 分析

    首先是actions使用了Dispatcher来定义分发事件, Store在Dispatcher里注册自己的ActionType,收到对应的Action后修改Store内部的结构 Store emit ...

  3. HTML与JSP页面的区别

    HTML(Hypertext Markup Language)文本标记语言,它是静态页面,和JavaScript一样解释性语言,为什么说是解释性 语言呢?因为,只要你有一个浏览器那么它就可以正常显示出 ...

  4. Watir: 右键点击实例(某些如果应用AutoIt来做会更加简单高效)

    require 'watir' module Watir class Element def top_edge assert_exists assert_enabled ole_object.getB ...

  5. UI:简单的SQL语句

    一.SQL语句如果要在程序运行过程中操作数据库中的数据,那得先学会使用SQL语句1.什么是SQLSQL(structured query language):结构化查询语言SQL是一种对关系型数据库中 ...

  6. UVa 12717 Fiasco (BFS模拟)

    题意:给定一个错误代码,让你修改数据,使得它能够输出正确答案,错误代码是每次取最短的放入. 析:那么我们就可以模拟这个过程,然后修改每条边的权值,使得它能输出正确答案. 代码如下: #pragma c ...

  7. Postgresql个人维护库时,出现有用户在连接又找不到这个用户是谁的强制中断连接的方法;

    方法一: 去PostgreSQL目录下/data/pgdata/9.4,找到pg_hba.conf, 修改pg_hba.conf的白名单IP (修改前,最好服务已停止,我是这么操作的) # IPv4 ...

  8. 哈理工OJ P2320:OX

    题目链接:OX 题意 :给出一个3X3的黑白棋棋盘,棋盘上有若干黑白子,再给出下一个下的人,问下一个下的人能否赢 分析:考虑到只有39种状态,故用一个数保存目前棋盘的状态,记为value,再枚举空位D ...

  9. bzoj 4080: [Wf2014]Sensor Network【瞎搞+随机化】

    参考:https://blog.csdn.net/YihAN_Z/article/details/73380387 一点都不想写正解.jpg random_shuffle一下然后贪心的加点,和ans取 ...

  10. LuoguP1063 能量项链【区间Dp】

    前天测试考了QAQ.这么经典的区间dp不再开一文好像有点可惜. 内容是从模拟赛结题报告中copy来的.QAQ noip能量项链原题. https://www.luogu.org/problemnew/ ...