ASP.NET下使用Ajax
此前在认识Ajax初步懂得中介绍了对Ajax的初步懂得，本文将介绍在ASP.NET中怎样利便使用Ajax，第一种当然是使用jQuery的ajax，功效强大并且操纵简便利便，第二种是使用.NET封装好的ScriptManager。
相关免费学习引荐：ajax（视频）
$.ajax向一般页面发送get恳求
这是最简便的一种方式了，先简便理解jQuery ajax的语法，最常用的调取方式是这样：$.ajax({settings}); 有几个常用的setting，全部参数及其说明可以去jQuery官方API文档查询
1. type:恳求方式 get/post
2. url:恳求的Uri
3. async：恳求可否为异步
4. headers：自定义的header参数
5. data：发往效劳器的参数
6. dataType：参数格局，常见的有string、json、xml等
7. contents：决议怎样解析response的一个”字符串/正则表达式” map
8. contentType：发送到效劳器的额数据的内容编码类型，它的默许值是"application/x-www-form-urlencoded; charset=UTF-8""。
9. success:恳求成功后调取的句柄
10.error：恳求失败后调取的句柄
没使用过jQuery的ajax话这样看有些云里雾里的感受,来看一个简便例子
第一使用Visual Studio创建一个WebApplication，把jQuery.js引入project，然后增加两个页面，Default.aspx作为测试用
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
<!DOCTYPE html >
<html>
<head runat="server">
<title>Ajax</title>
<script src="jQuery.js" type="text/javascript"></script>
<style type="text/css">
html, body, form
{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#container
{
margin: 100px;
height: 300px;
width: 500px;
background-color: #eee;
border: dached 1px #0e0;
} </style>
</head>
<body>
<form id="form1" runat="server">
<p id="container">
<input type="button" value="Test Ajax" onclick="testGet()" />
<br />
</p>
<script type="text/javascript">
function setContainer(text) {
document.getElementById("container").innerHTML += ('<br/>' + text);
}
function testGet() {
$.ajax({
type: 'get',
url: 'NormalPage.aspx', async: true,
success: function (result) {
alert(result);
},
error: function () {
setContainer('ERROR!');
}
});
} </script>
</form>
</body>
</html>NormalPage.aspx作为恳求页面，先不做任何处置。在Default.aspx页面中的JavaScript中可以看到testGet函数就利用jQuery的ajax向Normal.aspx发送了了一个get恳求，没写的参数使用jQuery默许参数，这个调取没使用任何参数，简便向Normal.aspx页面发送恳求，恳求成功则alert全部response（即success办法参数：result，jQuery会把responseText传入success办法第一个参数），恳求失败则向p中增加一行错误提醒文本。假如一切正常，可以看到页面弹出对话框，对话框内内容便是Normal.aspx页面内容
一个简便的get恳求完成了，这样的结果一样没有多大用途，也不是ajax企图所在，使用Ajax主如果想使用JavaScript可以异步向效劳器发送特定恳求，猎取效劳器相关数据，比方向效劳器扣问气候，然后获得气候数据，更新页面，而不是猎取整个页面，换句话说，使用Ajax本身就是为了挣脱更新整个页面来更新页面数据这种模式，仅仅需要效劳器给我们数据即可，这就需要调取效劳器端的特定办法。
$.ajax GET恳求调取效劳器特定办法
我们这时候需要修改NormalPage.aspx，为其增加几个办法供Default.aspx测试调取
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace Web
{ public partial class NormalPage : System.Web.UI.Page
{ protected void Page_Load(object sender, EventArgs e)
{ string action = Request.QueryString["action"];
Response.Clear(); //清除所有此前生成的Response内容
if (!string.IsNullOrEmpty(action))
{ switch (action)
{ case "getTime":
Response.Write(GetTime()); break; case "getDate":
Response.Write(GetDate()); break;
}
}
Response.End(); //休止Response后续写入动作，包管Response内只要我们写入内容 } private string GetDate()
{ return DateTime.Now.ToShortDateString();
} private string GetTime()
{ return DateTime.Now.ToShortTimeString();
}
}
}然后为Default.aspx增加一个新的办法，并修改button的onclick办法为新写的函数
function testGet2() {
$.ajax({
type: 'get',
url: 'NormalPage.aspx',
async: true,
data:{action:'getTime'},
success: function (result) {
setContainer(result);
},
error: function () {
setContainer('ERROR!');
}
});
}testGet2函数是在testGet函数的根基上做了些许修改，第一对success办法做了更换，把得到的response写到页面；然后对恳求增加了data参数，恳求向效劳器发送了一个action：getTime的键值对，在get恳求中jQuery会把此参数转为url的参数，上面写法和这种写法结果一样
function testGet3() {
$.ajax({
type: 'get',
url: 'NormalPage.aspx？action=getTime',
async: true,
success: function (result) {
setContainer(result);
},
error: function () {
setContainer('ERROR!');
}
});
}看一下施行结果，这是Chrome的监视结果
假如调试我们发明这个恳求调取的效劳器页面NormalPage.aspx的GETime办法，并且response中只包括对有用的数据，假如把恳求中参数的值改为getDate，那么就会调取对应GetDate办法。
$.ajax POST与json
这样向一个页面发送恳求然后在Load事件处置程序中按照参数调取不一样办法，清除Response，写入Response，终止Response，并且传入的参数局限性太大，好业余的赶足，看看专业些解决办法。为project增加一个General Handler类型文件，关于HttpHandler相关内容本文不做具体说明，只需知道它可以非常轻量级的处置HTTP恳求，不消走繁琐的页面生命周期处置各种非必需数据。
Handler.ashx.cs
using System;using System.Collections.Generic;using System.Linq;using System.Web;using Newtonsoft.Json;namespace Web
{ /// <summary>
/// Summary description for Handler /// </summary>
public class Handler : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
Student stu = new Student(); int Id = Convert.ToInt32(context.Request.Form["ID"]); if (Id == 1)
{
stu.Name = "Byron";
} else
{
stu.Name = "Frank";
} string stuJsonString= JsonConvert.SerializeObject(stu);
context.Response.Write(stuJsonString);
} public bool IsReusable
{ get
{ return false;
}
}
}
}关于这个类语法本文不做具体说明，每次发起HTTP恳求ProcessRequest办法都会被调取到，Post类型恳求参数和一再Request对象的Form中取得，每次按照参数ID值返回对应json对象字符串，为了展现json格局数据交互，需要为项目引入json.net这一开源类库处置对象序列化反序列化问题，然后创立一个Student类文件
Student.cs
using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace Web
{ public class Student
{ public int ID { get; set; } public string Name { get; set; }
}
}看看页面怎样处置
function testPost() {
$.ajax({
type: 'post',
url: 'Handler.ashx',
async: true,
data: { ID: '1' },
success: function (result) {
setContainer(result); var stu =eval ('('+result+')');
setContainer(stu.ID);
setContainer(stu.Name);
},
error: function () {
setContainer('ERROR!');
}
});
}结果是这个模样的
上面代码向Handler.ashx发送一Post恳求，比且带有参数{ID:’1’},可以看到结果，假如用调试工具可以发明，得到的result是一个json格局的字符串，也就是往Response写的对象序列化后的结果。这样就实现了比力专业些的方式调取Ajax，但是有一个问题照旧存在，HttpHandler会主动调取ProcessRequest办法，但是也只能调取该办法，假如想调取不一样办法只能像一般页面那样传递一个参数表白调取哪个办法，或者写不一样的Handler文件。
WebService与ScriptManager
微软历来很知心，看看微软如何处置上面的困惑，那就是利用WebService，WebService配合SCriptManager有客户端调取的能力，在项目中增加一个Webservice文件
WebService.asmx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace Web
{ /// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public Student GetStudent(int ID)
{ if (ID == 1)
{ return new Student() { ID = 1, Name = "Byron" };
} else
{ return new Student() { ID = 2, Name = "Frank" };
}
} [WebMethod]
public string GetDateTime(bool isLong)
{
if (isLong)
{
return DateTime.Now.ToLongDateString();
}
else
{
return DateTime.Now.ToShortDateString();
}
}
}
}代码中加黄的code默许是被注释掉的，要想让客户端调取需要把注释去除，Service中定义了两个办法，写个测试办法让客户端调取第一个办法按照参数返回对应对象，第一需要在页面from内加上ScriptManager，援用方才写的WebService文件
Default.aspx
<form id="form1" runat="server">
<asp:ScriptManager ID="clientService" runat="server">
<Services>
<asp:ServiceReference Path="~/WebService.asmx" />
</Services>
</asp:ScriptManager>
<p id="container">
<input type="button" value="Test Ajax" onclick="testPost2()" />
<br />
</p>...然后增加JavaScript测试代码
function testPost2() {
Web.WebService.GetStudent(1, function (result) {
setContainer(result.ID);
setContainer(result.Name);
}, function () {
setContainer('ERROR!');
});
}测试代码中需要显示书写WebService定义办法完全途径，WebService命名空间.WebService类名.办法名，而出入的参数列表前几个是调取办法的参数列表，由于GetStudent只要一个参数，所以只写一个，假如有两个参数就次序写两个，别的两个参数可以很明显看出来是响应成功/失败处置程序。看看施行结果：
视察细心会发明使用ScriptManager和WebService组合有福利，在WebService中传回Student对象的时候并没有序列化成字符串，而是直接返回，看上面图发明对象已经主动转换为一json对象，result结果可以直接操纵，果真非常知心。而上一个例子中我们得到的response是一个json字符串，在客户端需要用eval使其转换为json对象。
ScriptManager+WebSefvice调取ajax带来了很大的便当性，但同时牺牲了许多灵敏性，我们没法像jQuery那样指定许多设定有没有一举两得的方法呢
$.ajax+WebService
jQuery调取Handler几乎完善了，但是不克不及处置多个办法，上面例子我们可以发明WebService可以实现这一功效，那么能不克不及jQUery调取WebService的不一样办法呢？答案是必定的，试一试用jQuery调取方才WebService定义的第二个办法。写一个测试函数
function testPost3() {
$.ajax({
type: 'post',
url: 'WebService.asmx/GetDateTime',
async: true,
data: { isLong: true },
success: function (result) {
setContainer($(result).find('string').text());
},
error: function () {
setContainer('ERROR!');
}
});
}调取方式没有多大转变，简便照旧，只要把URL改为WebService途径+需要调取的办法名，然后把参数放到data里就可以了。我们看看结果：
通过上图可以看到，jQuery调取WebService默许会返回一个XML文档，而需要的数据在 <string>节点中，只需要使用jQuery解析xml的语法就可以轻松得到数据。假如但愿返回一个json对象如何办？那就得和调取Handler一样使用json.net序列化，然后前端使用eval转换了，也不会过于复杂。我在项目中最常使用这个模式，这样既保持了jQuery的灵敏性又可以在一个Service中书写多个办法供调取，还不消走复杂的页面生命周期
json.net和本文示例源代码
json.net是一个开源的.net平台处置json的库，可以序列化Dictionay嵌套等复杂对象，关于其简便使用有时间会总结一下，可以自codeplex上得到其源码和官方说明。本文的源代码可以点击这里获得。
其他相关免费学习引荐：js视频教程
以上就是ASP.NET下使用Ajax的具体内容，更多请关注百分百源码网其它相关文章！
