1. 程式人生 > >java ajax實現非同步同步請求全面詳解

java ajax實現非同步同步請求全面詳解

XMLHttpRequest物件 var request=new XMLHttpRequest()
//相容IE5 IE6
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// 老版本的 IE6, IE5 使用 ActiveX 物件
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

var request=new XMLHttpRequest() //建立物件
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//做一些事情
request.responseText
}
這裡寫圖片描述

success(data, textStatus, jqXHR)
data:處理後的資料, textStatus:描述狀態的字串,jqXHR(在jQuery 1.4.x的中,XMLHttpRequest) 物件

data:$(“#表單名”).serializeArray() serializeArray() 方法通過序列化表單值來建立物件陣列(名稱和值)。

onreadystatechange 是一個事件控制代碼。它的值 (state_Change) 是一個函式的名稱,
當 XMLHttpRequest 物件的狀態發生改變時,會觸發此函式。狀態從 0 (uninitialized)
到 4 (complete) 進行變化。僅在狀態為 4 時,我們才執行程式碼。

為什麼使用 Async=true ?

我們的例項在 open() 的第三個引數中使用了 “true”。

該引數規定請求是否非同步處理。

True 表示指令碼會在 send() 方法之後繼續執行,而不等待來自伺服器的響應。

onreadystatechange 事件使程式碼複雜化了。但是這是在沒有得到伺服器響應的情況下,防止程式碼停止的最安全的方法。

通過把該引數設定為 “false”,可以省去額外的 onreadystatechange 程式碼。如果在請求失敗時是否執行其餘的程式碼無關緊要,那麼可以使用這個引數。
onreadystatechange 儲存函式(或函式名),每當 readyState 屬性改變時,就會呼叫該函式。

open(method,url,async) eg:open(“get”,”ygc.com”,true) send();
method:請求的型別;GET 或 POST
url:檔案在伺服器上的位置
async:true(非同步)或 false(同步)
send(string)
string:僅用於 POST 請求
responseText:獲得字串形式的響應資料
responseXML:獲得XML形式的響應資料
status和statusText:以數字和文字形式返回HTTP狀態碼 200 OK 404未找到頁面
getAllResponseHeader():獲取所有的響應報頭

readyState屬性
0:請求未初始化,open還沒有呼叫
1:伺服器連線已建立
2:請求已接收,也就是接收到頭資訊了
3:請求處理中,也就是接收到響應主體了
4:請求已完成,且響應已就緒,也就是響應完成了

jQuery.ajax([settings])
type:型別 post或get 預設為 get
url:傳送請求的地址
data:是一個物件,連同請求傳送到伺服器的資料
dataType:預期伺服器返回的資料型別。如果不指定將自動根據HTTP包MIME資訊
success:是一個方法,請求成功後的回撥函式。傳入返回後的資料,以及包含成功程式碼的字串
error:是一個方法,請求失敗時呼叫此函式。傳入XMLHttpRequest物件
eg:

<script>
document.getElementById("search").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("GET", "ygc.php?number=" + document.getElementById("keyword").value);
    request.send();
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                document.getElementById("searchResult").innerHTML = request.responseText;
            } else {
                alert("發生錯誤:" + request.status);
            }
        } 
    }
}

document.getElementById("save").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("POST", "ygc.php");
    var data = "name=" + document.getElementById("staffName").value 
                      + "&number=" + document.getElementById("staffNumber").value 
                      + "&sex=" + document.getElementById("staffSex").value 
                      + "&job=" + document.getElementById("staffJob").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send(data);
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                document.getElementById("createResult").innerHTML = request.responseText;
            } else {
                alert("發生錯誤:" + request.status);
            }
        } 
    }
}
</script>