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

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 >

 

< %
' 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 >

 

< %
' 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 >

 

< %
' 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 >