几个可运行的,可以说明问题的Ajax实例

来源：互联网发布：餐饮业成本核算软件编辑：程序博客网时间：2024/05/09 20:34

1 例子1 用AJAX实现时钟

<html>
<head>
<script language="javascript">
function getClock()
{
var XmlHttp = new ActiveXObject("Msxml2.XMLHTTP")
XmlHttp.Open( "POST","clock.asp", false );
XmlHttp.Send();
   if (XmlHttp.status == 200) document.getElementById("time_area").innerHTML = XmlHttp.responseText;
  window.setTimeout("getClock()","1000")
}
</script>
</head>
<body  ><SPAN id=time_area></SPAN>
<script language="javascript">
getClock();
</script>
</body>
</html>

<%
'clock.asp
Response.Write now()
%>

2 接收成功后触发事件并显示接收到的字符

<%
'clock.asp
Response.Write now()
%>

3 与2没有太大的区别,只是加了一个HTTP请求状态验证的判断

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax</title>
<script language="javascript">

function showsth()
{
    if( xmlHttp.readyState == 4 && xmlHttp.status == 200 ){
        alert("hehe ,my girl,it's ready 4.the response text is: " + xmlHttp.responseText);
    }
}

var xmlHttp = false;
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

var url = "clock.asp";
xmlHttp.open("GET", url , true);
xmlHttp.onreadystatechange = showsth;
xmlHttp.send(null);

</script>
</head>

<body>
</body>
</html>

<%
'clock.asp
Response.Write now()
%>

4 用于理解readyState的例子

<%
'clock.asp
Response.Write now()
%>

5 只读取HTTP协议的HEAD,并显示HEAD

您会发现 HEAD 请求非常有用的一个领域是用来查看内容的长度或内容的类型。这样可以确定是否需要发回大量数据来处理请求，和服务器是否试图返回二进制数据，而不是 HTML、文本或 XML（在 JavaScript 中，这 3 种类型的数据都比二进制数据更容易处理）。

<%
'clock.asp
Response.Write now()
%>

6 DOM的使用

修改元素的属性

7 DOM结构操作

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
</head>
<body>
<a>link</a>
<br />
<p>
passage</p>
<p><a name="N10117" id="N10117">节点的属性</a></p>
<p>使用 DOM 节点时需要一些属性和方法，因此我们首先来讨论节点的属性和方法。DOM 节点的属性主要有：</p>
<ul>
  <li>nodeName 报告节点的名称（详见下述）。 </li>
  <li>nodeValue 提供节点的 “值”（详见后述）。 </li>
  <li>parentNode 返回节点的父节点。记住，每个元素、属性和文本都有一个父节点。 </li>
  <li>childNodes 是节点的孩子节点列表。对于 HTML，该列表仅对元素有意义，文本节点和属性节点都没有孩子。 </li>
  <li>firstChild 仅仅是 childNodes 列表中第一个节点的快捷方式。 </li>
  <li>lastChild 是另一种快捷方式，表示 childNodes 列表中的最后一个节点。 </li>
  <li>previousSibling 返回当前节点<em>之前</em> 的节点。换句话说，它返回当前节点的父节点的   childNodes 列表中位于该节点前面的那个节点（如果感到迷惑，重新读前面一句）。 </li>
  <li>nextSibling 类似于 previousSibling 属性，返回父节点的   childNodes 列表中的下一个节点。 </li>
  <li>attributes 仅用于元素节点，返回元素的属性列表。 </li>
</ul>
<p>其他少数几种属性实际上仅用于更一般的 XML 文档，在处理基于 HTML 的网页时没有多少用处。</p>

</body>
</html>
<script language="javascript">
var htmlDocument = document.documentElement;
alert(htmlDocument.nodeName);
var headElement = htmlDocument.getElementsByTagName("head")[0];
alert(headElement.nodeName);
var titleElement = headElement.getElementsByTagName("title")[0];
alert(titleElement.nodeName);
//var titleText = titleElement.firstChild;
//alert(titleText.nodeValue );
var bodyElement = headElement.nextSibling;
alert(bodyElement.nodeName);

var i = 0;
while( bodyElement.childNodes[i] != null ){
    var cElement = bodyElement.childNodes[i];
    alert(cElement.nodeName);
    ++i;
}

</script>