.NET AJAX扩展

ASP.NET AJAX Extensions
总的来说，ASP.NET的AJAX框架包含两个部分，服务器端、客户端。
服务器端包含三个推荐大家安装的文件：
          1：ASP.NET AJAX Extensions（核心包）
          2：ASP.NET AJAX Futures CTP（社区预览扩展包）
          3：ASP.ENT AJAX Control Toolkit（服务器端控件包）
客户端本身并没有安装要求，因为服务器端会向客户端发送合适的脚本，但如果你想把这些脚本放在别的环境也利用一下，那么你可能需要这个：
          4：Microsoft AJAX Library（脚本库）
ASP.NET AJAX 下载、安装指南 这个比较不错.
一.AJAX客户端程序库
1.在ASP.NET外使用客户端工具
<script type="text/javascript" src="js/MicrosoftAjax.js"></script>
<script type="text/javascript" src="js/PreviewScript.js"></script>
2.在ASP.NET中访问客户端工具
<sp:ScriptManager ID="ScriptManager1" runat="server"/>
按照默认情况，ScriptManager会自动将MicrosoftAjax.js文件和MicrosoftAjaxWebForms.js文件发送至客户端。若页面中还需要更加完善的由其他ASP.NET AJAX客户端脚本提供的功能，或者一些自定义的脚本文件，则需要手工在ScriptManager中添加对这些文件的引用.例:
<asp:ScriptManager ID="ScriptManager1" runat="server">
      <Script>
            <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js"/>
            <asp:ScriptReference Path="~/Scripts/ColorDragDrop.js" />
      </Script>
</asp:ScriptManager>
3.使用类
在ASP.NET AJAX类中属性实际上是一个方法,它的前缀是get_(用来获取属性的值)或set_(用来设置属性的值),它提供了在类中访问JavaScript属性的方法.因此,访问"属性"的方法类似于:
object.set_propertyName(newValue);
var value=object.get_propertyName();
4.编写使用ASP.NET AJAX程序库的代码
ASP.NET AJAX程序库为JavaScript提供了一些面向对象编程构造的扩展,诸如命名空间,枚举,接口等,另外也对原有的构造进行了扩展,诸如类,子类等.微软在实现这些扩展时是通过引入一个新的数据类型系统来实现的,这个新的类型系统的核心是Type类,它提供了许多创建各种数据类型的方法.
(1)注册命名空间
//创建ProAjax命名空间
var ProAjax={
      //创建Ch12命名空间
      Ch12:{
            //创建Person类
            Person:function{
                  //构造函数的程序逻辑
            }
      }
}
这段代码创建了一个名为ProAjax的对象,在这个对象里面定义了另一个对象Ch12.这在本质上就是模拟了两级的命名空间.在Ch12中有一个Person类;因此要访问这个类,必须穿越这两层:
var oPerson=new ProAjax.Ch12.Person();
但它缺乏类型的含义:ProAjax和ProAjax.Ch12都被看作是对象,而不是命名空间.
创建命名空间:使用Type.registerNamespace()方法
例:Type.registerNamespace("ProAjax");
判断一个对象是不是一个命名空间,可以用Type.IsNamespace()方法:
如:Type.isNamespace("ProAjax.Ch12");//返回true
(2)注册类
三步:A.根据你的需要创建一个类.如果这个类需要归属于某个命名空间,则在该命名空间中声明.
      B.如果需要使用继承,则在InitializeBase()方法中实例化这个类.
      C.使用registerClass()方法注册这个类.
例:
ProAjax.Ch12.Person=function(){
      ProAjax.Ch12.Person.initializeBase(this);//两个参数:1.要初始化的对象2.(可选)传给基类的构造函数的参数数组
}
ProAjax.Ch12.Person.registerClass("Projax.Ch12.Person");//两个参数,1.类的全名2.(可选)基类,接口
确定一个特定的类或函数是否是一个类,需要使用Type.IsClass()方法:
例:Type.isClass(ProAjax.Ch12.Person);//返回true
使用InheritsFrom()方法判断一个类是否是从另一个类继承的.
例:ProAjax.Ch12.Author.inheritsFrom(ProAjax.Ch12.Person);//返回true|false
getType()方法返回用来创建某个特定对象的构造函数
getTypeName()则可以返回某个对象的类全名
例:
var oAuthor=new ProAjax.Ch12.Author();
varfnConstructor=Object.getType(oAuthor);
var bInherits=fnConstructor.inheritsFrom(ProAjax.Ch12.Person);//返回true
alert(Object.getTypeName(oAuthor));//警告对话框中的内容是"ProAjax.Ch12.Author"
(3).注册枚举
步骤:A.创建该类型
      B.对prototype添加名称-值对
      C.将该类型注册为一个枚举类型
