Archive

Archive for the ‘AJAX’ Category

使用 YUI 結合 Yahoo! Maps AJAX API

January 19th, 2009
No comments

最近把之前比賽的程式拿出來用,結果發現竟然不能正常work了!

後來發現是因為YUI所始使用的Library會跟Yahoo Map所使用的Library衝突導致

Joseph 教我使用 Anonymous function + YUI Get 的方式載入

function() {
 　　YAHOO.util.Get.Script('<YUI script url>');
}();
function() {
　　YAHOO.util.Get.Script('<Map script url>');
}();

不過後來在網路上找到另外一篇文章,就是獨立載入Yahoo! MAP AJAX API的JS

這樣也不會發生重複載入的問題囉! 參考網站Using YUI with the Yahoo! Maps AJAX API

1. 不要使用原本Maps AJAX API’s 所引用的檔案 (如：http://tw.api.maps.yahoo.com/ajaxymap?v=3.8&appid=YourAppId). 底下將會使用YUI的Library.

2. 接著把Maps AJAX API所會使用到YUI的檔案引用進來：

* Yahoo Global Object
* Dom Collection
* Event Utility
* Drag & Drop Utility
* Animation Utility

3. 接著把Yahoo! Maps AJAX的基本js引用進來即可!
http://l.yimg.com/f/i/tw/map/api/ymapapi_3_8_0_6_twopen.js?081231

程式碼：

<!–load YUI from your own install folder if possible; otherwise:–>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"> </script>
<!–set your application ID variable:–>
<script type="text/javascript">
var YMAPPID = "YourAppId";
</script>
<!–Include core Maps AJAX API script:–>
<script type="text/javascript"
src="http://l.yimg.com/f/i/tw/map/api/ymapapi_3_8_0_6_twopen.js?081231">
</script>

這樣就可以正常使用囉 :)

Squall AJAX, YUI , ,

自動重新更新網頁資料

May 6th, 2007
No comments

想要做出像Google Doc,或是Gmail,那種免重新整理網頁,卻又可以自動更新資料的功能嗎?

利用 XMLHttpRequest 搭配 timer 就可以做到囉! (當然僅有重新整理的部份)

<div id="showServerData"> </div>

原始網頁顯示的地方

<script type="text/javascript" language="javascript">

    var http_request = false;

    function macheRequest(url) {

        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,…
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');

            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
            return false;
        }
        http_request.onreadystatechange = alertInhalt;
        http_request.open('GET', url, true);
        http_request.send(null);

    }

    function alertInhalt() {

        if (http_request.readyState == 4) {
              //  alert(http_request.responseText);

document.getElementById("showServerData").innerHTML = http_request.responseText;

        }

    }

//getServerData.php (抓取server端的資料)
//1000 (為多久自動更新一次)
iv = setInterval("macheRequest('getServerData.php')",1000);

</script>

參考網站:Ajax Community Forum

Squall AJAX