1 例子1 用AJAX实现时钟
<!--
ajax.html
-->
< 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 >
< 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 ()
% >
' clock.asp
Response.Write now ()
% >
2 接收成功后触发事件并显示接收到的字符
<!-- myajax.html -->
<!
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 >
< 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 ()
% >
' clock.asp
Response.Write now ()
% >
3 与2没有太大的区别,只是加了一个HTTP请求状态验证的判断
<!--
myajax2.html
-->
<! 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 >
<! 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 ()
% >
' 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 >
< 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 ()
% >
' 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 >
< 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 ()
% >
' 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 >
< 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 >
< 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 >