<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.ok {color: green;}

.bad {color: red;}

</style>

</head>

<body>

<form action="" method="">

<ul>

<li>

<label for="">用户名：</label>

<input type="text" name='uesrname' id='user'>

<span id="msg"></span>

</li>

<li>

<label for="">密码：</label>

<input type="password" name='pwd'>

</li>

<li>

<label for="">&nbsp;</label>

<input type="submit" value="注册">

</li>

</ul>

</form>

<script>

//获取输入框

var user = document.getElementById('user');

//在填写用户名完毕，失去焦点时，发出ajax请求

user.onblur = function(){

//第一步，创建xhr对象

var xhr = new XMLHttpRequest();

//第二步，打开连接

//需要告知我，什么方式，连接谁

// var url = "reg_get.php?username="+user.value;

var url = "reg_json.php?username="+encodeURIComponent(user.value);

xhr.open('get',url);

//第三步,监听状态变化，在返回响应结果的时候，处理返回结果

xhr.onreadystatechange = function(){

//需要判断，确保发送请求成功请求返回成功

if (xhr.readyState == 4 && xhr.status == 200) {

//接受返回值

//使用JSON对象的静态方法parse

var json_array = JSON.parse(xhr.responseText);

// 遍历JSON返回值

function printAll(obj){

for(var k in obj){

var v=obj[k];

if(typeof(v)!="object"){

document.writeln(k+"是"+v+"<br/>");

}else{

printAll(v);

}

}

}

printAll(json_array);


/*将返回结果写到span标签中

var tips = document.getElementById('msg')

tips.innerHTML = json_array.msg;

if (json_array.code == 1) {

tips.className = "ok";

} else {

tips.className = "bad";

}*/

}

}


//第四步，发送请求

xhr.send(null);

}

</script>

</body>

</html>



reg_json.php的代码：


<?php

$username = $_GET['username'];


$users = array('root','admin','test');

if (in_array($username,$users)) {

$msg = "对不起，该用户名已被占用";

$code = 0;

} else {

$msg = "恭喜您，该用户可用";

$code = 1;

}


//形成数组

$arr = array(

'msg' => $msg,

'code' => $code

);

echo json_encode($arr);