php页面get方法实现ajax，入门实例教程

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里的内容仍然存在，页面只是局部刷新了。

谢谢观看！

posted @ 2016-04-08 20:14  心雨星空  阅读(573)  评论(0)  编辑  收藏  举报