DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> AJAX實例教程:異步調用的程序
AJAX實例教程:異步調用的程序
編輯:關於JavaScript     

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.poluoluo.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.poluoluo.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.poluoluo.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.poluoluo.com/web_design.asp"; //設置發送的Url

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

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

request.send(xml);

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved