Archive

Posts Tagged ‘Ajax’

Google Map 地圖定位

一月 10th, 2008
3 comments

Google Map 提供的 API 實在是強大又好用，結合 GPS 很快就可以做出地圖定位的網站，將之前的 Urmap 範例修改了一下，成為 Google Map 地圖定位系統，為了能夠展示所以將座標先寫好讓它自己動態更新，其中按下停止按鈕會畫出所有紀錄點的連線，可做路徑追蹤。

Google Map API 網路上的資源已經相當豐富了，在此就不多敘述，比較特別的是畫折線(polyline)的部份，如果用原始的 GPolyline 方法來畫，大概幾十個點就需要運算很久，甚至導致瀏覽器 crash，所以 API 後來又加入了編碼折線(encodedPolyline)的功能，先將所有的點用特定演算法轉換成一串文字符號，再丟給 GPolyline.fromEncoded 顯示，幾乎是馬上就顯示出來了，差很多喔，而這個編碼演算法也已經有人寫好囉！請看：Encoding polylines for Google Maps

Ajax, Other, 程式筆記 , , ,

JavaScript 讀取外部文字檔

八月 3rd, 2007
1 comment

想要利用 JavaScript 來讀取一個檔案內容，搜尋到的方法很多都是用 ActiveX 物件來達成，這樣缺點就只能 IE Only 了。不過後來發現其實用 Ajax 就可以達成了。

搭配 JQuery 使用：


$.get('content.txt', function(data){
	alert(data);
});

這裡透過 Ajax 發出 GET Request 到 content.txt，就會直接將檔案的內容傳回輸出，很簡單吧^^

但是由於 Ajax 考慮到安全性，所以只能作用在同網域底下。如果要讀的檔案是遠端主機上的呢？這時可以利用其他程式當作中間人，例如透過 PHP 去取得不同網域下的檔案。

JS 內容:


$.get('readfile.php', function(data){
	alert(data);
});

PHP 內容:


<?php
echo file_get_contents("http://aaa.com.tw/content.txt");
?>

Ajax, Other, 程式筆記 , , ,

jQuery Plugin

五月 10th, 2007
No comments

jQuery 是個不錯的 JavaScript library，可以省略不少繁瑣的細節，且檔案大小又不大，最近都用它來開發網頁。同時也注意到了一些好用的 Plugin，主要是應用在 Ajax 上，有現成又好用的就不用再自己寫囉！

  1. Validation
    可用來做即時欄位驗證
  2. History
    無法回上一頁算是 Ajax 的一項缺點，用這個 plugin 可以做出回上頁的效果
  3. jEditable
    提供就地編輯(Edit In Place)的功能
  4. ajaxFileUpload
    利用隱藏 iframe 達到不換頁上傳檔案
  5. Ajax File Manager
    加強 tinymce 這個線上編輯器，可瀏覽檔案及上傳檔案
  6. Interface
    提供非常大量的動態效果，必試。
  7. Form
    使用 Ajax 送出表單資料

Ajax, 程式筆記 , , ,

[Ajax] 實作 Gmail 的載入訊息

五月 2nd, 2006
8 comments

進入 Gmail、Calendar 等 Google 的服務，時常會看到右上角有個紅底白字的「載入中...」，拿來當第一個 Ajax 的練習。
基本作法就是利用一個 DIV 區塊，預設為不顯示，等到呼叫 JavaScript 建立 XMLHttpRequest 時，將 DIV 區塊設為顯示，最後等伺服器後端傳回訊息時再隱藏區塊即可。這個範例是使用者輸入訊息，由 PHP 處理並顛倒字串印出。
Demo
網頁部分：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>Ajax Test</title>
<script type="text/javascript">
var ajax;

function createHttpRequest() {
    if (window.ActiveXObject) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                return null;
            }
        }
    } else if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return null;
    }
}

function ajaxSendRequest(url) {
	var msg = document.getElementById('msg').value;
    document.getElementById('loading').style.display = "block";
    ajax = createHttpRequest();
    ajax.onreadystatechange = showResult;
    ajax.open("GET", url + '?message=' + msg);
    ajax.send("");
}

function showResult() {
    if (ajax.readyState == 4 && ajax.status == 200) {
        document.getElementById('loading').style.display = "none";
		document.getElementById('echo_msg').innerHTML = ajax.responseText;
    }
}
</script>
<style type="text/css">
#loading {
	position: absolute;
	width: 50px;
	height: 20px;
	line-height: 20px;
	top: 5px;
	right: 5px;
	font-size: 12px;
	background-color: #C44;
	color: #FFF;
	text-align: center;
}
</style>
</head>

<body>
<div id="loading" style="display:none">載入中...</div>
請輸入英文訊息：<input type="text" id="msg" /><br />
<div id="echo_msg"></div>
<input type="submit" id="Submit" value="送出" onclick="ajaxSendRequest('echo.php')" />
</body>
</html>

PHP 部分：


<?php
$message = $_GET['message'];
sleep(2); // 睡一下吧,不然"載入中"會太快消失
echo strrev($message);
?>

Ajax, 程式筆記 , ,