几个可运行的,可以说明问题的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 >< 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 >

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值