您的位置：首页 > 其它

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

2007-08-25 19:12 260 查看

之前了解了下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>
/// </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. 创建新的页面,代码如下

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<script language="javascript" type="text/javascript">
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. 创建一个页面

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">
<Services>
<asp:ServiceReference Path='EmployeeService.asmx' />
</Services>
</asp:ScriptManager>

<script language="javascript" type="text/javascript">
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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航