Ajax页面无刷新

来源：互联网发布：办公软件是什么编辑：程序博客网时间：2024/04/28 09:40

所谓Ajax就是：ActiveX JavaScript And XML，它实际上就是JavaScript，CSS，DOM(Document Object Model)，XmlHttpRequest这四种技术结合的一种新型技术。它的最大特点就是，页面无刷新。
先来看看一个常用的例子，如注册是时候，查看用户名是否存在：
先看看源码：
先建立一个静态页面index.html
<html>
<head>
<title>Ajax页面无刷新</title>
<script language="javascript" type="text/javascript">
function checkName()
{
var name=document.getElementById("txtName").value;
var xmlHttp=new ActiveXObject("MSxml2.XMLHTTP");
xmlHttp.open("GET","CheckUserName.aspx?id="+name,false);
xmlHttp.send();
var s=xmlHttp.responseText;
document.getElementById("spanContent").innerText=s;
}
</script>
</head>
<body>
用户名：<input type="text" id="txtName" name="txtName"/>
<input type="submit" id="btnOk" name="btnOk" value="检测用户名是否存在" onclick="checkName()"/>  &nbsp<span id="spanContent"></span>
</body>
</html>
然后，在建立一个CheckUserName.aspx
<%@Page language="C#"%>
<%
  string name=Request.QueryString["id"];
  if(name=="smz")
  {
   Response.Write( "用户名已经存在");
  }else
  {
   Response.Write("用户名可用");
  }
%>
把这二个文件放到IIS上面就OK了。

看了这些代码，是不是有头大，或许是记不住，嘿嘿，其实这写微软早都给咱想好了，并且写成了一个控件，所以以后用的时候，就不需要在写这些麻烦的JAVASCRIPT的代码了。现在的VS2005还有没有安装，所以需要下载，自己来装，你可以去搜索，ASP.NET 2.0 AJAX Extensions 1.0 安装包，然后找到一个ASPAJAXExtSetup.msi，然后安装就可以了。这样，我们在建立往后咱的时候，就会出现一个ASP NET AJAX-Enabled Web Site这样一个模板。

在我们建立了这样的模板后，每一个界面都会出现一个ScriptManager的控件，它又叫全局脚本控制器。注意：这个在每个界面都得有，而且只能有一个。刚才我们用JAVASCRIPT代码写了一下检查用户名的，先来我们就来用微软提供的控件来实现一下。在这里需要用到一个UpdatePanel这个控件。用起来非常的方便，只需要把文本框，和提交按钮都放到这个panel里面，然后双击按钮，在地下实现查找用户名的功能，就OK了。来看看效果：

在这里还有以其他的AJAX的扩展控件如：
1.According控件，他可以实现菜单的折叠，就像QQ分组那样的。
2.CollapsiblePanel控件，它可以使用按钮，或者图片来控制实现折叠效果。
3.Rating控件，它可以用来实现等级效果。只需要用鼠标在上面移动，就可以轻松的完成评论。不过要设置4个样式，我不是美工耶，头大！~
4.Calendar控件，它是一个日历控件。以后就不用在去套用JS版的日历控件了。很爽，很喜欢。不过说到日历，我就有个问题了。人们都说数据库的常用类型就三个，int，string，datetime，可怎么就觉得datetime不爽啊，做查询的时候，它根本就不是按照时间的先后顺序排列的，我也只能把它做成string类型的，然后给他格式化成20080901这种样子，它才能有规律的显示，如果哪位高手可以熟练的应用datatime，请您给小弟指点一二！~
5.ModalPopup控件，它的好处就是，只可以控制当前显示的Panel，而后面的不可编辑，就像以前winForm的模态窗体。这个我们在登录QQ的有些游戏主页的时候，会经常看到。
6.Tabs控件，它可以实现选项卡的功能。就像在winForm中的TableControl控件是一样的！~