AJAX学习实例（二）
时间：2006-03-03
来源：互联网
时间：2006-3-2
邮箱：[email protected]
前面发了一些文章，主要是关于ajax的一些资料及小测试程序。这次我给出一个比较完整的AJAX实例，希望对感兴趣的人有所帮助，也希望能和大家一起交流切磋。
AJAX实例：操作文本文件
测试环境：win xp SP2操作系统，apache2.054服务器，php5.12,mysql 5.0 数据库（测试通过）
注意事项：1、界面的CSS上我使用了Phzzy上传文件里面的那个，在此表示感谢！^_^
2、php版本低于5.1的，请自己写一个writefile.php文件（file_put_contents在php5以上才支持）
一下我贴出并详细说明一些关键代码，源文件已经打包（见附件）。
index.html
代码:
<script language="javascript">//建立xmlhttp，由于不同浏览器支持不同的原因才这么复杂，具体可以参考我前面发布的"AJAX简介"一文
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;
}
//从readfile.php中_get到文本文件test.txt的数据
function readcontent()
{
var xmlhttp=initxmlhttp();
var showcontent=document.getElementById("message");
var url="readfile.php";
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
showcontent.innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
//将数据_post到writefile.php以将数据写入test.txt
function writecontent()
{
var xmlhttp=initxmlhttp();
var content=document.forms[0].content.value;
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);
}
</script>
代码:
<?header ("Cache-Control: no-cache, must-revalidate");//这个是必须的，不然读出的数据将是以前的缓存数据
echo file_get_contents("test.txt");
?>
作者: feifengxlq 发布时间: 2006-03-02
作者: feifengxlq 发布时间: 2006-03-02
很不错的东西
不光是ajax,还可以简化很多脚本
http://ftp.besti.edu.cn/jsp/jchat.v1/index.jsp
我这个聊天室就是用了prototype.js
作者: danielking 发布时间: 2006-03-03
是这个用了
http://ftp.besti.edu.cn/jsp/jchat/index.jsp
但是这个才刚刚开始
我觉得里面的$('id')特别好用
当然还有别的好多优点.
作者: danielking 发布时间: 2006-03-03
去年我在CSDN上就看到国内有个做的相当成熟的～
作者: feifengxlq 发布时间: 2006-03-03
FF不支持 xmlhttp.send(poststr); ?
你试试
用你这个例子用FF看，不能往文件里面写内容
作者: Phzzy 发布时间: 2006-04-05
FF 下返回 xmlhttp.readyState = 1
其中
4 代表 完成 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
1 代表 初始化 对象已建立，尚未调用send方法
代码:
<script>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 getresult()
{
var xmlhttp=initxmlhttp();
//var name=document.getElementById("name").value;
var name = "22";
var url="index.html";
var poststr="name=" + name ;
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)
{
resultdiv.innerHTML=xmlhttp.responseText;
}
}
alert("xmlhttp.readyState = " + xmlhttp.readyState);
}
</script>
<input type="button" name="submit" value="分析结果" id="button" onclick="getresult();" />
<div id="resultdiv">1</div>
作者: Phzzy 发布时间: 2006-04-05
作者: softly 发布时间: 2006-04-05
感觉AS也不错 :)
作者: kinns 发布时间: 2006-04-06
该成小写
onreadystatechange
就可以了~晕
作者: Phzzy 发布时间: 2006-04-06
作者: jamesmws 发布时间: 2006-05-14
支持.
作者: DH 发布时间: 2006-05-30
作者: qk31 发布时间: 2006-08-11
作者: dennis 发布时间: 2006-08-23
作者: learance 发布时间: 2006-12-15
作者: leehui1983 发布时间: 2006-12-15
作者: kqq1985 发布时间: 2006-12-31
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
