DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 使用xmlHttp結合ASP,實現網頁的異步調用
使用xmlHttp結合ASP,實現網頁的異步調用
編輯:AJAX詳解     

通過XMLHttp和ASP的結合,我們可以輕松完成網頁的異步調用。
代碼如下:
1.新建Display.ASP(這是前台顯示頁面)
注意XMLhttp.readyState的4個屬性
1:LOADING;2:LOADED;3:INTERACTIVE;4:COMPLETED

<%@ Language=VBScript %>
<Html>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<script language="Javascript">
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
function fnDo(ID)
{
    var xmlDom = new ActiveXObject("MsXML2.DOMDocument");         
    var strURL = "GetInfo.ASP?ID=" + ID;
        
    XMLhttp.Open("POST",strURL , true);
    XMLhttp.onreadystatechange = fnRun;
        
    xmlhttp.Send(XMLDom);

    divTest.innerHtml = "Loading..."
}
//--------------------------------------------------------
function fnRun()
{
    var state = XMLhttp.readyState;
        
    var xmlDom = new ActiveXObject("MsXML2.DOMDocument");
        
    if (state == 4)
    {
        xmlDom.loadXML(xmlhttp.responseXML.XML);
        //alert(xmlDom.documentElement.selectSingleNode("//objXML").text)
        var getInfo = xmlDom.documentElement.selectSingleNode("//objXML").text;
        divTest.innerHtml = getInfo
    }        
}
</script>
<BODY>
<input type=button value="異步調用" >
<input type=text id=txtInput>
<DIV id=divTest></DIV>

<P> </P>

</BODY>
</Html>

2.在建立GetInfo.ASP(這是後台處理頁面)
<%
Dim sID,objResult

sID = Trim(Request("ID"))
"sID = 28

Set objResult = Server.CreateObject("MSXML2.DOMDocument")
objResult.loadXML ("<objXML></objXML>")
"**************************************************************

"**************************************************************

objResult.selectSingleNode("objXML").text = "Get:" & sID

Response.ContentType = "text/XML"
objResult.save (Response)
Response.End

Set obJSch = Nothing
Set objResult = Nothing
%>

3.運行Display.asp頁面,在文本框裡輸入內容,點擊按鈕,可以看到Loading的提示,隨後在不刷新頁面的情況下得到了文本框裡的內容。當然你也可以在GetInfo.ASP那個頁面裡根據發送的參數做一些復雜的出來,隨後把結果返回出來。

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