AJAX執行個體教程:非同步呼叫的程式

文章簡介：Ajax(Asynchronous JavaScript and XML)，使使用者在使用Web程式時，不用在來來回回的Post了，可以近乎即時的從用戶端收到伺服器返回的資訊，而無需重新整理，極大的非富了使用者的操作體驗。

Ajax(Asynchronous JavaScript and XML)，使使用者在使用Web程式時，不用在來來回回的Post了，可以近乎即時的從用戶端收到伺服器返回的資訊，而無需重新整理，極大的非富了使用者的操作體驗。

XMLHttpRequest對象是Ajax的核心對象

不同的瀏覽器，建立對象的方式不同這裡以IE為例
var request = new ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest對象的方法和屬性：

open(request-type,url,asynch,username,password)：建立到伺服器的新請求。
request-type 發送請求的類型：get,post,head
url 要串連的url
asynch 選擇性參數，如使用非同步串連為true，如使用同步串連為false，預設值為true
username 選擇性參數，如果需要身分識別驗證，則可以在此指定使用者名稱，無選擇性參數
password 選擇性參數，如果需要身分識別驗證，則可以在此指定口令，無選擇性參數

send(content)：向伺服器發送請求。
content 要發送的內容

abort()：退出當前請求。

readyState：提供當前 HTML 的就緒狀態。
0：請求未初始化
1：請求已經建立，但是還沒有發送（還沒有調用 send()）
2：請求已發送，正在處理中（通常現在可以從響應中擷取內容標題）
3：請求在處理中，通常響應中已有部分資料可用了
4：響應已完成

status：提供當前HTML的狀態代碼
401：未經授權
403：禁止訪問
404：沒找到訪問頁
200：正常

XMLHttpRequest對象的Head請求

取得Response的Header
request.getAllResponseHeaders();
request.getResponseHeader("Server");
request.getResponseHeader("Connection");
request.getResponseHeader("Date");
request.getResponseHeader("Content-Length");
request.getResponseHeader("Keep-Alive");
request.getResponseHeader("X-Cache");
request.getResponseHeader("Content-Type");

設定Request的Header
request.setRequest("Server") = "";
request.setRequest("Connection") = "";
request.setRequest("Date") = "";
request.setRequest("Content-Length") = "";
request.setRequest("Keep-Alive") = "";
request.setRequest("X-Cache") = "";
equest.setRequest("Content-Type") = "";

一、非同步呼叫的程式樣本

<script language="JavaScript">

var request = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHttpRequest對象
function sendRequest()
{
url = "http://www.webjx.com/web_design.asp?Name=" + Value; //設定要發送的Url，發送的值為索引值對

request.open("get",url,true); //調用open方法

request.onreadystatechange = showMessage; //設定伺服器要回調的方法
request.send(null); //發送
}

function showMessage()
{
if(request.readyState == 4 && request.status == 200)
{
alert(request.responseText);
}
}
</script>
二、同步調用程式樣本

<script language="JavaScript">

var request = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHttpRequest對象

function sendRequest()
{
url = "http://www.webjx.com/web_design.asp?Name=" + Value; //設定要發送的Url，發送的值為索引值對

request.open("get",url,false); //調用open方法


request.send(null); //發送


alert(request.responseText);

}

</script>
非同步請求程式樣本說明：程式首先建立了XMLHttpRequest對象，之後以非同步方法執行請求，onreadystatechange是在請求狀態發生改變時，伺服器要回調的客端方法，要在send()方法之前設定，在showMessage()方法裡，當readState的狀態為4且 status為200時，執行操作同步請求與非同步請求的差別在於，同步請求時，用戶端要行進等待，當伺服器處理完請求後再在執行以下的程式，而非同步請求不必如此，用戶端的程式在請求發出之後就可以繼續執行，而不必等待，直到伺服器處理後，再回調用onreadystatechange註冊的方法。

三、請求Head的程式樣本

<script language="JavaScript">
var request = new ActiveXObject("Microsoft.XMLHTTP"); //建立XMLHttpRequest對象

function sendRequest()
{
url = "http://www.webjx.com/web_design.asp"; //要發送的Url

request.open("head",url,true); //調用open方法

request.onreadystatechange = showMessage; //設定伺服器要回調的方法
request.send(null); //發送
}

function showMessage()
{
if(request.readyState == 4 && request.status == 200)
{
alert(request.getAllResponseHeaders()); //取得Header的值
}
}

</script> 這個方法與上一個方法的不同之處就在於open()方法的第一個參數是head，我們可以重寫showMessage以取得相應的Head值

function showMessage()
{
if(request.readyState == 4 && request.status == 200)
{
alert(request.getResponseHeader("Server"));
alert(request.getResponseHeader("Connection"));
alert(request.getResponseHeader("Date"));
alert(request.getResponseHeader("Content-Length"));
alert(request.getResponseHeader("Keep-Alive"));
alert(request.getResponseHeader("X-Cache"));
alert(request.getResponseHeader("Content-Type"));
}
} 四、發送XML資料

XMLHttpRequest對象可向伺服器發送XML格式的資料，但這樣做會降低程式的響應速度，因為與普通的文本相比，XML格式的資料，要處理更多額外的東西，建議沒有必要的情況下，不要使用XML

發送XML資料的程式樣本

<script language="JavaScript">

var request = new ActiveXObject("Microsoft.XMLHttpRequest"); //建立XMLHttpRequest對象

function sendXmlRequest()
{
xml = ""; //XML資料

url = "http://www.webjx.com/web_design.asp"; //設定發送的Url

request.open("post",url,false); //調用open方法

request.setRequestHeader("Content-Type","text/xml"); //設定發送請求的頭

request.send(xml);

//要執行的程式
}
</script>