Ajax学习笔记---3种Ajax的实现

时间：2010-08-30 来源：R^.^J

Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据.

(一) Ajax历史....了解性知识

Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司最早发明了LiveScript脚本语言, 用来丰富网页元素的表现形式, 使网页能够呈现出动态效果. 随后的历次改版升级后就诞生了JavaScript语言, 与此同期微软(Microsoft)公司也看到互联网的前景, 开始涉足并发力于互联网行业, 推出了JScript语言, 可惜没有JavaScript成熟, 发展迟滞. 最终微软公司对互联网的决心促成了MS对NS的漫长曲折的收购历程.

这里提一下, 动态HTML语言(Dynamic Hyper Text Markup Language)就是将javascript放在Dom树的元素节点中, 为元素提供动态展示行为.

(二)Web前端开发的三个方向

1. Ajax: 以MS的XHR(XMLHttpRequest)为核心 ---> Ajax

2. flash: MicroMedia ---> 被Adobe收购 ---> flex (涵盖了ActionScript和Rich Internet Application等技术的组合)

3. SilverLight: 微软为了抗衡flex而推出的SilverLight

备注:
为了能够在后台异步与服务器进行通讯, 微软在IE中添加了两个组件: 负责与服务器通讯的组件(XMLHTTPRequest)和XML的处理组件. 采用XML作为数据交换的载体, 在多语言处理时具有优势, 但xml的处理成本较高, 实际上Ajax中通常采用Json对象在客户端浏览器和服务器之间传递数据.

网页的生成过程其实是由服务器上的一组程序来完成的, 这样为了在客户端的JS语言和服务器端的C#语言传递数据, .Net提供了Json序列化和反序列化器, 来提供服务器端C#对象和Json对象之间的转换. 而在浏览器端可以使用eval()函数获取服务器传递过来的Json串转化为Json对象.

(三)Ajax解决什么问题

我们都知道, 在客户端向服务器请求一个页面时, 服务器首先动态的计算并生成出页面, 然后再发给客户端. 客户端浏览器顺序编译并呈现页面.

在没有Ajax时: 假如说页面有个用户验证控件, 那么在客户端浏览器呈现用户验证控件时, 会等待服务器的验证结果, 收到结果后才能继续呈现页面元素. 而这个验证过程通常要进行读取数据库等操作, 这就是所谓的同步方式. 而这种方式, 会造成网页呈现的假死状态.

在使用Ajax后: 同样是验证控件, 客户端提交了验证请求后, 便继续顺序呈现其他元素. 当取得验证结果后, 在页面执行处理过程(该处理过程由javascript在客户端执行). 这样, 使用异步的方式, 就不会出现假死状态, 同时客户端也没有等待服务器的返回结果的时间开销.

(四)Ajax的实现(3中Ajax的实现, 需要说明的是: Ajax能够实现的效果, 通过WebService都能实现.)

1. Js中的Ajax异步调用: a.new b.onreadystatechange(处理responseText) c.open(get方式和post方式) d.send (同步调用: a.new b.open(get方式和post方式) c.send d.responseText)

<script type="text/javascript">

    function getData() {
         // 创建XMLHttpRequest通信对象
         var xhr;
         if(window.ActiveXObject){
             xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }
         else if(window.window.XMLHttpRequest){
             xhr = new XMLHttpRequest();
         }

         // 异步方式处理结果
         xhr.onreadystatechange = function() {
             // readyState表示服务器响应状态. 4: 响应接收完毕
             if (xhr.readyState == 4) {
                 // status 表示 http 请求的状态
                 if (xhr.status == 200) {
                     // 此时得到的是 JSON 格式的串
                     var json = xhr.responseText;
                     alert(json);
                     // 借助  eval 将 json 串转化为对象
                     var obj = eval("( " + json + " ) ");
                     alert(obj.Name);
                     }
                }
            }

         // 默认就是异步方式
         xhr.open("get", "json.ashx");

         // 发出请求
         xhr.send(null);

        /* 同步方式, false表示不适用异步方式
        xhr.open("get", "json.ashx", false);
        xhr.send(null);
        //处理结果
        alert(xhr.responseText);
        */
   }
</script>

然后还需要在项目中, 添加类似于json.ashx一般处理程序, 用于提供相关数据(如: 表格日历的绘制, 去数据库验证等操作)

2. 以前使用的老板Ajax: a.按钮绑定触发JS的方法 b.JS处理方法 c.引用Ajax框架类库 d.在CS文件中注册Ajax(Page_Load事件中) e.CS文件中带Ajax标签的处理方法 f. webconfig中添加配置

//a. 按钮绑定触发JS的方法

this.DDLRole.Attributes.Add("onpropertychange", "onCommandInputPropertyChange();");  //在Page_Load事件中基于Attribute为按钮绑定方法

//b. JS处理方法

<script>
    function onCommandInputPropertyChange(){
        if (event.propertyName == "value"){
            var cmdInput = event.srcElement;
            if (cmdInput.value != 0){
                //alert(cmdInput.value);
                BindRoleName(cmdInput.value);      
            }
        }
    }
    //绑定角色名
    function BindRoleName(RoleID){
        //SysBase_UserEdit是aspx页面的名称
        SysBase_UserEdit.getRoleData(RoleID,get_AllName);
    }
    function get_AllName(response){
        var AllName = document.getElementById("DDLAjax");
        AllName.length = 0;
        if (response.value != null){ 
            var ds = response.value;
            if(ds != null && typeof(ds) == "object"){           
                var name = ds.Tables[0].Rows[0].rolename;
                var id = ds.Tables[0].Rows[0].id;               
                AllName.options.add(new Option(name,id));
            }
        }
    }
</script>

//c. 引用Ajax框架的类库Ajax.dll

//d. 在CS文件中注册Ajax(Page_Load事件中)

Ajax.Utility.RegisterTypeForAjax(typeof(SysBase_UserEdit)); //SysBase_UserEdit是页面文件名称

//e. CS文件中带Ajax标签的处理方法

[Ajax.AjaxMethod]
public DataSet getRoleData(int Roleid)
{
    DataSet ds = new DataSet();
    ds = r.SelectRoleData(string.Format(" and id={0}", Roleid));

    return ds;
}

//f. webconfig添加配置

<httpHandlers>
    <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
</httpHandlers>

3. VS2008集成的Ajax: a.VS2005的话需要安装插件(Microsoft ASP.NET 2.0 AJAX Extensions) b.紧挨着Form元素放置ScriptManager控件 c.在要刷新的table元素首位处, 使用UpdatePanel和ContentTemplate包起来 d.在table元素结尾处的ContenTemplate和UpdatePanel之间放置trigger元素, 注册Ajax触发按钮 e.VS2005需要配置webConfig f.引用类库Ajax2
//d. 在table元素结尾处的ContenTemplate和UpdatePanel之间放置trigger元素, 注册Ajax触发按钮(btn_Search, btn_Delete均为按钮)

<Triggers>
     <asp:AsyncPostBackTrigger ControlID="AspNetPager1" />
     <asp:AsyncPostBackTrigger ControlID="btn_Search" />
     <asp:AsyncPostBackTrigger ControlID="btn_Delete" />
</Triggers>

//e. VS2005需要配置webConfig

代码

<httpHandlers>
<!-- 调用AjaxPro.2 -->
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
    <remove verb="*" path="*.asmx"/>
    <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>