使用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; //可以注册
	}