AJAX技術介紹
一、使用Ajax的主要原因
1、通过适当的Ajax应用达到更好的用户体验, 无刷新更新页面，减少用户实际和心理等待时间；
2、把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担，从而达到节约ISP的空间及带宽租用成本的目的。
二、技術簡介
Ajax这个概念的最早提出者Jesse James Garrett认为：
Ajax是Asynchronous JavaScript and XML的缩写。
Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括
使用XHTML和CSS标准化呈现;
使用DOM实现动态显示和交互;
使用XML和XSLT进行数据交换与处理;
使用XMLHttpRequest进行异步数据读取;
最后用JavaScript绑定和处理所有数据;
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
利用XMLHTTP实现的二级连动Select
传统二级连动是把所有的数据都传到有客户端..利用XMLHTTP.我们可以实时地返回我们所需要的数据.
select.htm
<script language="JavaScript">
function GetResult(str){
/*--------------- GetResult(str) -----------------
* 功能:通过XMLHTTP发送请求,返回结果.
* 实例:GetResult(document.all.userid.value);
*--------------- GetResult(str) ----------------- */
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
oBao.open("POST","Server.asp?sel="+str,false);
oBao.send();
//服务器端处理返回的是经过escape编码的字符串.
//通过XMLHTTP返回数据,开始构建Select.
BuildSel(unescape(oBao.responseText),document.all.sel2)
}
function BuildSel(str,sel){
/*--------------- BuildSel(str,sel) -----------------
* 功能:通过str构建Select.
* 参数:str,字符串,由服务端返回的.有特定结构"字符串1,字符串2,字符串3"
* 参数:sel,要构建的Select
* 实例:BuildSel(unescape(oBao.responseText),document.all.sel2)
*--------------- BuildSel(str,sel) ----------------- */
//先清空原来的数据.
sel.options.length=0;
var arrstr = new Array();
arrstr = str.split(",");
//开始构建新的Select.
for(var i=0;i<arrstr.length;i++) {
sel.options[sel.options.length]=new Option(arrstr[i],arrstr[i])
}
}
</script>
<select name="sel" onChange="GetResult(this.value)">
<option value="">请选择
<option value="福建省">福建省
<option value="湖北省">湖北省
<option value="辽宁省">辽宁省
<select>
<select name="sel2"></select>
server.asp 服务器端处理.
<% @Language="JavaScript" %>
<%
function OpenDB(sdbname){
/* *--------------- OpenDB(sdbname) -----------------
* 功能:打开数据库sdbname,返回conn对象.
* 参数:sdbname,字符串,数据库名称.
* 实例:var conn = OpenDB("database.mdb");
*--------------- OpenDB(sdbname) ----------------- */
var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
var conn = Server.CreateObject("ADODB.Connection");
conn.Open(connstr);
return conn;
}
var oConn = OpenDB("data.mdb");
var province = Request("sel");
var arrResult = new Array();
var sql = "select city from china where province='"+province+"'";
var rs = Server.CreateObject("ADODB.Recordset");
rs.Open(sql,oConn,1,1);
while(!rs.EOF){
//遍历所有适合的数据放入arrResult数组中.
arrResult[arrResult.length] = rs("city").Value;
rs.MoveNext();
}
//escape解决了XMLHTTP。中文处理的问题.数组组合成字符串.由","字符串连接.
Response.Write(escape(arrResult.join(",")));
%>
数据库设计data.mdb
表china.
字段
id 自动编号
province 文本
city 文本
表:china 数据:
id province city
1 福建省 福州市
2 福建省 厦门市
3 福建省 泉州市
4 湖北省 武汉市
5 湖北省 荆州市
6 湖北省 宜昌市
7 辽宁省 沈阳市
8 辽宁省 大连市
9 辽宁省 盘锦市
三. Ajax.Net的具體使用方法
下载 http://ajax.schwarz-interactive.de/download/
例子是 http://ajax.schwarz-interactive.de/download/ajaxsample.zip
安装 将那个ajax.dll扔到bin下，并引用他
1. 在你的webconfig中增加
<configuration>
<system.web>
<httpHandlers>
<add verb="POST,GET" path="
</httpHandlers>
...
<system.web>
</configuration>
就好了
2. 使用 在使用它的页面 的onload事件中增加如下代码
private void Page_Load(object sender, EventArgs e){
Ajax.Utility.RegisterTypeForAjax(typeof(Index));
//
}
3. 然后 在另外的[就是你需要利用它返回结果的Class中写下如下函数]
[Ajax.AjaxMethod()]
public int ServerSideAdd(int firstNumber, int secondNumber) {
return firstNumber + secondNumber;
}
4.这样将来 系统就会自己建立一个叫 ServerSideAdd的javascript函数
在你的页面中用javascript来访问 ：
var s=ServerSideAdd(10,10).value;
alert(s.value);