ajax 異步處理 使用js、jQuery分別實現Get請求 Post請求

0102、Get方法 js的編寫

                            var xmlHttpRequest = null;
                            //1、創建XMLHttpRequest對象
                            if (window.XMLHttpRequest) {//新版本返回為TRUE
                                xmlHttpRequest = new XMLHttpRequest();
                            } else {
                                xmlHttpRequest = new ActiveXObject(
                                        "Microsoft.XMLHTTF");
                            }
                            //2、設置回調函數
                            xmlHttpRequest.onreadystatechange = callBack;
                            var username = $("#username").val();
                            //3、初始化XMLHttpRequest組件
                            var url = "UserServlet?username=" + username;
                            xmlHttpRequest.open("GET", url, true);
                            //4、發送請求
                            xmlHttpRequest.send(null);
                            //回調函數callBack的編寫
                            function callBack() {
                                if (xmlHttpRequest.readyState == 4
                                        && xmlHttpRequest.status == 200) {
                                    var data = xmlHttpRequest.responseText;
                                    if (data == "true") {
                                        $("#errMsg").html("用戶名已被注冊");
                                    } else {
                                        $("#errMsg").html("用戶可以注冊");
                                    }
                                }
                            }
                        });

 0102、Post方法 js的編寫

$("#username").blur(
            function() {
                //1、創建XMLHttpRequest對象

                var xmlHttpRequest = null;
                if (window.XMLHttpRequest) {//新版本返回為TRUE
                    xmlHttpRequest = new XMLHttpRequest();
                } else {
                    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTF");
                }
                //2、設置回調函數
                xmlHttpRequest.onreadystatechange = callBack;
                //3、初始化XMLHttpRequest組件
                var url = "UserServlet";
                xmlHttpRequest.open("POST", url, true);
                xmlHttpRequest.setRequestHeader("Content-Type",
                        "application/x-www-form-urlencoded");
                //4、發送請求
                var username = $("#username").val();
                var data = "username=" + username;
                xmlHttpRequest.send(data);
                //回調函數callBack的編寫
                function callBack() {
                    if (xmlHttpRequest.readyState == 4
                            && xmlHttpRequest.status == 200) {
                        var data = xmlHttpRequest.responseText;
                        if (data == "true") {
                            $("#errMsg").html("該用戶已被注冊");
                        } else {
                            $("#errMsg").html("用戶名可以使用");
                        }
                    }
                }

            })

 0103、$.ajax Get的編寫

$("#username").blur(function() {
        var username = $(this).val();
        $.ajax({
            "url" : "UserServlet",    //提交URL
            "type" : "Get",//處理方式
            "data" : "username=" + username,//提交的數據
            "dataType" : "text",//指定返回的數據格式
            "success" : callback,//執行成功后的回調函數
            "async" : "false",//是否同步
            //錯誤后執行
            "error" : function() {
                alert("驗證出現錯誤！")
            }

        });

        function callback(data) {
            alert(data);
            if (data == "true") {
                $("#errMsg").html("用戶名已被注冊！");
            } else {
                $("#errMsg").html("用戶名可以使用！");
            }
        }
    })

 0104、$.get(url,[data],[success])的代碼

$("#name").blur(function() {
        var name = $(this).val();
        if (name != null && name != "") {
            $.get("UserServlet","name="+name,callBack);
            function callBack(data) {
                if (data == "true") {
                    $("#msg").html("用戶名已存在");
                } else {
                    $("#msg").html("用戶名可以使用");
                }
            }
        }

    });

0105、$.post(url,[data],[success])的代碼

$("#name").blur(function() {
        var name = $(this).val();
        if (name != null && name != "") {
            $.post("UserServlet", "name=" + name, callBack);
            function callBack(data) {
                if (data == "true") {
                    $("#msg").html("用戶名已存在！");
                } else {
                    $("#msg").html("用戶名可以使用！");
                }
            }
        }

    });