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

来源:互联网 发布:ipad看电影用什么软件 编辑:程序博客网 时间:2024/03/29 03:04
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)
    
{
        
    }

  }

当客户端向服务器发出查找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;
        quickGuide.GetEmail(name,GetEmail_callback);
    }

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

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

简单的例子便做好了。