在ASP.NET使用Ajax的方法

$.ajax向普通页面发送get请求。这是最简单的方法。首先，简单理解jQuery ajax的语法。最常用的调用方法如下：$。Ajax({ settings })；有几种常用的设置。所有参数及其说明都可以在jQuery官方API文档1中查询。type:请求模式get/post2。url:请求Uri3。async:请求是否为异步4。标题：用户定义的标题参数5。数据：发送到服务器6的参数。数据类型：参数格式。常见的有字符串、json、xml等。7.内容：“字符串/正则表达式”map8。contentType:发送到服务器的数据的内容编码类型，默认值为‘application/x-www-form-URL encoded；字符集=UTF-8 ' ' .9.success:请求成功后调用的Handles 10 .错误：请求失败后调用的Handles没有使用jQuery的ajax字样，所以有种云里雾里的感觉。让我们看一个简单的例子。首先，使用Visual Studio创建一个新的WebApplication，将jQuery.js引入到项目中，然后添加两个页面。Default.aspx的代码作为Default.aspx的副本代码进行测试如下：% @ page language=' c# ' autoeventreut=' true ' code behind=' default . aspx . cs ' inherits=' web . default ' %！DOCTYPE html html head runat=' server ' title Ajax/title script src=' http : jquery . js ' type=' text/JavaScript '/script style type=' text/CSS ' html，body，form { width : 100%；高度： 100%；padding: 0pxmargin: 0px} #容器{ margin: 100pxheight: 300px宽度： 500 px；背景色： # eee；border: dached 1px # 0e0} /style/headbody表单id=' form 1 ' runat=' server ' div id=' container '输入类型='button '值=' Test Ajax ' onclick=' testGet()'/br//div脚本类型='text/javascript '函数setContainer(text){ document . getelementbyid(' container ')。innerHTMl=(' br/' text)；}函数testGet() { $。ajax({ type: 'get '，url: 'NormalPage.aspx '，async: true，success : function(result){ alert(result)；}，error:函数(){ setContainer('ERROR！');} });}/script/form/body/html normal page . aspx用作请求页，不做任何处理。在Default.aspx页面的JavaScript中可以看到，testGet函数使用jQuery的ajax向Normal.aspx发送Get请求，未写入的参数使用jQuery的默认参数。这个调用不使用任何参数，只是向Normal.aspx页面发送一个请求。如果请求成功，alert将完全响应(即成功方法参数：result，jQuery将responseText传递给成功方法的第一个参数)，如果请求失败，在DIV中添加一行错误提示文本。如果一切正常，可以在页面上看到弹出的对话框，对话框中的内容就是Normal.aspx页面的内容。

