Ajax入门讲座即将开始 首先，请大家先下载一份CMS。 今天的讲座，讲围绕这个文件展开，请大家准备。 借用别人对Ajax的解释： AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它使用： * 使用XHTML+CSS来表示信息； 以前我们做的网页，大多数都是使用超链接来转到另一个页面去。在点击超链接以后，浏览器就会慢慢打开另一个页面，这是一个同步打开的过程，在“同步”的时候，我们就得等…… 相对于同步来说，另一个就是异步了。所谓异步，比如，你正在看球赛，然后让你儿子去帮你买酒，你继续看，你儿子去买酒，就是一个异步的过程，如果是你去买，就是同步，因而，“同步”的话，你就看不到球赛了，得等你完成任务（买酒）才能继续看球赛。对于“同步”“异步”这两个专业术语，大家应该理解了吧。 Ajax中的两个A，就是异步的意思Asynchronous。 使用Ajax的异步功能后，如果我们做一个操作，比如点击一个按钮，让页面中间的股票数据更新为最新的，而浏览者继续浏览该页面别的地方。点击按钮，更新数据，这个操作，就相当于你叫你儿子去帮你买酒啦，而你需要继续看球赛（浏览该页面别的地方）。如果使用传统的超链接，那么，在新页面打开之前，你是不能浏览页面原有信息的。当作，这只是我举的一个例子罢了，Ajax的实际功能，要远远比这强大得多。 总的来说，你可以把Ajax理解成：在后台去服务器请求数据信息 大家请看Ajax实例http://www.nnhy.org/Ajax.asp 打开该页面时看到asp页面执行时的服务器时间。 这是这个文件的源码：
以下是代码片段： <head> <body> <p>ASP执行时，服务器的时间：<%=Now()%><p>现在服务器的时间是：<div id="ServerTime"><%=Now()%></div> </body> </html> <script language="javascript">
使用DW、UE、记事本等编辑器打开/CMS/Gen/UserClass/Class_News.asp文件。
* 使用JavaScript操作DOM（Document Object Model）进行动态显示及交互；
* 使用 XML 和 XSLT 进行数据交换及相关操作；
* 使用 XMLHttpRequest对象与Web服务器进行异步数据交换；
* 使用 JavaScript 将所有的东西绑定在一起。
j就是javascript
x就是xml
请点击“更新时间”按钮看看效果
<%
if Request("Act")="Ajax" then
response.write Now()
response.end
end if
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>
<form method="post">
<input name="Button1" type="button" value="更新时间" onclick="UpdateTime();"></form>
</p>
function UpdateTime()
{
var xh = new ActiveXObject("Msxml2.XMLHTTP");
xh.onreadystatechange = function(){
if(4 == xh.readyState){
document.getElementById("ServerTime").innerHTML = "<font color=red>" + xh.responseText + "</font>";
//alert("已更新");
setTimeout(UpdateTime, 1000);
}
}
xh.open("GET", "Ajax.asp?Act=Ajax&randnum=" + Math.random(), true);
xh.send();
}
</script>
大家从源码可以看到，一开始的时候，两个时间都是服务器的当前时间，几乎是一样的，点击更新时间的按钮后第二个时间会变成红色的，并且和第一个时间不一样，表明：Ajax的确去取了一次服务器时间，但是页面没有更新，因为第一个时间并没有改变
下面开始通过讲解这个例子来讲一下如何实现Ajax
| 以下是代码片段： <% if Request("Act")="Ajax" then response.write Now() response.end end if %> |
一开始这个，就是ASP代码，如果请求字符串中有Act=Ajax，那么，输出服务器当前时间，end终止页面；如果没有Act=Ajax那么输出下面的HTML和js
| 以下是代码片段： <p>ASP执行时，服务器的时间：<%=Now()%><p>现在服务器的时间是：<div id="ServerTime"><%=Now()%></div> <form method="post"> <input name="Button1" type="button" value="更新时间" onclick="UpdateTime();"></form> </p> |
这里有两个<%=Now()%>，这两个地方都会输出服务器时间，所以，一开始打开页面的时候，这两个时间是一样的
| 以下是代码片段： <script language="javascript"> function UpdateTime() { var xh = new ActiveXObject("Msxml2.XMLHTTP"); xh.onreadystatechange = function(){ if(4 == xh.readyState){ document.getElementById("ServerTime").innerHTML = "<font color=red>" + xh.responseText + "</font>"; //alert("已更新"); setTimeout(UpdateTime, 1000); } } xh.open("GET", "Ajax.asp?Act=Ajax&randnum=" + Math.random(), true); xh.send(); } </script> |
下面开始讲这个js脚本
这个脚本只有一个UpdateTime方法，从上面的HTML中可以看到，当点击“更新时间”这个按钮的时候，会触发这个事件（执行这个方法）
首先
var xh = new ActiveXObject("Msxml2.XMLHTTP");
创建一个XMLHTTP对象，我这里用的Msxml2.XMLHTTP只支持IE，另外的还有Microsoft.XMLHTTP和new XMLHttpRequest()，不同浏览器要使用不同的对象来创建xmlhttp对象
xh.onreadystatechange事件在xh对象的状态改变后触发，这个不用知道太多，只需要知道，当xh.readyState等于4时，就表示这个请求已经完成。我这里让这个事件等于一个匿名函数：
以下是代码片段：
function(){
if(4 == xh.readyState){
document.getElementById("ServerTime").innerHTML = "<font color=red>" + xh.responseText + "</font>";
//alert("已更新");
setTimeout(UpdateTime, 1000);
}
匿名函数是没有函数名的，一创建就使用。
整体的意思就是，当xh的状态每改变一次，都会执行一次这个匿名函数，在匿名函数中判断xh.readyState是否等于4,如果是，那么表明请求完成，就开始做我们要做的事情，如果不是，就不管它，不做任何事情
document.getElementById("ServerTime").innerHTML = "<font color=red>" + xh.responseText + "</font>";
这一句，用到了js、html、dom
document.getElementById("ServerTime")就是取得名为ServerTime的html标记，就是上面html中的那个层啦，innerHTML 属性表示它的内部html；xh.responseText是这次请求中服务器返回的字符串数据。可以看到，下面请求的是Ajax.asp?Act=Ajax，就是本文件，一开始的ASP检测到Act=Ajax，那么，就返回服务器时间，然后结束请求，所以，这里的xh.responseText得到的，实际上就是服务器的时间，把这个字符串作为html放进ServerTime层的innerHTML中，ServerTime层所显示的内容因此就改变了
xh.open("GET", "Ajax.asp?Act=Ajax&randnum=" + Math.random(), true);
第一个参数表示采用GET来请求，此外还有POST，要传大数据的时候才用POST，第二个参数就是要请求的页面以及参数啦，我这里加上一个随机数，是为了避免浏览器的缓存，第三个参数true表示采用异步，false表示采用同步。
下一行的xh.send();就是开始发送请求啦。到这里，你儿子已经去帮你买酒了，你可以继续看你的球赛了，呵呵。
好了，今天的Ajax入门讲座就到此结束，谢谢大家，有不明白的，欢迎到我网站上问，群里问也可以
演示：http://www.nnhy.org/Ajax.asp
下载：http://www.nnhy.org/Ajax.rar