使用AjaxPro实现ajax效果

简介:
本篇将使用AjaxPro.Net框架实现同样的功能:在客户端异步获取服务端时间!AjaxPro.Net是一个优秀的.net环境下的ajax框架,用法很简单,可以查阅相关资料,简单说有几点:
1)添加AjaxPro.dll应用;
2)配置web.config;
3)写服务端方法,加[AjaxPro.AjaxMethod]申明;
4)客户端调用服务端方法;(ajaxpro最大的优点:客户端js中直接调用服务端方法)
客户端代码:
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
    
< title > AjaxPro onLoading </ title >
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
        
< div  id ="loadinfo"  style ="visibility:hidden;position:absolute;left:0px;top:0px;background-color:Red;color:White;" > Loading </ div >
   
        
< input  id ="Button1"  type ="button"  value ="Get ServerTime"  onclick  ="javascript:GetTime();void(0)"   />

        
< script  type ="text/javascript"  defer ="defer" > ...
        
        
// loading效果
        AjaxPro.onLoading = function(b) 
        
...{
            
var a = document.getElementById("loadinfo");
            a.style.visibility 
= b ? "visible" : "hidden";
        }


        
function GetTime() 
        
...{
            
// 调用服务端方法
            //调用方法:类名.方法名 (参数为指定一个回调函数)
            myLoad.GetServerTime(callback);
        }


        
function callback(res)  //回调函数,显示结果
        ...{
            alert(res.value);
        }

        
</ script >
    
</ form >
</ body >
</ html >
注: javascript代码放在form内结束处,确保可以访问AjaxPro对象,否则提示AjaxPro未定义;因为在服务端page_load输出 js到页面后才到找到AjaxPro对象;且javascript的defer="defer",页面加载时先不执行此代码。
服务端代码:
public partial class myLoad : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(myLoad)); //注册ajaxPro,括号中的参数是当前的类名
    }

    [AjaxPro.AjaxMethod] //申明是ajaxPro方法
    public string GetServerTime()
    {
        System.Threading.Thread.Sleep(2000);
        return DateTime.Now.ToString();
    }
}
 
目录
相关文章
|
XML JSON JavaScript
原生AJAX实现异步请求
原生AJAX实现异步请求
117 0
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
243 0
【jquery ajax】实现文件上传提交
|
JavaScript 搜索推荐 API
JQuery+ajax实现类似百度搜索自动匹配功能
JQuery+ajax实现类似百度搜索自动匹配功能
328 0
JQuery+ajax实现类似百度搜索自动匹配功能
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
389 0
Ajax实现动态及时刷新表格数据
|
前端开发
layui结合ajax实现下拉联动效果
layui结合ajax实现下拉联动效果
428 0
layui结合ajax实现下拉联动效果
|
前端开发
layui结合ajax实现下拉菜单联动效果
layui结合ajax实现下拉菜单联动效果
290 0
layui结合ajax实现下拉菜单联动效果
|
前端开发 安全 JavaScript
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
174 0
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
|
前端开发 JavaScript Java
使用 ServletApi 实现 ajax | 学习笔记
快速学习使用 ServletApi 实现 ajax,介绍了使用 ServletApi 实现 ajax 系统机制, 以及在实际应用过程中如何使用。
70 0
使用 ServletApi 实现 ajax | 学习笔记
|
文字识别 前端开发 JavaScript
spring boot +ajax上传文件前后端分离完整实现示例代码
spring boot +ajax上传文件前后端分离完整实现示例代码
spring boot +ajax上传文件前后端分离完整实现示例代码
|
前端开发
$.ajax()的实现方式
$.ajax()的实现方式
92 0