Ajax验证

一：普通方式的Ajax验证

/**
  *第一步：创建XMLHttpRequest对象
  *xhr = new XMLHttpRequest();适用于IE7及以上、火狐、谷歌、open
  *xhr = new ActiveXObject("Microsoft.XMLHTTP"); 适用于IE7及以下
  */
function createXMLHttpRequest(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

/**
  *第二步：具体业务处理
  */
function validate(){
    var xhr = createXMLHttpRequest();
    var username = document.getElementById("id");
    var url = "请求的链接"

    /*
    method是请求的方式，get or post
    true是指异步请求，false是指同步请求，默认是ture
    */
    xhr.open("method",url,true)
    xhr.onreadystatechange = function(){  
        if(xhr.readstate == 4){  //表示已经接收到了全部的数据
            if(xhr.status == 200){  //表示服务器已经成功返回
                alert(xhr.responseText);  //输出响应的内容
            }
        }
    }
    //发送信息，如果是get方式需要传递参数，则放在哪send()内
    xhr.send(null)
}

/**
  *第三步：为validate()添加一个事件触发该函数
  */

/*
说明：
1.当请求发送到服务器端后服务器端会将响应的内容自动填充xhr对象的属性值：
1）responseText:作为响应主体返回文本
2）responseXML：如果响应的主体内容类型是"text/xml"或是"application/xml",则返回包含响应数据的XMLDOM文档
3）status：响应的HTTP状态
4）statusText：HTTP状态的说明

2.使用异步调用的时候需要出发onreadystatechange 事件，然后会检测readstate 的属性值：
1）0  未初始化   尚未调用open()
2) 1  启动       已经调用open()尚未调用send()
3）2  发送       已经调用send()尚未返回响应
4）3  接收       已经接收部分响应的数据
5）4  完成       已经接收全部的数据，并且可以使用
*/

二：jQuery方式的Ajax验证

$.(function(){
    $("#id").blur{  //blur事件
        function(){
            $.ajax({
                url:"请求的url", 
                type:"method",  //get or post
                dataType:"请求的数据类型",  //json、jsonp or text
                data:{  //返回的数据
                    "key":"value"
                },
                success:function(){},  //成功调用的函数
                error:function(){},  //失败调用的函数
                complete:function(){}  //完成调用的函数
            });
        }
    }
});