|
作者：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]<style type="text/css">
<!--
.style1 {color: #FF0000}
-->
</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!
>
<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
CODE:[Copy to clipboard]<?
$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>
<?
}
?>
先写到这里，以后继续～^_^
----------------------------------------
AJAX实例二
实现数据无刷新的写入文本文件
主文件xmlhttp.html
CODE:[Copy to clipboard]<!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
CODE:[Copy to clipboard]<?
header ("Cache-Control: no-cache, must-revalidate");
echo file_get_contents("test.txt");
?>
writefile.php
CODE:[Copy to clipboard]<?
file_put_contents('test.txt',$_POST['content']);
echo $_POST['content'];
?>
test.txt
CODE:[Copy to clipboard]this is a ajax example in test.txt
所有代码在win xp+php5.1 + apache 2.054 下通过测试
|
