AJAX实例学习手记

作者：feifengxlq
Email:[email protected]
日期：2006-2-27
参考：
Using the XML HTTP Request object
  ，xmlhttp手册
1、由于不同的浏览器对XMLHTTP的支持的不同，所以在创建新的 XMLHttpRequest 对象的时候，需要对浏览器进行判定。
  xmlhttp.js的代码：
CODE:
[Copy to clipboard]
var xmlhttp
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
  try {
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp=false;
  }
}
@else
xmlhttp=false
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        try {
                xmlhttp = new XMLHttpRequest();
        } catch (e) {
                xmlhttp=false;
        }
}
if (!xmlhttp && window.createRequest) {
        try {
                xmlhttp = window.createRequest();
        } catch (e) {
                xmlhttp=false;
        }
}2、使用XMLHTTP发送各种reuqest
    包括GET,POST,HEADER等等，xmlhttp发送request的原理，详见前面我转贴的文章http://www.phpchina.cn/bbs/viewthread.php?tid=2727&extra=page%3D1
  test.html代码：
CODE:
[Copy to clipboard]
function RSchange() {
if (xmlhttp.readyState==4) {
  document.getElementById('content').innerHTML=xmlhttp.responseText
}
}
function go() {
if (xmlhttp) {
  d=document
  xmlhttp.open("GET", "test.txt",true);
  xmlhttp.onreadystatechange=RSchange
  xmlhttp.send(null)
}
}
function headgo()
{
  if(xmlhttp){
    xmlhttp.open("HEAD",'test.html',true);
        xmlhttp.onreadystatechange=function(){
           if(xmlhttp.readyState==4)
           {
              alert(xmlhttp.getallResponseHeaders())
           }
        }
        xmlhttp.send(null)
  }
}
function testurl()
{
  if(xmlhttp){
    xmlhttp.open("HEAD",document.getElementById('url').value,true);
        xmlhttp.onreadystatechange=function(){
          if(xmlhttp.readyState==4)
          {
            if(xmlhttp.status==200) document.getElementById('content3').innerHTML='Url Exist';
                else if(xmlhttp.status==404) document.getElementById('content3').innerHTML='this url does not Exist';
                else document.getElementById('content3').innerHTML='the return xmlhttp.status:'+xmlhttp.status;
          }
        }
        xmlhttp.send(null)
  }
}
The content will appear between here
  and here.Do it
Header test!
header test
Does a url exist?

test a url3、AJAX与php的简单交互实例
test.php
CODE:
[Copy to clipboard]
'')
{
  echo $total;
}else{
?>
function calc() {
  frm=document.forms[0]
  url="test.php?a="+frm.elements['a'].value+"&b="+frm.elements['b'].value
  xmlhttp.open("GET",url,true);
  xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4) {
    document.forms[0].elements['total'].value=xmlhttp.responseText
   }
  }
xmlhttp.send(null)
return false
}
"> + "> = ">
先写到这里，以后继续～^_^
----------------------------------------
AJAX实例二
实现数据无刷新的写入文本文件
主文件xmlhttp.html
CODE:
[Copy to clipboard]
xmlhttp
function initxmlhttp()
{
  var xmlhttp
  try {
    xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
     try {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     } catch (E) {
        xmlhttp=false;
     }
  }
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        try {
                xmlhttp = new XMLHttpRequest();
        } catch (e) {
                xmlhttp=false;
        }
}
if (!xmlhttp && window.createRequest) {
        try {
                xmlhttp = window.createRequest();
        } catch (e) {
                xmlhttp=false;
        }
}
  return xmlhttp;
}
function readcontent()
{  
  var xmlhttp=initxmlhttp();
  var showcontent=document.getElementById("showcontent");
  var url="readfile.php";
  xmlhttp.open("GET",url,true);
  xmlhttp.setRequestHeader("Cache-Control","no-cache");
  xmlhttp.onreadystatechange=function(){
     if(xmlhttp.readyState==4 && xmlhttp.status==200)
         {
            showcontent.innerHTML=xmlhttp.responseText;
         }
  }
  xmlhttp.send(null);
}
function writecontent()
{
  var xmlhttp=initxmlhttp();
  var content=document.forms[0].content.value;
  var showcontent=document.getElementById("showcontent");
  var url="writefile.php";
  var poststr="content="+content;
  
  xmlhttp.open("POST",url,true);
  xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  xmlhttp.send(poststr);
  
  xmlhttp.onreadyStatechange=function(){
     if(xmlhttp.readyState==4 && xmlhttp.status==200)
         {
            showcontent.innerHTML=xmlhttp.responseText;
         }
  }
}
AJAX的测试
  
  
  
  
   
readfile.php
CODE:
[Copy to clipboard]
writefile.php
CODE:
[Copy to clipboard]
test.txt
CODE:
[Copy to clipboard]
this is a ajax example in test.txt所有代码在win xp+php5.1 + apache 2.054 下通过测试