例:
ProAjax.Ch12.Color=function(){};
ProAjax.Ch12.Color.prototype={
      red:0xFF0000,
      blue:0x0000FF,
      green:0x00ff00
};
ProAjax.Ch12.Color.registerEnum("ProAjax.Ch12.Color");//两个参数1.枚举名称2.(可选)布尔,是否为bit字段
(4).注册接口
传统的接口是类必须实现的一组方法和属性,一个实现某个接口的类必须实现接口中定义的所有属性和方法.
//IAuthor接口
ProAjax.Ch12.IAuthor=function(){
      throw Error.notImplemented();
}
ProAjax.Ch12.IAuthor.prototype={
      get_books:function(){
            var sTypeName=Object.getTypeName(this);
            throw Error.notImplemented(sTypeName+" does not fully implement this interface.");
      }
};
ProAjax.Ch12.IAuthor.registerInterface("ProAjax.Ch12.IAuthor");
Error.notImplemented()方法用来创建一个Error对象,抛出该对象时将停止执行.如果一个实现该接口的类没有实现其get_books()方法,那么在该方法被调用时将抛出一个异常.这个错误说明该类(通过Object.getTypeName()方法获取)没有完整实现这个接口.
接口使用:
ProAjax.Ch12.Author=function(){
      ProAjax.Ch12.Author.initializeBase(this);
};
ProAjax.Ch12.Author.prototype={
      get_books:function(){
            alert("We're in get_books()!");
      }
};
ProAjax.Ch12.Author.registerClass("ProAjax.Ch12.Author",ProAjax.Ch12.Person,ProAjax.Ch12.IAuthor);
Author类实现了这个IAuthor接口,因此必须实现IAuthor中定义的所有属性和方法.
判断某个特定的对象或类是否实现了某个接口:ImplementsInterface()方法:
var author=new ProAjax.Ch12.Author();
if(ProAjax.Ch12.Author.implementsInterface(ProAjax.Ch12.IAuthor)){//类是否实现了接口
      author.get_books();
}
if(Object.getType(author).implementsInterface(ProAjax.Ch12.IAuthor)){//对象是否实现了某个接口
      author.get_books();
}
if(ProAjax.Ch12.IAuthor.isImplementedBy(author)){
      author.get_books();
}
5.使用控件
所有的这些控件都在PreviewScript.js文件中定义,都属于Sys.Preview.UI命名空间.每个控件的构造函数都能够接受一个HTMLElement作为参数.当某个元素与控件关联起来,那么这种关联无法改变.如果查询HTMLElement元素的值,可以使用document.getElementById()方法,也可以使用AJAX扩展提供的$get()函数
(1)文本框控件Sys.Preview.UI.TextBox(<input/>或<textarea>)
例:<input id="inputUserName" type="text"/>
var oUserName=new Sys.Preview.UI.TextBox($get("inputUserName"));
oUserName.set_text("Enter Your UserName.");//设置文本信息
var sUserName=oUserName.get_text();//获取文本框中的文本信息
(2)按钮控件Sys.Preview.UI.Button(任何能够接收click事件的元素都与按钮类似)
例:<div id="divButton">A Div Button</div>
var oDivButton=new Sys.Preview.UI.Button($get("divButton"));
oDivButton.initialize();//初始化这个控件(对于文本框控件而言这步并非是必须的)
//添加事件处理函数
function divButton_click(oButton,oEventArgs){//参数1.触发事件的对象2.传给事件处理函数的任意事件参数
      alert("You clicked a <div> button!");
}
oDivButton.add_click(divButton_click);
//oDivButton.remove_click(divButton_click);//删除一个Click事件处理函数
(3)选择器控件Sys.Preview.UI.Selector(<select/>元素)
例:<select id="selectBooks">
      <option value="9780470109496">Professional Ajax</option>
      <option value="0764579088">Professional JavaScript for Web delelopers</option>
      <option value="0470051515">Begging JavaScript,3rd Edition</option>
