使用Ajax实现动态数据加载-优快云博客

本文链接：https://blog.youkuaiyun.com/wantingqiang/article/details/3932194

一：首先建立一个index.html

<html>
<head>

<script language="javascript">
var xmlHttp= false;
function initAjax()
{
try
{
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   //alert("Msxml2.XMLHTTP");
}
catch (e)
{
  try
  {
   xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
   //alert("Microsoft.XMLHTTP");
  }
  catch (e2)
  {
     xmlHttp=false;
  }
}

if(!xmlHttp && typeof XMLHttpRequest != 'undefined')
{
xmlHttp= new XMLHttpRequest();
//alert("XMLHttpRequest");
}
}

function callServer()
{
     initAjax();
     var userid= document.getElementById("uid").value; //得到用户输入的值
if((userid==null) || (userid=="")) //验证是否为空
{
     document.getElementById("uname").value="";
  return;
}

var url="del.php?uid="+userid+"";//建立url连接

//打开连接
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=updatePage;

//发送请求
xmlHttp.send(null);
}

function updatePage()
{
    if(xmlHttp.readyState==4)
{
     var response=xmlHttp.responseText;
  document.getElementById("uname").value=response;
}
}

</script>
</head>
<body>
<form>
<center><b>大家来试试这个Ajax效果。在第一个文本框中输入任何一个数字</b></center>
<table>
<tr><td>请输入ID：</td><td><input type="text" name="uid" id="uid" οnkeyup="callServer();"></td><td><input type="text" name="uname" id="uname" size="30"></td><tr>
</table>
</form>
</body>
</html>

二：再写一个处理请求的php页面，命名为：del.php

     <?php
    $getValue=$_GET["uid"];
if(is_numeric ($getValue))
{
   echo "you input:".$getValue;
}
else
{
  echo "please input a number";
}
?>

三：OK咯。。测试运行就可以了。