初试Ajax.Net !

简介: 从事了几年的C/S模式的开发,曾一直无暇研究B/S,前段时间摊上了一个B/S的活,这才开始认真的关注其B/S开发。而且,AJAX技术的风起云涌,也使得B/S应用的表现力日益增强,大有逐步吞食C/S领地之势。

    从事了几年的C/S模式的开发,曾一直无暇研究B/S,前段时间摊上了一个B/S的活,这才开始认真的关注其B/S开发。而且,AJAX技术的风起云涌,也使得B/S应用的表现力日益增强,大有逐步吞食C/S领地之势。这两天通过《Ajax基础教程》开始学习Ajax技术,在附录的Ajax框架介绍中发现了这样一句话:“利用Ajax.Net,你可以从JavaScript客户调用.NET方法”。这是我梦寐以求的功能啊,于是迫不及待的开始研究下Ajax.Net,初试的结果令我对Ajax.Net非常满意:)
    
    好了,言归正传,先做好准备工作,首先下载Ajax.Net,你可以从这里获得。最新版本是6.4.15.1,下载解压后的文件夹中有个AjaxPro.2.dll,就是它了。使用VS2005新建web项目(注意,AjaxPro.2.dll不支持VS2003),并添加对AjaxPro.2.dll的引用,然后在Web配置文件中添加:

         < httpHandlers >
            
< add verb = " POST,GET "  path = " ajaxpro/*.ashx "  type = " AjaxPro.AjaxHandlerFactory, AjaxPro.2 " />
        
