ajax最简单的一个实例

最新推荐文章于 2021-08-06 10:02:44 发布

原创最新推荐文章于 2021-08-06 10:02:44 发布 · 468 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #function #php #firefox #脚本

AJAX技术专栏收录该内容

1 篇文章

订阅专栏

最近在学习ajax的一些东西，下面是学习时写的一个最简单的例子。href.html是页面静态文件。ajax.js是js脚本。for.php是要调用的php脚本。代码如下：

href.html文件代码如下：

<a href="#" onclick="php100('hopelights')" >hopelights</a><br>
<a href="for.php?id=b">b</a><br>
<a href="for.php?id=t">t</a><br>
<div id="php100" ></div>

</body>
</html>

ajax.js代码如下：

var xmlHttp;

//判断浏览器是否支持XMLHttpRequest对象
function S_xmlhttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}

//处理返回结果
function byphp()
{
   //在发送请求
   if(xmlHttp.readyState ==1)
   {
    document.getElementById("php100").innerHTML = "loading.......";
   }

   //请求完成
   if(xmlHttp.readyState == 4)
   {
   if(xmlHttp.status == 200)
    {
      var byphp100 = xmlHttp.responseText;
         document.getElementById("php100").innerHTML =byphp100;
    }
}
}

//页面调用方法
function php100(str)
{
S_xmlhttpRequest();

xmlHttp.open("GET","for.php?id="+str,true);
xmlHttp.onreadystatechange = byphp;
xmlHttp.send(null);

}

for.php的代码如下：

<?php

$str = $_GET['id'];
echo "hello,".$str."!you are successful!";
?>

超级简单吧，不过写的时候还是要细心哦，很容易出错的哈，调试也比较麻烦。非专业的js编写人员可以用firefox进行调试。