ajax(1)

2018-10-12  本文已影响0人  小牛长成记

三个方法
open() "get|post" ,"url?name=tom&sex=boy " ,"true|false" --> 建立连接
send(null) 发送请求 。可以带参数 或 null --> 发送请求
setRequestHeader()

四个属性
readyState:类型short;只读 监控的是客户端状态 4
responseText:类型String;只读 服务器端返回的内容类型
responseXML:类型Document;只读
status:类型short;只读 监控的是服务器端状态 200

一个事件
onreadystatechange --> 服务器端或客户端的状态发生改变

//1.创建xmlHttpRequest对象

//2. 设置回调函数,执行业务逻辑
xmlHttpRequest.onreadystatechange() = function(){

if(readyState==4 && status==200){
//成功
业务逻辑
}

}

//3. 建立连接
xmlHttpRequest.open(get,url,true);
//4.发送请求
xmlHttpRequest.send(null);

    window.onload = function(){
    var username = document.getElementById("username");
    var msg = document.getElementById("msg");
    var submit = document.getElementById("submit");
    username.onblur = function(){
        var date = new Date();
        //1.创建xmlHttpRequest对象
        var req = xmlHttpRequest();
        //2.处理响应结果,设置回调函数
        req.onreadystatechange = function(){
            if(req.status == 200 && req.readyState == 4){
                var data = req.responseText;
                if( username.value ==""){
                    msg.innerHTML = "<font color='red'>"+data+"</font>";
                }
                if(data.length>5){
                    msg.innerHTML = "<font color='red'>"+data+"</font>";
                    submit.disabled = true ;
                }else{
                    msg.innerHTML = "<font color='green'>"+data+"</font>";
                    submit.disabled = false ;
                }
                
            } 
        }
        //3.建立链接
        req.open("get","${pageContext.request.contextPath}/UserController?flag=checkUser&date="+date.getTime()+"&username="+username.value,true);
        //4.发送请求
        req.send(null);
    }
 }
上一篇下一篇

猜你喜欢

热点阅读