太原整站优化,成品网站模块,wordpress 手机播放不了视频,做PHP网站前端网站进不去之前在Ajax初步理解中介绍了对Ajax的初步理解#xff0c;本文将介绍在ASP.NET中如何方便使用Ajax#xff0c;第一种当然是使用jQuery的ajax#xff0c;功能强大而且操作简单方便#xff0c;第二种是使用.NET封装好的ScriptManager。 $.ajax向普通页面发送get请求 这是最简单…之前在Ajax初步理解中介绍了对Ajax的初步理解本文将介绍在ASP.NET中如何方便使用Ajax第一种当然是使用jQuery的ajax功能强大而且操作简单方便第二种是使用.NET封装好的ScriptManager。 $.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; charsetUTF-8。 9. success:请求成功后调用的句柄 10.error请求失败后调用的句柄 没使用过jQuery的ajax话这样看有些云里雾里的感觉,来看一个简单例子 首先使用Visual Studio新建一个WebApplication把jQuery.js引入project然后添加两个页面Default.aspx作为测试用 Default.aspx % Page LanguageC# AutoEventWireuptrue CodeBehindDefault.aspx.cs InheritsWeb.Default %
!DOCTYPE html
html
head runatservertitleAjax/titlescript srcjQuery.js typetext/javascript/scriptstyle typetext/csshtml, 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
bodyform idform1 runatserverdiv idcontainerinput typebutton valueTest Ajax οnclicktestGet() /br //divscript typetext/javascriptfunction 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方法参数resultjQuery会把responseText传入success方法第一个参数请求失败则向DIV中添加一行错误提示文本。如果一切正常可以看到页面弹出对话框对话框内内容即是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参数请求向服务器发送了一个actiongetTime的键值对在get请求中jQuery会把此参数转为url的参数上面写法和这种写法效果一样 function testGet3() {$.ajax({type: get,url: NormalPage.aspxactiongetTime,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/// /summarypublic 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 微软向来很贴心看看微软怎么处理上面的困惑那就是利用WebServiceWebService配合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 idform1 runatserverasp:ScriptManager IDclientService runatserverServicesasp:ServiceReference Path~/WebService.asmx //Services/asp:ScriptManagerdiv idcontainerinput typebutton valueTest Ajax οnclicktestPost2() /br //div
... 然后添加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对象。 ScriptManagerWebSefvice调用ajax带来了很大的便利性但同时牺牲了很多灵活性我们没法像jQuery那样指定很多设置有没有两全其美的办法呢 $.ajaxWebService 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上得到其源码和官方说明。本文的源代码可以点击这里获得。转载于:https://www.cnblogs.com/starksoft/p/4066384.html
