ajax入门——一些理解及例子

1.ajax,是 Asynchronous JavaScript and XML 的简写,即异步JavaScript 和XML,是一种综合使用javascript、dom、Xml、CSS等技术实现异步传输数据的技术。
2.使用ajax技术,在界面上可以做到不刷新页面实现与后台交互,更重要的是“异步”,减轻了服务器负担,减少了客户的等待时间。
3.ajax,可以理解为一种多线程技术。
4.当传输的数据量不大,并且不考虑xml统一项目接口时,可以不必返回xml。

下面看一个例子(.net):
要实现的效果:在DropDownList里选中某个人名,后台根据选项到数据库里查找该人的Email,然后在TextBox里显示出来。
www.schwarz-interactive.de下载最Ajax文件。
添加引用AjaxPro.2.dll (.net 2.0)。
在web.config中加入几行:
<? xml version="1.0" encoding="utf-8"  ?>
< configuration >
  
< system .web >
    
< httpHandlers >
      
< add  verb ="POST,GET"  path ="ajaxpro/*.ashx"  type ="AjaxPro.AjaxHandlerFactory, AjaxPro.2" />
    
</ httpHandlers >

  []

  
</ system.web >
</ configuration >
在.net代码中注册ajax方法:
   public   class  _Default
  
{
    
protected void Page_Load(object sender, EventArgs e)
    
{
      AjaxPro.Utility.RegisterTypeForAjax(
typeof(_Default));
    }


    [AjaxPro.AjaxMethod]
    
public string GetEmail(string name)
    
{
        
    }

  }

这里注意typeof(_Default)与上面的class _Default类名一致。
当客户端向服务器发出查找Email请求时,这里用public string GetEmail(string name)方法回应,用name去查找返回结果Email。(这里省略其过程代码)
注意如果有多个Ajax方法,必须在每个方法前面都加上一句[AjaxPro.AjaxMethod]。

服务器端这完成了,下面看客户端。
在脚本里写两个function,如下:
< script language = " javascript "  type = " text/javascript " >   
    
function  GetEmail()
    
{
        
var name= document.getElementById("DropDownList1").value;
        _Default.GetEmail(name,GetEmail_callback);
    }

    
function  GetEmail_callback(res)
    
{
        document.getElementById(
"email").value=res.value;
    }

</ script >
第一个函数即是触发事件时调用的函数,意思是:先得到Id为"DropDownList1"的元素的值,然后调用类_Default里注册的ajax方法GetEmail(),name是public string GetEmail(string name)所需要的参数,而GetEmail_callback则是客户端回调的方法——服务器端得到结果时通过这个方法将结果返回到客户端。第二个函数GetEmail_callback(res)即是:当服务器端得到结果调用此函数时,将Id为"email"的元素的值设为返回结果res的值。
注意:
1.假如GetEmail()没有参数时,在括号里面就只写回调函数:_Default.GetEmail(GetEmail_callback);
2.回调函数不必是"原函数_callback"的格式写,这样写只是为了便于区分。

最后使用,在DropDownLost1里写上个onchange事件,调用GetEmail()函数。
     < asp:DropDownList  ID ="DropDownList1"  runat ="server"  onchange ="GetEmail()" ></ asp:DropDownList >
    
< asp:TextBox  ID ="email"  runat ="server" ></ asp:TextBox >
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值