網頁AJAX技術,非Micorosft AJAX

在ASP.NET裡面有提供UpdatePanel來達成非同步的JavaScript與XML技術(AJAX)，但是直接使用此方式固然方便，但是要是此頁面非常複雜又有多個Events都必須觸發PostBack的話，那麼會使的該頁面的效能極差無比，這時候就是使用XMLHttpRequest來完成的最好時機了。

舉幾個例子來看
1. 生日 → 如果要使用另外一個網頁來驗證回傳星座(當然也可以直接使用JavaScript來完成)
2. 帳號驗證
3. XML格式的資料清單
下面有幾種寫法都可以達到相同的目的

方法一

javascriptvar xmlhttp = false;
 
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
        xmlhttp = false;
    }
}
if (!xmlhttp && window.createRequest) {
    try {
        xmlhttp = window.createRequest();
    } catch (e) {
        xmlhttp = false;
    }
}
 
//呼叫此Method來進行帳號驗證
function GetAccount() {
    xmlhttp.open("POST", "Account.aspx?time=" + new Date().getTime(), true);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            output = xmlhttp.responseText;
            if (output) {
                //資料回傳時呼叫
                callbackCheckAccount(output);
            }
        }
    }
    xmlhttp.send(null);
}
//檢查會員帳號
function callbackCheckAccount(result) {
    if (result != "") {
        alert("帳號已存在");
    }
    else {
        alert("帳號不存在");
    }
}   

方法二

javascriptvar httpRequest = false;
//呼叫此Method來進行帳號驗證
function GetAccount() {
    if (window.XMLHttpRequest) {
        httpRequest = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        try {
            httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (e) {
            try {
                httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (e) { }
        }
    }
    if (!httpRequest) { alert("Error"); return false; }
    httpRequest.onreadystatechange = callbackCheckAccount;
    httpRequest.open("GET", "Account.aspx?time=" + new Date().getTime(), true);
    httpRequest.send(null);
}
 
//檢查會員帳號
function callbackCheckAccount() {
    if (httpRequest.readyState == 4) {
        var result = httpRequest.responseText;
        if (result.length != 0)
            alert("帳號已存在");
        else
            alert("帳號不存在");
    }
}

方法三(必須使用Google API，至於Google API如何使用在此文不在贅述)

javascriptfunction GetTravelMarker() {
    //取得XML檔案
    GDownloadUrl("MapFunction.aspx?time=" + Math.random(), function(doc) {
        //解析XML文件
        var xmlDoc = GXml.parse(doc);
 
        //獲取地標節點
        var markers = xmlDoc.documentElement.getElementsByTagName("m");
 
        var msg = "";
        var polylines = new Array(markers.length);
 
        for (var i = 0; i < markers.length; i++) {
            //獲取經緯度資訊
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat, lng);
 
            polylines[i] = point;
 
            msg += lat + "," + lng + "\n";
 
        }
    });
}

方法四(使用jQuery，這個寫法最簡單)

javascriptfunction GetTravelMarker() {
    jQuery.get("TravelSearchXML.aspx?time=" + Math.random(), {}, function(data) {
        jQuery(data).find("item").each(function() {
            var marker = jQuery(this);
            //獲取經緯度資訊
            var lat = parseFloat(marker.attr("lat"));
            var lng = parseFloat(marker.attr("lng"));
        });
    });
}

本文附件 :
AXP012000.pdf