一个简单的get请求已经完成，这通常没什么用，也不是ajax的意图。使用Ajax的主要目的是利用JavaScript向服务器异步发送特定请求，获取服务器相关数据，比如向服务器询问天气情况，然后获取天气数据并更新页面，而不是获取整个页面。换句话说，使用Ajax本身就是摆脱了更新整个页面来更新页面数据的模式，只需要服务器给我们数据，这就需要在服务器端调用特定的方法。$.ajax GET请求调用特定于服务器的方法。此时，我们需要修改NormalPage.aspx，并为Default.aspx添加几个方法进行测试和调用。复制的代码如下：使用系统；使用系统。集合。通用；使用系统。Linq使用系统。Web使用系统。Web . UI使用系统。网络控件；命名空间Web{公共部分类NormalPage : System。Web.UI.Page {受保护的void Page_Load(对象发送者，事件参数e) {字符串操作=请求。query string[' action ']；回应。clear()；//清除if(！字符串。IsNullOrEmpty(action)){ switch(action){ case ' getTime ' : Response。write(GetTime())；打破；案例“GetDate”:响应。write(GetDate())；打破；} }回应。end()；//停止Response的后续写入，确保只有我们在Response中写入} private string getdate(){ return datetime . now . to short date string()；}私有字符串GetTime() {返回DateTime。now . to short timestring()；}}}然后为Default.aspx添加一个新的方法，并修改button的onclick方法，为新编写的函数复制代码。代码如下：函数测试get2 () {$。Ajax ({type:' get '、url3360' normalpage.aspx '、async: true、data : { action : ' getTime ' }、success : function(result){ setContainer(result)；}，error:函数(){ setContainer('ERROR！');} });}testGet2函数基于testGet函数，做了一些修改。首先，改变成功方法，将获得的响应写入页面；然后向请求中添加一个数据参数，请求向服务器发送一个操作的键值对：getTime。在get请求中，jQuery将这个参数转换成url的参数。上面写的和这个写的效果一样，复制的代码如下：函数测试get3 () {$。Ajax ({type:' get '，url:' normalpage.aspx？action=getTime '，async: true，success : function(result){ setContainer(result)；}，error:函数(){ setContainer('ERROR！');} });}看执行效果，这是Chrome 的监控结果。

在调试的情况下，我们发现这个请求调用的服务器页面NormalPage.aspx的GETime方法只包含有用的数据，如果将请求中的参数值改为GetDate，就会调用对应的getDate方法。$.ajax POST和json像这样向页面发送请求，然后根据Load事件处理程序中的参数调用不同的方法，清除Response，写入Response，终止Response。而且传入的参数太有限，追脚是个不错的业余爱好者。看一些专业的解决方案。为项目添加常规处理程序类型文件。本文不会详细讲解HttpHandler的相关内容，只知道它可以非常轻松地处理HTTP请求，并且不需要通过繁琐的页面生命周期来处理各种不必要的数据。Handler.ashx.cs复制代码如下：使用System使用系统。集合。通用；使用系统。Linq使用系统。Web使用Newtonsoft。Json命名空间Web {///summary///Handler的Summary描述////summary公共类Handler : IHttpHandler { public void ProcessRequest(HttpContext)上下文){ Student stu=new Student()；整数=转换。ToInt32(上下文。请求.表单[' ID '])；if (Id==1) { stu。名字='拜伦'；} else { stu。姓名='弗兰克'；} string StujsonString=JSonConvert。SerializeObject(stu)；语境。response . Write(stuJsonString)；} public bool IsReuse { get { return false；}}}}本文没有详细描述这个类的语法。每次启动HTTP请求时，都会调用ProcessRequest方法，并从Post类型请求参数和重复请求对象的表单中获取该方法。每次根据参数ID值返回对应的json对象字符串。为了展示json格式的数据交互，需要引入json.net作为项目的开源类库来处理对象的序列化和反序列化，然后创建一个Student类文件Student.cs复制代码如下：using System使用系统。集合。通用；使用系统。Linq使用系统。Web命名空间Web{公共类Student { public int ID { get设置；}公共字符串名称{ get设置；}}}查看页面如何处理复制的代码。代码如下：函数测试post () {$。Ajax ({type:' post '，url3360' handler.ashx '，async: true，data: {id3360' 1'}，success: function (result。var stu=eval('(' result ')')；setContainer(stu。ID)；setContainer(stu。名称)；}，error:函数(){ setContainer('ERROR！');} });}结果是这样的。

上面的代码用参数{ID:'1'}向Handler.ashx发送一个Post请求，您可以看到结果。如果使用调试工具，可以发现得到的结果是json格式的字符串，也就是写入Response的对象序列化的结果。这样一来，Ajax的调用就更专业了，但还是有问题。HttpHandler会自动调用ProcessRequest方法，但它只能调用这个方法。如果要调用不同的方法，只能像普通页面一样传递一个参数来指示调用哪个方法，或者编写不同的Handler文件。WebService和ScriptManager微软一直都非常亲密。让我们看看微软是如何处理上述困惑的，即使用WebService，它具有与SCriptManager协作的客户端调用能力，并在项目中添加一个WebService文件WebService.asmx。复制代码如下：使用系统；使用系统。集合。通用；使用系统。Linq使用系统。Web使用系统。网络服务；命名空间Web {///Summary///WebService///Summary描述[WebService(Namespace=' http://tempuri . org/')][WebService binding(ConformsTo=WsiProfiles。base cprofile 1 _ 1)][系统。component model . toolbox item(false)]//要允许使用ASP.NET AJAX从脚本调用此Web服务，请取消对以下行的注释。[系统。公共类。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]公共字符串GetDateTime(bool ISlong){ if(ISlong){返回DateTime。now . TolongDateString()；} else {返回DateTime。now . to short date string()；}}}}默认情况下，代码中的黄色代码会被注释。如果希望客户端调用，需要移除注释。服务中定义了两种方法。为客户端编写一个测试方法，根据参数调用第一个方法返回对应的对象。首先，您需要在页面中添加ScriptManager。刚刚编写的WebService文件Default.aspx的复制代码如下： form id=' form 1 ' runat=' server ' asp3360 script manager id=' client service ' runat=' server ' services asp3360 ser。vice reference Path=' ~/webservice . asmx '//Services/asp3360 script manager div id=' container '输入类型='button '值=' Test Ajax ' onclick=' Test post 2()'/br//添加JavaScript测试代码并复制代码如下：函数测试post 2(){ web . web service . getstudent(1，function(result){ setcontainer(result . id)；setContainer(结果。名称)；}，function () { setContainer('ERROR！');});}测试代码需要显示编写WebService定义方法的完整路径，即WebService命名空间、WebService类名和方法名，参数列表的前几个进出是调用方法的参数列表。因为GetStudent只有一个参数，所以只需要写一个。如果有两个参数，按顺序写两个，另外两个参数可以清楚地看作响应成功/失败处理程序。看实施结果：。

仔细观察就会发现ScriptManager和WebService的结合是有好处的。当学生对象在网络服务中返回时，它不会被序列化为字符串，而是直接返回。看上图发现对象已经自动转换成json对象，结果结果可以直接操作，真的很贴心。在最后一个示例中，我们得到的响应是一个json字符串，需要在客户端使用eval将其转换为json对象。ScriptManager WebSefvice调用ajax，带来了极大的便利，但同时也牺牲了很多灵活性。我们不能像jQuery那样指定很多设置。有办法两全其美吗？$.ajax WebServicejQuery几乎完美地调用了Handler，但它无法处理多个方法。在上面的例子中，我们可以发现WebService可以实现这个功能，那么jQUery可以调用WebService的不同方法吗？答案是肯定的，尝试jQuery调用刚才WebService定义的第二个方法。编写一个测试函数，复制代码如下：函数测试post3 () {$。Ajax ({type:' post '，URL 3360 ' webservice.asmx/getdatetime', async 3360 true，data: { isLong: true }，success:函数(result) { setContainer($(result))。查找('字符串')。text())；}，error:函数(){ setContainer('ERROR！' );} });}调用方法没有太大变化，依然简单，只需在WebService路径中将URL改为要调用的方法名称，然后将参数放入数据中即可。让我们看看结果：

从上图可以看到，jQuery在调用WebService时默认会返回一个xml文档，所需数据在string节点，所以只需要使用jQuery解析XML语法就可以轻松获取数据。如果你想返回一个json对象呢？您必须像调用Handler一样使用json.net序列化，然后前端使用eval转换，这并不太复杂。我在项目中最常使用这种模式，它不仅保持了jQuery的灵活性，而且可以编写多个方法在一个Service中调用，而不需要花费复杂的页面生命周期。json.net和本文的示例源代码。json.net是开源的。net平台来处理json库，可以序列化复杂的对象如Dictionay嵌套。有时间我会总结它的简单用法，并从codeplex获取它的源代码和官方指令。本文的源代码可以点击这里获取。