ajax简介(转载)

1、AJAX之所以存在，主要原因在于AJAX具有在页面内于服务器进行通信的能力

2、ajax技术可以理解为局部异步请求响应

3、例子如下：

 

AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示

常见的用户注册是用户输入用户名，后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示（当用户注册重名时将返回重新注册），或者稍微人性化一点就是在用户名文本框后添加一个检测按钮，让用户检测后再做注册。

以上操作，对于用户体验方面来说是比较“差劲”的，一个很好的用户体验就是：当用户输入完注册用户名后，Web系统应能即时检查并即时显示，并在检查和显示的同时不影响当前页面的操作。这也就是“异步获取数据”的要求，而这正是AJAX的强项

比如如下的示例就能展现AJAX的该功能：

http://www.cnbruce.com/test/ajax/t1.htm

当输入已经存在的用户名（如cnbruce、cnrose）时页面将显示重名不能注册（false），否则将显示可以注册（true），这为用户的注册提供了快速的参考，用户体验至上。

那么下面就来说说是如何来实现这样的功能的。

其实通过如上的t1.htm的源代码，各位就可以看到AJAX的精髓

首先是定义XMLHttp对象

var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}

 

关于这部分内容的说明请看：
http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=987

接着是自定义函数

function callServer() {
var u_name = document.getElementById("u_name").value;
if ((u_name == null) || (u_name == "")) return;
var url = "cu.asp?name=" + escape(u_name);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send(null);
}

 

该函数的主要功能就是异步获得cu.asp（http://www.cnbruce.com/test/ajax/cu.asp?name=cnbruce）的内容，在此前将先提取当前页表单元素“u_name”即用户名文本框zhogn 的值，通过cu.asp其后的参数及赋值而得到了不同的结果（true or false）。

那么这里要说的即是cu.asp，他的主要功能就是接受URL参数name的值做内容显示，该内容最终被t1.htm异步获取。

 

<!--cu.asp的源码示例-->

<!--#include file="conn.asp"-->
<%
name=request.querystring("name")
Set rs = Server.CreateObject ("ADODB.Recordset")
sql = "Select * from u_ser where u_name='"&name&"'"
rs.Open sql,conn,1,1
if rs.eof and rs.bof then
    response.write("true")
else
    response.write("false")
end if
rs.close
set rs=nothing
call CloseDatabase
%>

 

如何将异步获取的信息显示在当前页呢

function updatePage() {
if (xmlHttp.readyState < 4) {
    test1.innerHTML="loading...";
}
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
    test1.innerHTML=response;
}
}

 

其中xmlHttp.readyState中的readyState表示服务器在处理请求时的进展状况，其值分别有0-4，各有其说明情况，具体请参看：

http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=718

使用DHTML中的innerHTML可显示信息在定义的 <span id="test1">是否能注册</span> 上。

其余表单页面就不详叙了

打包文件下载(右键选择另存为，下载后修改文件后缀名为rar，解压打开)：

http://www.cnbruce.com/test/ajax/ajax.htm

 

4 源码

<script language="javascript" type="text/javascript">
var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}
 
function callServer() {
  var u_name = document.getElementById("u_name").value;
  if ((u_name == null) || (u_name == "")) return;
  var url = "cu.asp?name=" + escape(u_name);
  xmlHttp.open("GET", url, true);
  xmlHttp.onreadystatechange = updatePage;
  xmlHttp.send(null);  
}
function updatePage() {
  if (xmlHttp.readyState < 4) {
test1.innerHTML="正在检测";
  }
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
test1.innerHTML=response;
  }
  if (test1.innerHTML=="已被注册"){
document.form1.submit.disabled=true}else{
document.form1.submit.disabled=false
  }
}
</script>

<form name="form1" action="t1.asp" method="post" autocomplete="off">
用户名: <input type="text" name="u_name" id="u_name" onChange="callServer();" />
 <span id="test1">是否能注册</span><br>
密 码：<input type="password" />
 <input type="submit" name="submit" value="注册" />
</form>