AJAX解决更新网页的问题

69 阅读 0 评论 46 点赞

我是靠谱客的博主热心小蜜蜂，最近开发中收集的这篇文章主要介绍AJAX解决更新网页的问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

4.AJAX解决更新网页的问题
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
解决：
首先编写js代码：
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","a_stu_ajax.php?a=<?php echo $_POST['textfield']; ?>",true);
xmlhttp.send();
}
</script>
其中“myDiv”是新网页的展示位置
xmlhttp.open("GET","a_stu_ajax.php?a=<?php echo $_POST['textfield']; ?>",true);
用过URL传值“a”的方式将$_POST['textfield']的值传到“a_stu_ajax.php”页面

<form name="form1" method="post" action="">

   <label>
   <input type="text" name="textfield" id="textfield">
   </label>
   <label>
   <input type="submit" name="button" id="button" value="提交">
   </label>
<label>
<button type="button" οnclick="loadXMLDoc()">请求数据sb</button>
</label>
<?php print "Welcome <b>" . $_POST['textfield'] . "</b><br/>"; ?>
</form>
form表单必须提交textfield才会有值这段php代码用来证明此问题
<button type="button" οnclick="loadXMLDoc()">请求数据sb</button>用来调用js代码。