AJAX實現異步提交

AJAX的工作流程

XMLHttpReques對象常用屬性

readyState	返回請求的當前狀態，每次狀態改變都會改變此值 常用值：    0--未開始化    1--開始發送請求    2--請求發送完成    3--開始讀取響應    4--讀取響應結束
status	返回當前請求的HTTP代碼狀態 常用值：    200--正確返回    404--找不到訪問對象
responseText	以文本形式獲取響應值
responseXML	以XML形式獲取相應值，並且解析成DOM對象返回
statusText	返回當前的響應行狀態
onreadystatechange	設置回調函數

XMLHttpReques對象常用方法

open(method,url,async,user,password)	用於創建一個新的HTTP請求      參數method：設置HTTP請求方法，比如GET  POST等      參數url：請求的URL地址      參數async：可選，指定請求是否爲異步方法，默認爲true     參數user：可選，如果服務器需要驗證，此處需要指定用戶名      參數password：可選，指定服務器的密碼。
send(data)	發送請求到服務端     如果是POST請求需要填寫參數，如果是GET則爲null
abort()	取消當前請求
setRequestHeader(header,value)	單獨設置請求的某個HTTP頭信息     header：要指定的HTTP頭名稱     value：指定HTTP頭名稱對應的值
getResponseHeader(headerName)	從響應中獲取指定的HTTP頭信息
getAllResponseHeaders()	獲取響應所有HTTP頭信息

使用javascript來實現異步提交

<script>
    var xmlHttpRequest;
    function ajaxTest() {
        //創建 xmlHttpRequest 對象
        if (window.XMLHttpRequest){
            xmlHttpRequest = new XMLHttpRequest();
        } else {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP")
        }

        //設置回調函數
        xmlHttpRequest.onreadystatechange = call;

        //初始化xmlHttpRequest
        xmlHttpRequest.open("GET","url", true);
          //GET 使用GET方式訪問,這裏也可以設置成POST
          //url url地址，也可以是帶有參數的url地址
          //true(默認值) 指定此請求是否爲異步方法。

        //提交請求
        xmlHttpRequest.send(null);
          //由於我們是通過GET請求，地址欄傳遞參方式請求的所以爲null
          //如果爲POST方式則需要指定參數,參數爲String類型.

      }

      function call() {
          //獲取文本響應值,此值可以自定義
          if (xmlHttpRequest.responseText == "true"){

          }


      }
</script>

使用jquery實現異步提交(在jquery中封裝了上面的代碼)

$.ajax({
                type:"POST",
                url:"check_user.jsp",
                data:"name" + uname,
                dataType:"html",
                success:function (mas) {
                    if ($.trim(mas) == "true"){
                        $("#user_info").html("★ 用戶名被使用");//用戶名被使用
                    } else {
                        $("#user_info").html("☆ 可以註冊");
                    }
                }
            });

type：提交方式
url：提交地址
data：提交參數
dataType：返回消息類型
success：成功後調用函數。mas表示返回的信息。