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

墨衍会员 · AI 创作全网分发码龄21年

关注

原创最新推荐文章于 2025-07-29 12:52:17 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

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 接收成功后触发事件并显示接收到的字符

<!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 ){
        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()
%>

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的例子

<!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()
{
alert("hehe ,my girl, readyState=" + xmlHttp.readyState);

}

var xmlHttp = false;
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
alert(xmlHttp.readyState);
var url = "clock.asp";
xmlHttp.open("GET", url , true);
alert(xmlHttp.readyState);
xmlHttp.onreadystatechange = showsth;
xmlHttp.send(null);
alert(xmlHttp.readyState);
</script>
</head>

<body>
</body>
</html>

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

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

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

<!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 Head</title>
<script language="javascript" type="text/javascript">
function showsth()
{
if( xmlHttp.readyState == 4 )
alert("hehe ,my girl.I just catch the http head and I am showing to u: " + xmlHttp.getAllResponseHeaders());
}

var xmlHttp = false;
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
var url = "clock.asp";
xmlHttp.open("HEAD", url , true);
xmlHttp.onreadystatechange = showsth;
xmlHttp.send(null);
</script>
</head>

<body>
</body>
</html>

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

6 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>AjaxDOM</title>
<script language="javascript">
function ShowGoogle()
{
    alert("ShowGoogle");
    var picObj = document.getElementById("picId");
    picObj.setAttribute("src","http://www.google.cn/intl/zh-CN/images/logo_cn.gif");

    var button = document.getElementById("mybutton");
    button.setAttribute("value","ShowBaidu");
    button.onclick = ShowBaidu;
}
function ShowBaidu()
{
    alert("ShowBaidu");
    var picObj = document.getElementById("picId");
    picObj.setAttribute("src","http://www.baidu.com/img/logo.gif");
    var button = document.getElementById("mybutton");
    button.setAttribute("value","ShowGoogle");
    button.onclick = ShowGoogle;

}
</script>
</head>

<body>
<form name="myform">
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" id="picId" />
<input type="button" name="mybutton" id="mybutton" value="ShowBaidu" onclick="ShowBaidu()"/>
</form>
</body>
</html>

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>

标签

#ajax #javascript #html #function #url

本内容遵循 CC 4.0 BY-SA 版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

深入理解Ajax技术的应用实例本文还有配套的精品资源，点击获取简介：Ajax技术使得网页可以在不刷新的情况下异步更新，极大提升了用户体验。本文通过深入分析一个具体的实例，详细说明了如何使用Ajax进行异步HTTP请求和响应处理，以及在***环境中如何实现Ajax。文章还介绍了一些关键文件的结构、作用以及最佳实践，涵盖从文件解析到用户体验优化的全过程。 1. Ajax技术概述在当今的W... 阅读详情

0

manio

博客等级

码龄21年 61粉丝 151原创

+ 关注

评论

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。