AJAX的基本讲解
1、首先,新建一个html文档,书写一个input输入框和一个span,代码如下:
<html>
<body>
<form action="#" method="post">
姓名<input type="text" name="first" id="first" />
<span id="show"></span>
</form>
</body>
</html>
网页效果如图:
2、接下来,在body里面创建ajax脚本,代码如下:
<html>
<body>
<script type="text/javascript">
function check(str){
if(window.XMLHttpRequest){
var x=new XMLHttpRequest(); //创建对象
}else{
var x=new ActiveXObject("Microsoft.XMLHTTP");
}
x.open("GET","test2.php?c="+str+"&q="+new Date(),true); //客户端准备,发送给test2.php进行处理
x.send(); //客户端发送
x.onreadystatechange=function ff(){
if(x.readyState==4 && x.status==200){//客户端判断条件
//客户端显示
document.getElementById("show").innerHTML=x.responseText;
}
}
}
</script>
<form action="#" method="post">
姓名<input type="text" name="first" id="first" />
<span id="show"></span>
</form>
</body>
</html>
3、分析:这个check();是一个函数。
因为要发送给test2.php进行处理,所以我们还要创建test2.php,书写代码:
<?php
if($_GET["c"]==""){ //如果$_GET["c"]为空
echo "empty"; //就输出empty
}else{ //否则
echo $_GET["c"]; //输出发送过来的数据
}
?>
效果如图: