ajax学习小结

ajax学习小结

一、Ajax
    Asynchronous JavaScript And XML = 异步的 JavaScript 及 XML。
    
    目的：使得整个页面不刷新也能出现效果。没有后退按钮。

二、XMLHttprequest(由浏览器内核创建)
    方法：
        open("get/post", "URL");
        send();
    
    属性：
        readyState         客户端请求就绪状态码
        status            服务器响应状态码
        responseText    响应的文本内容
        responseXML        响应的XML文档对象(一般不用)
        
    事件处理器：
        onreadystatechange
    
    示例代码：
    <script type="text/javascript">
        // 方式1
        function ckName() {
            // 获取用户名对象
            var name = document.getElementsByTagName("input")[0];
            // 创建XMLHttpRequest对象
            var xhr = getXMLHttpRequest();
            // 处理响应结果，创建回调函数，根据响应状态动态更新页面
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) { // 说明客户端请求一切正常
                    if (xhr.status == 200) { // 说明服务器响应一切正常
                        // alert(xhr.responseText); // 得到响应结果
                        var msg = document.getElementById("msg");
                        if (xhr.responseText == "true") {
                            // msg.innerText = "用户名已存在";
                            msg.innerHTML = "<font color='red'>该用户名已存在</font>";
                        } else {
                            msg.innerHTML = "<font color='green'>该用户名可以使用</font>";
                        }
                    }
                }
            }            
            // 建立一个连接
            xhr.open("get", "${pageContext.request.contextPath }/servlet/ckNameServlet?name=" + name.value);
            // 发送请求
            xhr.send(null);
        }
        
        // 方式2
        window.onload = function() {
            var nameElement = document.getElementsByName("userName")[0];
            nameElement.onblur = function() {
                var name = this.value; // this等价于nameElement
                
                // 创建XMLHttpRequest对象
                var xhr = getXMLHttpRequest();
                // 处理响应结果，创建回调函数，根据响应状态动态更新页面
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) { // 说明客户端请求一切正常
                        if (xhr.status == 200) { // 说明服务器响应一切正常
                            // alert(xhr.responseText); // 得到响应结果
                            var msg = document.getElementById("msg");
                            if (xhr.responseText == "true") {
                                // msg.innerText = "该用户名已存在";
                                msg.innerHTML = "<font color='red'>该用户名已存在</font>";
                            } else {
                                msg.innerHTML = "<font color='green'>该用户名可以使用</font>";
                            }
                        }
                    }
                }            
                // 建立一个连接
                xhr.open("get", "${pageContext.request.contextPath }/servlet/ckNameServlet?name=" + name + "&time=" + new Date().getTime());
                // 发送请求
                xhr.send(null);
            }
        }
    </script>
        
三、使用Ajax
    1. 确定使用什么事件调用什么方法
    2. 步骤：
        获取XMLHttpRequest对象
        处理响应结果
        建立一个连接
        发送请求