</select>
var oSelectBooks=new Sys.Preview.UI.Selector($get(selectBooks));
oSelectBooks.initialize();
function selectBooks_selectionChanged(oSelect,oEventArgs){
      alert("value: "+oSelect.get_selectedValue());
      //oSelectBooks.set_selectedValue(""0470051515);
}
oSelectBooks.add_selectionChanged(selectBooks_selectionChanged);
(4)标签控件Sys.Preview.UI.label(所有能够包含文本或标记语言的HTMLElement元素,如<span><div>)
例:<div id="divTextLabel"></div>
<div id="divHtmlLabel"></div>
var oDivTextLabel=new Sys.Preview.UI.Label($get("divTextLabel"));
var oDivHtmlLabel=new Sys.Preview.UI.Label($get("divHtmlLabel"));
oDivTextLabel.set_htmlEncode(true);//把text属性中设置的内容视为纯文本信息
oDivTextLabel.set_text("<b>Plain text label</b>");
oDivHTMLLabel.set_text("<b>html label.</b>");
6.发起HTTP请求(Sys.Net命名空间的WebRequest类)
(1)发起GET请求
var oRequest=new Sys.Net.WebRequest();
oRequest.set_url("textfile.txt");
oRequest.add_completed(request_completed);
oRequest.invoke();
function request_completed(oExecutor,oEventArgs){//参数1.XMLHttpExecutor对象2.事件参数对象
      var sStatusCode=oExecutor.get_statusCode();
      //如果有可用数据,则用该信息填充页面
      if(oExecutor.get_responseAvailable()&&(sStatusCode=="200"||sStatusCode="304")){
            alert(oExecutor.get_responseData());      
      }
      //否则说明出现了某些错误
      else{
            //检查是否是请求超时
            if(oExecutor.get_timedOut()){
                  alert("Request Tmed out.");
            }
            //如果不是超时,则检查是否是请求被取消
            else if(oExecutor.get_aborted()){
                  alert("Request Aborted.");
            }
            else if(sStatusCode!=200||sStatusCode!=304){
                  alert("HTTP Error! Status:"+sStatusCode);
            }
      }
}
(2)发出POST请求
var oRequest=new Sys.Net.WebRequest();
oRequest.set_url("Posttest.aspx");
oRequest.set_body("name=Jeremy");
oRequest.add_completed(request_completed);
oRequest.invoke();
function request_completed(oExecuto,oEventArgs){
      var sStatusCode=oExecutor.get_statusCode();
      //如果有可用数据,则用信息填充页面
      if(oExecutor.get_responseAvailable()&&(sStatusCode=="200"||sStatusCode=="304")){
            alert(oExecutor.get_responseData());
      }
      //否则说明出现了某些错误
      else{
            //检查是否是请求超时
            if(oExecutor.get_timeOut()){
                  alert("Request Timed Out.");
            }
            //如果不是超时,则检查是否是请求被取消
            else if(oExecutor.get_aborted()){
                  alert("Request Aborted.");
            }
            else if(sStatusCode!=200||sStatusCode!=304){
                  alert("HTTP Erroe!Status: "+sStatusCode);
            }
      }
}
ASP.NET文件posttest.aspx:
protected void Page_Load(object sender,EventArgs e)
{
      Response.ContentType="text/plain";
      Response.CacheControl="No-cache";
      if(Request.Form["name"]!=null){
            string name=Request.Form["name"].ToString();
            Response.Write("Hello, "+name+"!");
      }
      else{
            Response.Write("I'm sorry,but no name could be fond");
      }
}
二:更新面板控件
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server" OnAsyncPostBackEror="ScriptManager1_AsyncPostBackError">
      <ContentTemplate>
            <asp:TextBox ID="TextBox1" Text="0" runat="server"/>
      </ContentTemplte>
      <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
      </Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" Text="Add More" runat="server" OnClick="Button1_Click"/>
protected void Button1_Click(object sender,EventArgs e)
{
      long oldNumber=System.Convert.ToInt64(TextBox1.Text);
      long newNumber=++oldNumber;
      TextBox1.Text=newNumber.ToString();
}
protected void ScriptManager1_AsyncPostBackError(object sender,AsyncPostBackErrorEventArgs e)
{
      ScriptManager1.AsyncPostBackErrorMessage=e.Exception.Message;
}
1.UpdatePanel控件的属性:
ChildrenASTriggers:布尔值,用来标明当子控件触发postback事件时,更新面板是否即时更其信息.postback是向服务器发送和接收一次数据的过程.该属性的默认值是true.注意嵌套在更新面板中的更新面板不会触发父更新面板的更新.
RenderMode:用来标明面板如果展现.Block(默认)更新面板作<div/>来展示;Inline,那么以<span/>元素展现.
UpdateMode:确定面板的内容如何更新:
      Always:页面触发的每个PostBack事件(包括异步的postback事件,即将在其他面板触发的)都会使该面板更新其内容
      Conditional:A.显式调用了UpdatePanel实例的Update()方法
                  B.postback事件是由定义为触发器的控件触发的,不管这个触发器是在更新面板的内部还是外部定义的
                  C.ChildrenASTriggers属性的值是true,并且postback事件是由子控件触发的
2.PostBackTrigger:它将触发一个标准的postback事件(将刷新整个页面).这种触发器在完成诸如上传文件之类的功能是很有用的,因为文件是无法以异步模式上传的.PostBackTrigger元素只有一个名为ControlID的元素,它将对应于一个控件的ID属性.
3.AsyncPostBackTrigger:它将触发一个异步的postback事件.声明这种触发器的元素有两个可能的属性:ControlID和EventName.EventName是可选的,它可以用来使绑定控件的某个事件触发更新(否则任何事件都将触发更新操作)