網頁AJAX技術,非Micorosft AJAX
在ASP.NET裡面有提供UpdatePanel來達成非同步的JavaScript與XML技術(AJAX),但是直接使用此方式固然方便,但是要是此頁面非常複雜又有多個Events都必須觸發PostBack的話,那麼會使的該頁面的效能極差無比,這時候就是使用XMLHttpRequest來完成的最好時機了。
舉幾個例子來看
1. 生日 → 如果要使用另外一個網頁來驗證回傳星座(當然也可以直接使用JavaScript來完成)
2. 帳號驗證
3. XML格式的資料清單
下面有幾種寫法都可以達到相同的目的
方法一
方法二
方法三(必須使用Google API,至於Google API如何使用在此文不在贅述)
方法四(使用jQuery,這個寫法最簡單)
本文附件 :
AXP012000.pdf
舉幾個例子來看
1. 生日 → 如果要使用另外一個網頁來驗證回傳星座(當然也可以直接使用JavaScript來完成)
2. 帳號驗證
3. XML格式的資料清單
下面有幾種寫法都可以達到相同的目的
方法一
var 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("帳號不存在"); } }
方法二
var 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如何使用在此文不在贅述)
function 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,這個寫法最簡單)
function 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
留言
張貼留言
您好,我是 Lawrence,這裡是我的開發筆記的網誌,如果你對我的文章有任何疑問或者有錯誤的話,歡迎留言讓我知道。