使用javascript原生XMLHttpRequest对象进行ajax交互

AJAX(Asynchronous Javascript And XML)：异步javascript和xml，是一种创建交互式网页应用的网页开发技术。

AJAX通过在后台与服务器进行数据交换，从而使网页实现异步更新，提高了系统性能和用户友好度。

//post请求

<script type="text/javascript">
window.onload=function(){
var username=document.getElementById("name");
username.onblur=function(){
var name=this.value;
if(name == ''){
document.getElementById('tip').innerHTML="<b class='notice'>请输入用户名</b>"; return;
}
/*
if(window.XMLHttpRequest){
//code for IE7+,Firefox,Chrome,Opera,Safari
xhr=new XMLHttpRequest();
} else {
//code for IE6,IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
*/
//此处默认为内建XMLHttpRequest对象浏览器
var xhr=new XMLHttpRequest();
//打开网页（请求方法，请求网页，是否异步交互['是'=>true,'否'=>false]）
xhr.open('post','demo_post.php',true);
//设置请求头信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送数据
xhr.send("name="+name);
xhr.onreadystatechange=function(){
//XMLHttpRequest对象的三个重要属性：readyState、onreadystatechange、Status,每当readyState改变时，就会触发onreadystatechange事件
//readyState属性存有XMLHttpRequest的状态信息，从0到4发生变化:
//	0：请求未初始化
//	1：服务器连接已建立
//	2：请求已接收
//	3：请求处理中
//	4：请求已完成，且响应已就绪
if(this.readyState == 4 && this.status == 200) {
//alert(this.responseText);
if(this.responseText != 1){
alert("该用户名已经注册！");
} else {
alert("可以注册！");
}
}
}
}
}
</script>

//get请求：

<script type="text/javascript">
window.onload=function(){
var username = document.getElementById("name");
username.onblur = function(){
var name = this.value;
if(name == ""){
document.getElementById("tip").innerHTML = "<b class='notice'>请输入用户名</b>";
return;
}
var xhr = new XMLHttpRequest();
//var uri = "demo_get.php?name="+name;
xhr.open("get","demo_get.php?name="+name,true);  //true代表异步交互
//xhr.open("get","demo_get.php?t="+Math.random,)
//get无需设置头信息 ,
xhr.send(null);
//回调函数
xhr.onreadystatechange=function(){
if(this.readyState == 4 && this.status == 200){
//alert(this.responseText);
if(this.responseText != 1){
alert("该用户名已经注册！");
} else {
alert("可以注册！");
}
}
}
}
}
</script>

//后台请求页：

<?php
$name = $_POST['name'];
//or  $name = $_GET['name'];
$dsn = "mysql:host=localhost;dbname=demo";
$db = new PDO($dsn,'root','');
$res = $db->query("select * from tbl_user where username='".$name."'");
if($res->fetch()) {
echo 0; //不可以注册
} else {
echo 1; //可以注册
}