站长论坛

标题: AJAX实例学习手记 [打印本页]

作者: tznktg 时间: 2007-9-19 21:48
标题: AJAX实例学习手记
参考：Using the XML HTTP Request object  ，xmlhttp手册

1、由于不同的浏览器对XMLHTTP的支持的不同，所以在创建新的 XMLHttpRequest 对象的时候，需要对浏览器进行判定。
  xmlhttp.js的代码：

[Copy to clipboard]CODE:
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/viewt ... &extra=page%3D1

  test.html代码：

[Copy to clipboard]CODE:
<style type="text/css">

</style>
<body>
<script src="xmlhttp.js" type="text/javascript"></script>
<script type="text/javascript">
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)
  }
}
</script>
The content will appear between here
<div id=content> </div> and here.<button onclick="go()">Do it</button>
<hr>
Header test!<br>
<button onclick="headgo()">header test</button>
<hr>
Does a url exist?<br>
<input name="url" type="text" id="url" value="http://www.scut.edu.cn"><div class="style1" id=content3> </div>
<br>
<button onclick="testurl()">test a url</button>

3、AJAX与php的简单交互实例
test.php

[Copy to clipboard]CODE:
<?
$a=$_GET['a'];
$b=$_GET['b'];
if(is_numeric($a) && is_numeric($b))
{
  $total=$a+$b;
}else{
$a='';
$b='';
$total='';
}
if($total<>'')
{
  echo $total;
}else{
?>
<script src="xmlhttp.js" type="text/javascript"></script>
<script>
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
}
</script>
<form action="test.php" method="get" onsubmit="return calc()">
<input type=text name=a value="<?=$a?>"> + <input type=text name=b value="<?=$b?>"> = <input type=text name=total value="<?=$total?>">
<input type=submit value="Calculate">
</form>
<?
}
?>

欢迎光临站长论坛 (http://tzlink.com/bbs/)