最近看了网上一篇关于AJAX技术的文章，虽然曾经略知一二，但是一直没有实际做过什么东东。看完后，突然想小试身手。如此，使用php做了一个简单的AJAX技术的网页。如下：
文件：
(1)ajaxtest.js -用来实现ajax接口
（2）test.php -用来传入，显示及调用
（3）showText.php -用来处理传入的php
以下对代码进行描述及重点处说明
===============================
由于现在还没有找到好的可以支持AJAX的jScript编辑，因此对于ajaxtest.js的编写一定要注意大小写及相应的方法名称。
（1）ajaxtest.js
--------------------
var ajax = false;
function getResult(stateVal){
//alert("OK");
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
//alert("OK1");
}else if(window.ActiveXObject){
ajax = new ActiveXObject("Microsoft.XMLHTTP");
//alert("OK2");
try{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
//alert("OK3");
}catch(e){
try{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
//alert("OK4");
}catch(e){}
}
}
if(!ajax){
alert("不能创建AJAX实例!");
return false;
}
if(ajax){
//alert("OKGET!");
alert("showText.php?STR=" + document.form1.text1.value);
ajax.open("GET","showText.php?STR=" + document.form1.text1.value,true);
//alert("OKGET1!");
ajax.onreadystatechange = complete;
ajax.send(null);
}
}
//alert("OK");
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
//alert("OK1");
}else if(window.ActiveXObject){
ajax = new ActiveXObject("Microsoft.XMLHTTP");
//alert("OK2");
try{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
//alert("OK3");
}catch(e){
try{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
//alert("OK4");
}catch(e){}
}
}
if(!ajax){
alert("不能创建AJAX实例!");
return false;
}
if(ajax){
//alert("OKGET!");
alert("showText.php?STR=" + document.form1.text1.value);
ajax.open("GET","showText.php?STR=" + document.form1.text1.value,true);
//alert("OKGET1!");
ajax.onreadystatechange = complete;
ajax.send(null);
}
}
function complete(){
// 1,readyState; 2,status
// 1,readyState; 2,status
//此处一定要注意第一个判断是readyState第二个判断是status不要搞混噢，一开始我就写的是
//if(ajax.readyState == 4 && ajax.readyState == 200){，所以一直没有出来。。。^_^!
if(ajax.readyState == 4 && ajax.status == 200){
if(ajax.readyState == 4 && ajax.status == 200){
//如果得到Text文本文件后再进行处理，就请用responseText。如果得到的是个XML结构就请用
//
responseXML然后再通过使用javascript中的DOM来进行处理。
//如：var city = req.responseXML.getElementsByTagName("city");
showGetText(ajax.responseText);
}
}
showGetText(ajax.responseText);
}
}
function showGetText(strText){
document.form1.text.value = strText;
}
document.form1.text.value = strText;
}
------------------------------------------------------------------------
showText.php
<?php
$str = $_REQUEST["STR"];
$str .= "AJAX测试通过啦！！！^_^";
print $str;
?>
$str = $_REQUEST["STR"];
$str .= "AJAX测试通过啦！！！^_^";
print $str;
?>
----------------------------------------------------------------------------
test.php
<html>
<head>
<title>AJAX Test</title>
<script language = "JScript" src = "ajaxtest.js"></script>
</head>
<body>
<table>
<tr><td>
<!--
<form name="formItem" method="post" action="" target="" οnsubmit="return false;">
-->
<form id="form1" name="form1" method="post" action="">
<input name="text" type="text" value="test"/>
<input name="text1" type="hidden" value="Testtee"/>
<head>
<title>AJAX Test</title>
<script language = "JScript" src = "ajaxtest.js"></script>
</head>
<body>
<table>
<tr><td>
<!--
<form name="formItem" method="post" action="" target="" οnsubmit="return false;">
-->
<form id="form1" name="form1" method="post" action="">
<input name="text" type="text" value="test"/>
<input name="text1" type="hidden" value="Testtee"/>
//对于button来说一定是onClick事件才能触发呀，否则就会像我一样一直在使用onchange事件，对于//我来说具然也能犯这样的错误。。。。真是.....汉呀
<input name="button" type="button" onClick = "getResult(this);" value = "dd"/>
</form>
</td>
</tr></table>
</body>
</html>
<input name="button" type="button" onClick = "getResult(this);" value = "dd"/>
</form>
</td>
</tr></table>
</body>
</html>
514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
