AJAX从零开始--初步接触AJAX.NET

之前了解了下AJAX的原理，今天去看了下WEVCAST的AJAX深入浅出的视频，开始学习AJAX.NET。

虽然MS说AJAX.NET可以避免用户编写JAVASCRIPT，但实际开发中多少还是会用到，不过还是减少了不少的JavaScript编写。

微软ASP.NET的AJAX实现

- 与ASP.NET 2.0无缝集成.

- 轻易添加AJAX效果

- 以服务端为中心开发(不用写JS代码)

- 以客户端为中心开发(提供丰富支持)

AJAX.NET 组件

ASP.NET AJAX Control ToolKit

Miscrosft AJAX Library ASP.NET 2.0 AJAX Extensions

ASP.NET 2.0

Miscrosft AJAX Library :

- JavaScript基础扩展比如添加了string 之类的

- 浏览器兼容层多浏览器支持,比如IE FireFox Oprea的支持

- 面向对象类型系统可以写出更容易维护和扩展的代码

- 异步通信层相当于是对XMLHttpRequest进行封装

- 客户端基础类库比如StringBuilder 还有一些其他的客户端组建

DEMO:

面向对象类型系统

开发环境VS05 AJAX.NET 1.0

1. 首先在App_Code里添加个Employee类,代码如下

namespace AJAXTest

