当前位置：首页 → 问答吧 → AJAX实例学习手记

AJAX实例学习手记

时间：2006-02-28

来源：互联网

作者：feifengxlq
Email:[email protected]
日期：2006-2-27
参考：Using the XML HTTP Request object ，xmlhttp手册

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

复制内容到剪贴板

代码:

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代码：

复制内容到剪贴板

代码:

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

复制内容到剪贴板

代码:

<?
$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>
<?
}
?>

先写到这里，以后继续～^_^

作者: feifengxlq 发布时间: 2006-02-27

个人对Ajax不想碰。。。不知道是好还是坏，呵呵。

不过还是顶下。加精。

作者: seraph 发布时间: 2006-02-27

引用:

原帖由 seraph 于 2006-2-27 23:30 发表
个人对Ajax不想碰。。。不知道是好还是坏，呵呵。

不过还是顶下。加精。

感觉蛮好用的～

附上xmlhttp手册吧

作者: feifengxlq 发布时间: 2006-02-28

实现数据无刷新的写入文本文件

主文件xmlhttp.html

复制内容到剪贴板

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>xmlhttp</title>
</head>
<script language="javascript">
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;
   }
  }
}
</script>
<body>
<hr>
<p>AJAX的测试</p>
<p>
<form>
  <textarea name="content" cols="50" rows="10" id="content">
</textarea>
  <br>
  <input type="button" name="Submit" value="读取文本文件数据" onClick="readcontent()">
  <input type="button" name="Submit2" value="将数据写入文本文件" onClick="writecontent()"><br>
</form><div id="showcontent"></div>
</p>
<hr>
</body>
</html>

readfile.php

复制内容到剪贴板