Ajax具体使用
Ajax在注册页面经常使用，当注册用户是用户名必须唯一时，要使用ajax获取表单中你输入的内容， 然后将这个数据利用XMLHttpRequest对象请求一个php文件，这个php文件接收到信息，查询数据库， 判断是否有相同的用户名已经注册，把结果echo出来，前端页面不用发生跳转，用xhr对象的ResponseText 的属性获取php页面返回的值，进行相应的处理，将提示是否能够注册的语句显示在页面当中，实现Ajax功能
需要注意的是,send();方法是向php页面发送数据，参数就是数据，数据类型为"key1=value1$key2=value2..."
的形式，经常以GET,POST两种方式传输，在使用POST方式时，必须使用方法setRequestHeader('key','value');
设置头信息Content-Type: application/x-www-form-urlencoded,否则无法接收到信息
前端页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax的具体实现</title>
<script type="text/javascript">
//发送数据
function sen(){
var xhr=new XMLHttpRequest();
xhr.open('POST','./01.php',true);//异步传输
//获取表单中的内容
var oUser=document.getElementsByName('username')[0];
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("username="+oUser.value);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
document.getElementById('username').innerHTML=xhr.responseText;
}
}
}
window.onload=function(){
}
</script>
</head>
<body>
<form id="form" action="">
<p>用户名:<input type="text" name="username" /><span id="username"></span></p>
<p>密码:<input type="password" name="[pwd]"/><span id="pwd"></span></p>
<p><input type="button" onclick="sen();" value="注册"/></p>
</form>
</body>
</html>
php接收页面
<?php
//print_r($_POST);
if(isset($_POST['username'])){
if($_POST['username']=='admin'){
echo "不能注册";
}else{
echo '可以注册';
}
}
?>
当点击注册按钮时，才触发Ajax函数，然后发生以下效果