{

/// <summary>

/// Employee 的摘要说明

/// </summary>

public class Employee

{

private string _FirstName;

private string _LastName;

private string _Title;

public Employee() { }

public Employee(string firstName, string lastName, string title)

{

this._FirstName = firstName;

this._LastName = lastName;

this._Title = title;

}

public string FirstName

{

get

{

return this._FirstName;

}

public string LastName

{

get

{

return this._LastName;

}

public string Title

{

get

{

return this._Title;

}

2. 创建新的页面,代码如下

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

Type.registerNamespace("AspNetAjaxOverView");

AspNetAjaxOverView.Person = function(firstName, lastName)

{

this._firstName = firstName;

this._lastName = lastName;

}

AspNetAjaxOverView.Person.prototype =

{

get_firstName : function()

{

return this._firstName;

get_lastName : function()

{

return this._lastName;

toString : function()

{

return String.format("Hello, I'm {0} {1}.",

this.get_firstName(),

this.get_lastName());

}

AspNetAjaxOverView.Person.registerClass("AspNetAjaxOverView.Person");

AspNetAjaxOverView.Employee = function(firstName, lastName, title)

{

AspNetAjaxOverView.Employee.initializeBase(this, [firstName, lastName]);

this._title = title;

}

AspNetAjaxOverView.Employee.prototype =

{

get_title : function()

{

return this._title;

toString : function()

{

return AspNetAjaxOverView.Employee.callBaseMethod(this, "toString") +

" My title is '" + this.get_title() + "'.";

}

AspNetAjaxOverView.Employee.registerClass("AspNetAjaxOverView.Employee", AspNetAjaxOverView.Person);

</script>

<input type="button" value="Bill Gates"

onclick="alert(new AspNetAjaxOverView.Employee('Bill', 'Gates', 'Chair man'));" />

<input type="button" value="Steve Ballmer"

onclick="alert(new AspNetAjaxOverView.Employee('Steve', 'Ballmer', 'CEO'));" />

</form>

运行如果提示很多错误, 两个解决方案

1. 把该虚拟目录创建成应用程序

2. 在Web.Config里,把<authentication mode="Windows"/>删掉

异步通信层

1. 创建一个GetEmployee.ashx的一般处理程序，在里面输入

<%@ WebHandler Language="C#" Class="AJAXTest.GetEmployee" %>

using System;

using System.Web;

using System.Web.Script.Serialization;

namespace AJAXTest

{

public class GetEmployee : IHttpHandler

{

//响应客户端的请求

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

string firstName = context.Request.Params["firstName"];

string lastName = context.Request.Params["lastName"];

string title = context.Request.Params["title"];

//构造实例

Employee employee = new Employee(firstName,lastName,title);

//将一个对象序列化成字符串

JavaScriptSerializer serializer = new JavaScriptSerializer();

string jsonEmp = serializer.Serialize(employee);

context.Response.Write(jsonEmp);

}

public bool IsReusable

{

get

{

return false;

}

2. 创建一个页面

function showEmployee(firstName,lastName,title)

{

//客户端创建Request对象

var request = new Sys.Net.WebRequest();

request.set_url('GetEmployee.ashx');

//使用POST方式

request.set_httpVerb("POST");

request.add_completed(onGetEmployeeComplete);

var requestBody = String.format(

"firstName={0}&lastName={1}&title={2}",

// encodeURIComponent 方法返回一个已编码的 URI。

//如果您将编码结果传递给 decodeURIComponent，那么将返回初始的字符串。

//因为 encodeURIComponent 方法对所有的字符编码

//如果该字符串代表一个路径，例如 /folder1/folder2/default.html，其中的斜杠也将被编码。

//这样一来，当该编码结果被作为请求发送到 web 服务器时将是无效的。

//如果字符串中包含不止一个 URI 组件，请使用 encodeURI 方法进行编码。

encodeURIComponent(firstName),

encodeURIComponent(lastName),

encodeURIComponent(title)

);

request.set_body(requestBody);

//发送

request.invoke();

}

//回调函数,等服务器回复时调用

function onGetEmployeeComplete(response)

{

if(response.get_responseAvailable())

{

var employee = response.get_object();

alert(String.format(

"Hello I'm {0} {1}, my title is '{2}'",

employee.FirstName,

employee.LastNmae,

employee.Title

));

}

</script>

<input type="button" value="Bill Gates"

onclick="showEmployee('Bill', 'Gates', 'Chair man')" />

<input type="button" value="Steve Ballmer"

onclick="showEmployee('Steve', 'Ballmer', 'CEO')" />

ASP.NET 2.0 AJAX Extensions

-序列化与反序列化

-客户端访问Web Service方法

- 服务端AJAX控件

-ScriptManager 必须有一个也只能有一个

-UpdatePanel 据说利用它编写JS非常简单

-Extender 模型，编写一些控件，为另外一个控件提供额外的AJAX功能

例:

1. 新建个EmployeeService Web服务

<%@ WebService Language="C#" Class="AJAXTest.EmployeeService" %>

using System;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Web.Script.Services;

namespace AJAXTest

{

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

//使客户端能直接调用

[ScriptService]

public class EmployeeService : System.Web.Services.WebService

{

[WebMethod]

//使客户端能直接调用

[ScriptMethod]

public Employee GetEmployee(string firstName, string lastName, string title)

{

return new Employee(firstName, lastName, title);

}

2. 创建页面用来访问

<asp:ScriptManager ID="ScriptManager1" runat="server">

<asp:ServiceReference Path='EmployeeService.asmx' />

</Services>

</asp:ScriptManager>

function showEmployee(firstName, lastName, title)

{

//直接调用

AJAXTest.EmployeeService.GetEmployee(

firstName,

lastName,

title,

onGetEmployeeSuccess);

}

function onGetEmployeeSuccess(employee)

{

alert(String.format(

"Hello I'm {0} {1}, my title is '{2}'",

employee.FirstName,

employee.LastName,

employee.Title));

}

</script>

<input type="button" value="Bill Gates"

onclick="showEmployee('Bill', 'Gates', 'Chair man')" />

<input type="button" value="Steve Ballmer"

onclick="showEmployee('Steve', 'Ballmer', 'CEO')" />

但是访问时候会出现说找不到AJAXTest未定义,调试了几个小时也不清楚到底原因在哪,VS05调试JS不方便吧

不过用DEMO里的例子却可以运行.

明天再继续研究,顺便学UpdatePannel

秒客网

AJAX从零开始--初步接触AJAX.NET

相关文章