下面是AJAX實例教程:異步調用的程序的相關內容，文章教程主要講述與AJAX 異步 相關的一些技術與知識，更多的內容歡迎大家訪問http://www.survivalescaperooms.com,獲取更多最新教程,下面是教程講解：

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>

關于AJAX實例教程:異步調用的程序的內容寫到這里就結束啦，您可以收藏本頁網址http://www.survivalescaperooms.com/web/a/2018090581377.shtml方便下次再訪問哦。