</ httpHandlers >


    这个配置项表明所有的ajaxpro/*.ashx请求(即从客户发送的Ajax请求)都交给AjaxPro.AjaxHandlerFactory处理,而不是由默认的System.Web.UI.PageHandlerFactory来处理。 
    新建的web项目有个默认的_Default页面,我们为其加上命名空间如MyAjaxNetTest,然后在_Default的HTML第一句也要加上这个名目空间:

<% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Default.aspx.cs "  Inherits = " MyAjaxNetTest._Default "   %>

    然后在PageLoad中注册本页面到AjaxPro中:

        protected   void  Page_Load( object  sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(
typeof (_Default)); 
        }


    测试一
    一切已经准备就绪了,我们先进行第一个测试,从客户调用服务端的简单方法。首先在_Default类中添加方法:

         [AjaxPro.AjaxMethod]
        
public   string  GetServerTime()
        {
            
return  DateTime.Now.ToString();
        }

    
    客户现在可以在JS中调用这个方法了,如

        < script type = " text/javascript " >
       function getTime()
       {         
          alert(MyAjaxNetTest._Default.GetServerTime().value);          
       }
       </ script >

    
    然后你可以加个HTML的button,onclick处理函数设为getTime()。

< input id = " Button1 "  type = " button "  value = " button "  onclick = " getServerTime() " />


    
    测试二
    
    为GetServerTime方法添加static修饰,测试仍然成功!

    测试三 
    简单方法调用已经OK了,GetServerTime方法返回的是一个简单的string,那么服务端可不可以返回稍微复杂一点的对象了?我们来试试。先新建一个Student类:

      public   class  Student
    {
        
public   string  Name  =   " sky "  ;
        
public   int      Age  =   26 ;
    }


    服务端添加GetStudent方法:

        [AjaxPro.AjaxMethod]
        
public  Student GetStudent()
        {
            
return   new  Student();
        }


    对应的,客户端添加调用:

       function getStudent()
       {
         var stu 
=  MyAjaxNetTest._Default.GetStudent().value ;
         alert(stu.Name 
+   "   "   +  stu.Age) ;
       }


    依照前面的加个HTML按钮测试getStudent函数,答案是,一切照我们预料的进行,客户js可以访问服务端返回的对象。

    测试四
    最后看看能够在客户端提交对象给服务器,先在服务端添加方法:

1           private  Student student  =   null ;
2          [AjaxPro.AjaxMethod]
3           public   void  SetStudent(Student stu)
4          {
5               this .student  =  stu;
6               string  name  =   this .student.Name;
7          }

    可以在第六行添加断点,然后当客户端调用时,会进入该断点。

    客户端添加调用:

     function putStudent()
       {
            var stu 
=  MyAjaxNetTest._Default.GetStudent().value ;
            stu.Name 
=   " chenqi "  ;
            MyDemo._Default.SetStudent(stu) ;
       }

    同样,当调用putStudent这个js方法时,服务端进入断点已经表明客户成功的提交了对象,并且对象的Name字段已经改变为“chenqi”了。

    测试五
    前面客户设置的都是Student的public字段,那么访问属性如何了?我们将Student定义更改如下:

      public   class  Student
    {
        
private   string  name  =   " sky "  ;
        
public   int  Age  =   26 ;

        
public   string  Name
        {
            
get
            {
                
return   this .name;
            }
            
set
            {
                
this .name  =  value;
            }
        }
    }

    再重复前面的测试,结果我想已经在你的料想中了。

    单从前面的几个小测试,我已经发现了使用Ajax.Net的方便与迅捷,看来B/S开发不再像我以前感受的那样繁琐了。



备忘录:Ajax基础
(1)创建XmlHttpRequest对象

            var xmlHttp ;
            function createXMLHttpRequest()
            {
                
if (window.ActiveXObject)
                {
                    xmlHttp 
=   new  ActiveXObject( " Microsoft.XMLHTTP " ) ;
                }
                
else   if (window.XMLHttpRequest)
                {
                    xmlHttp 
=   new  XMLHttpRequest() ;
                }                
            }


(2)POST Ajax请求

            function startRequest()
            {
               
 createXMLHttpRequest() ;
                xmlHttp.onreadystatechange 
=  handleStateChangeComplex ;
                xmlHttp.open(
" POST "  , " WebForm1.aspx?timeStamp= " +   new  Date().getTime(), true ) ;
                xmlHttp.setRequestHeader(
" CONTENT-TYPE " , " application/x-www-form-urlencoded " ) ;
                xmlHttp.send(
" ID=中国123 " ) ;
            }        

    服务端可以通过QueryString获取xmlHttp.send方法传递的参数。

(3)处理异步结果

            function handleStateChangeComplex()
            {
                
if (xmlHttp.readyState  ==   4 )
                {
                    
if (xmlHttp.status  ==   200 )
                    {
                        document.getElementById(
" results " ).innerText  =  xmlHttp.responseText ;
                    }
                }
            }



备忘录:为何Ajax能如此风行?
    最主要的原因是它能极大提高Web页面的表现力,从而极大地改善最终用户体验。其底层技术就是Ajax拥有异步局部刷新的能力,这个能力源于两点:
(1)任何一个HTML page都是一个树状的DOM文档,而JavaScript能够操纵Dom文档,包括添加、删除、修改任一节点=》局部刷新。
(2)JavaScript可以通过XmlHttpRequest对象与服务器进行通信(GET/POST)。
(3)能异步获取服务端返回的结果。




目录
相关文章
|
6天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
17天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1320 7
|
5天前
|
存储 人工智能 Java
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
本文讲解 Prompt 基本概念与 10 个优化技巧,结合学术分析 AI 应用的需求分析、设计方案,介绍 Spring AI 中 ChatClient 及 Advisors 的使用。
297 129
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
|
4天前
|
监控 JavaScript Java
基于大模型技术的反欺诈知识问答系统
随着互联网与金融科技发展,网络欺诈频发,构建高效反欺诈平台成为迫切需求。本文基于Java、Vue.js、Spring Boot与MySQL技术,设计实现集欺诈识别、宣传教育、用户互动于一体的反欺诈系统,提升公众防范意识,助力企业合规与用户权益保护。
|
16天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1392 87
|
4天前
|
JavaScript Java 大数据
基于JavaWeb的销售管理系统设计系统
本系统基于Java、MySQL、Spring Boot与Vue.js技术,构建高效、可扩展的销售管理平台,实现客户、订单、数据可视化等全流程自动化管理,提升企业运营效率与决策能力。
|
5天前
|
人工智能 Java API
AI 超级智能体全栈项目阶段一:AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式(SDK/HTTP/SpringAI/langchain4j)
本文介绍AI大模型的核心概念、分类及开发者学习路径,重点讲解如何选择与接入大模型。项目基于Spring Boot,使用阿里云灵积模型(Qwen-Plus),对比SDK、HTTP、Spring AI和LangChain4j四种接入方式,助力开发者高效构建AI应用。
283 122
AI 超级智能体全栈项目阶段一:AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式(SDK/HTTP/SpringAI/langchain4j)
|
5天前
|
弹性计算 安全 数据安全/隐私保护
2025年阿里云域名备案流程(新手图文详细流程)
本文图文详解阿里云账号注册、服务器租赁、域名购买及备案全流程,涵盖企业实名认证、信息模板创建、域名备案提交与管局审核等关键步骤,助您快速完成网站上线前的准备工作。
232 82
2025年阿里云域名备案流程(新手图文详细流程)