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