Ajax Lesson 4

 1.读取响应首部
    主要Code
   

function doHeadRequest(request,url,handle)
{
 alert("start head");
 requestType=request;
 createHttpRequest();
 xmlhttp.onreadystatechange=handle;
 xmlhttp.open("HEAD",url,true);
 xmlhttp.send(null);
 
}
function defaultHeadStateHandleFunction()
{
 if(xmlhttp.readystate==4)
 {
  if(requestType=="allResponseHeaders")
  {
   getAllResponseHeader();
  }else if(requestType=="lastModified")
  {
   getLastModified();
  }else if(requestType=="isResourceAvailable")
  {
   getIsResourceAvailable();
  }
  
 } 
}

function defaultHandleFunction()
{
 if(xmlhttp.readystate==4)
 if(xmlhttp.status ==200)
 {
   doResponsed(); //Need Define yourselef.
 } 
}

function getAllResponseHeader(){
 alert(xmlhttp.getAllResponseHeaders()); 
}

function getLastModified(){
 alert("Last Modified:"+xmlhttp.getResponseHeader("Last-Modified")); 
}
function getIsResourceAvailable()
{
 if(xmlhttp.status==200)
 {
  alert("Successful response");
 }else
  if(xmlhttp.status==404)
 {
  alert("Resource is Unavailable");
 }else  
 {
  alert("UnExpected Response status:"+xmlhttp.status);
 }
}

Read.html 内容

http://www.w3.org/TR/html4/loose.dtd">

<script type="text/javascript" src="AjaxBase.js"></script>

 

Reading Response Headers

  Read All Response headers
 

  Read Last Modify
 

  Read Available Resource
 

   Read Available Resource
 

注: 页面调用使用javascript:functionName ,javaScript 区分大小写.所以写的时候一定要注意.否则会出现对象无效错误.

 

2.动态刷新页面.

Dynai..html

http://www.w3.org/TR/html4/loose.dtd">





<script type="text/javascript" src="AjaxBase.js"></script>
<script type="text/javascript">
 function doStart()
 {
  createHttpRequest();
  var url="DynamicUpdateServlet?task=reset";
  xmlhttp.open("GET",url,true);
  xmlhttp.onreadystatechange=startCallBack;
  xmlhttp.send(null); 
 }
 function startCallBack()
 {
  if(xmlhttp.readystate==4)
   if(xmlhttp.status ==200)
   {
   setTimeout("pollServer()",5000);
   refreshTime();
   }
 }
 
 function pollServer()
 {
  createHttpRequest();
  var url="DynamicUpdateServlet?task=foo";
  xmlhttp.open("GET",url,true);
  xmlhttp.onreadystatechange=pollCallback;
  xmlhttp.send(null);
 }
 
 function refreshTime()
 {
  var time_span=document.getElementById("time");
  var time_val=time_span.innerHTML;
  var int_val=parseInt(time_val);
  var new_int_val=int_val-1;
  
  if(new_int_val>-1)
  {
   setTimeout("refreshTime()",1000);
   time_span.innerHTML=new_int_val;
  }else
  {
   time_span.innerHTML=5;
  }
 }
 
 function pollCallback()
 {
  if(xmlhttp.readystate==4)
   if(xmlhttp.status ==200)
   {
     var message=xmlhttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
   
   if(message!="done")
   {
    var new_row=createRow(message);
    var table=document.getElementById("dynamicUpdateArea");
    var table_body=table.getElementsByTagName("tbody").item(0);
    var first_row=table_body.getElementsByTagName("tr").item(0);
    
    table_body.insertBefore(new_row,first_row);
    setTimeout("pollServer()",5000);
    refreshTime();
   }
   
   }  
 }
 
 function createRow(message)
 {
  var row=document.createElement("tr");
  var cell=document.createElement("td");
  var cell_data=document.createTextNode(message);
  cell.appendChild(cell_data);
  row.appendChild(cell);
  return row;
 }
</script>

Ajax Dynamic Update Example

This page will automaticlly update itself:

 Page Will Refresh in 5 Seconds..

      

 

注.1.主要代码.SetTimeOut(function,timegap)可以固定timegap时间调用function执行.

2.需要服务器端响应.