ajax，入门实例教程
本例针对php页面，做了一个小的demo加深对ajax的理解
1.文档结构：
共有ajax.php 和action.php 2个页面。
2.源码如下：
/*ajax.php页面*/<!DOCTYPE html>
<html lang="en">
<head>
<title> ajax</title>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var q=document.getElementById("q").value;/*获取id为q的input的值*/
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();//实例化ajax对象
}
else
{ //for ie5,6 兼容ie5,6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/**/
xmlhttp.onreadystatechange=function()//每当 readyState 属性改变时，就会调用该函数
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","action.php?q="+q,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<div>
<form action="action.php" >
<p>123</p>
<input type="text" name="q" id="q"/>
<input type="button" onclick="loadXMLDoc()" value="提交"/>
</form>
</div>
</body>
</html>
/*action.php页面*/<?php $value=$_GET[‘q‘]; echo $value; ?>
运行截图如下：
输入hello，运行结果截图如下：
可以看到第一行的内容被输入的内容替代，但input里的内容仍然存在，页面只是局部刷新了。
谢谢观看！
时间： 2024-10-23 08:41:54