书城7 - 原生 Ajax 发送异步请求

原生Ajax - Asynchronous Jsp and Xml

发送异步请求

• 创建 XMLHttpRequest 对象

  • var xmlHttpRequest ;
    
    function createXMLHttpRequest(){
        if(window.XMLHttpRequest){
            //符合DOM2标准的浏览器 ，xmlHttpRequest的创建方式
            xmlHttpRequest = new XMLHttpRequest() ;
        }else if(window.ActiveXObject){//IE浏览器
            try{
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e) {
                xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP")
            }
        }
    }
    

• 调用 XMLHttpRequest 对象的 open + send 方法发送请求

  • function ckUname(uname){
        createXMLHttpRequest();
        var url = "user.do?operate=ckUname&uname="+uname ;
        xmlHttpRequest.open("GET",url,true);
        //设置回调函数
        xmlHttpRequest.onreadystatechange = ckUnameCB ;
        //发送请求
        xmlHttpRequest.send();
    }
    

• ckUnameCB 回调函数，通过状态码以及服务器响应内容，在页面上给出相应信息

  • function ckUnameCB(){
        if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
            //xmlHttpRequest.responseText 表示 服务器端响应给我的文本内容
            //alert(xmlHttpRequest.responseText);
            var responseText = xmlHttpRequest.responseText ;
            // {'uname':'1'}
            //alert(responseText);
            if(responseText=="{'uname':'1'}"){
                alert("用户名已经被注册！");
            }else{
                alert("用户名可以注册！");
            }
        }
    }
    

  • 只对 .readyState==4 进行操作，同时，状态码 .status==200 表示解析成功

  • 0 未初始化，没有调用 send() 方法

  • 1 载入中，已调用 send() 方法，正在发送请求

  • 2 载入完成，send() 方法执行完成，已经接受到所有响应内容

  • 3 交互，正在解析内容、

  • 4 完成，响应内容解析完成，可以在客户端调用