夕口技術錄

專業上的小常識，備而用之~

Category Archives: Ajax

[Ajax] – 實作範例

1 則迴響 Posted by 於 2010/11/30

<head>
<script language="JavaScript" src="js/ajax_fun.js"></script>
<script language=’javascript’>

function search_ipowner(search_id)
{
http_request = getXHR();
http_request.open(‘GET’,’./?action=module&fun=<!–{$status.path.fun}–>&permit=search&ip=’+document.getElementById(“ip"+search_id).value,false); <- 同步處理
http_request.send(null);
info = http_request.responseText;
xmlDoc = getXDOM(info); <- 回傳值為 xml 格式接法

echo “
<data>
<name>".htmlspecialchars($record[“record"][“name"])."</name>
</data>
“;

if(info!="")
{
try{
document.getElementById(“name"+search_id).value = xmlDoc.getElementsByTagName(“name")[0].childNodes[0].nodeValue;
}
catch(e)
{
document.getElementById(“ipowner_chk").innerHTML = “<br />無任何對應資料!!!";
}
}//if
else document.getElementById(“ipowner_chk").innerHTML = “<br />無任何對應資料!!!";
} // function search_ipowner

function search_ifname(search_id,ifname_enc)
{
http_request = getXHR();
http_request.open(‘GET’,’./?action=module&fun=<!–{$status.path.fun}–>&permit=search&deviceid=’+document.getElementById(“deviceid"+search_id).value+’&sno=’+search_id+’&ifname_enc=’+ifname_enc,false);
http_request.send(null);
info = http_request.responseText; <- 回傳值為 Data 格式接法
if(info!="")
{
try{
document.getElementById(‘ifname_option’+search_id).innerHTML = info;
}
catch(e)
{
document.getElementById(“ifname_option"+search_id).innerHTML = “&nbsp;無任何對應資料!!!";
}
}
else document.getElementById(“ifname_option"+search_id).innerHTML = “&nbsp;無任何對應資料!!!";
} // function search_ifname
</head>

<body>
<input type="text" size="18″ name="ip<!–{$record[loop].sno}–>" id="ip<!–{$record[loop].sno}–>" value="<!–{$record[loop].ip}–>">&nbsp;<input type="button" value="查詢IP保管人" onclick="javascript: search_ipowner(<!–{$record[loop].sno}–>);"><span id="ipowner_chk"></span>

<select name="deviceid<!–{$record[loop].sno}–>" id="deviceid<!–{$record[loop].sno}–>" onclick="javascript: search_ifname(<!–{$record[loop].sno}–>,'<!–{$record[loop].ifname_enc}–>’);">
<option value=""></option>
<!–{section name=nd loop=$rt.network_device}–>
<option value="<!–{$rt.network_device[nd].id}–>"<!–{if $rt.network_device[nd].id == $record[loop].deviceid}–> selected<!–{/if}–>><!–{$rt.network_device[nd].name}–></option>
<!–{/section}–>
</select>
<span id="ifname_option<!–{$record[loop].sno}–>"></span>
<script language=’javascript’>search_ifname(<!–{$record[loop].sno}–>,'<!–{$record[loop].ifname_enc}–>’);</script>
</body>
閱讀全文

Ajax

[Ajax] – 直接傳回結果+讀取cache file 範例

4 則迴響 Posted by 於 2009/04/07

使用者端網頁：index.html

<head>
<script language="Javascript">

http_request = false ;
function refresh() {
http_request = false ;
if (window.XMLHttpRequest) { // Mozilla, Safari,…
http_request = new XMLHttpRequest();
//http_request.overrideMimeType(‘text/xml’);
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject(“MSXML2.XMLHTTP.3.0″);
}
http_request.onreadystatechange = updatePage;
http_request.open(‘GET’, ‘./get_user_info.php‘, true);
http_request.send(null);

  1. open() 的第一個參數是 HTTP 的方法，看你的需要，以及 web server 支援的情形，你可以使用 GET、POST、或者 HEAD。建議使用大寫以符合 HTTP 的標準。
  2. open() 的第二個參數是你希望取得的資源的 URL。由於安全的機制， 你只能從同一個 web server 上取得資源。
  3. open() 的第三個參數是代表這個呼叫是不是非同步（即 AJAX 的 第一個 A）。因此，在大部分的情形下都是設為 true 代表在跟遠端取得 資源的同時，browser 可以繼續執行 Javascript 的內容。這個時候其實有兩件 事情同時在進行，一個是從遠端取得資料，另一個是繼續執行 JavaScript 的內容， 或者使用者可以繼續處理網頁上的資料，這也就是非同步的定義。

// 5秒自動重整讀取
setTimeout(“refresh()", “600000″) ;
}

function updatePage() {
if (http_request.readyState < 4) {
document.getElementById(“shows“).innerHTML = “資料載入中，請稍後…";
}
if (http_request.readyState == 4) {
var response = http_request.responseText;
if(response==1){
document.getElementById(“shows“).innerHTML = “&nbsp;";
}
else{
document.getElementById(“shows“).innerHTML = response;
}
}
事件處理函數首先要檢查的是目前 web server 對於我們之前 送出去的 http_request 的處理狀態為何。處理狀態的屬性名稱為 readyState， 它所有可能的值為

  • 0 (尚未初始化; 還沒呼叫 open())
  • 1 (載入中; http_request 已經設定好了，但是還沒呼叫 send())
  • 2 (載入完成; http_request 已經送給 server 了，server 已經開始 處理了，你可以取得 content header 了。)
  • 3 (可以互動的; http_request 已經部份完成了，所以有可能取得 部份處理完的資料)
  • 4 (完成的; compelte)

接收來自 web server 的資料，http_request 提供兩種方式來 存取資料：

  • http_request.responseText 也就是 web server 回傳的資料是以一串的文字，你需要利用字串的處理函數。
  • http_request.responseXML 也就是 web server 回傳的資料是一份 XMLDocuemnt 的物件，你可以利用 JavaScript 的 DOM APIs 來存取 這份 XML 物件。

}

refresh();

</style>
</head>

<body>

<div id=’shows‘></div>

</body>

Ajax 動作程式 get_user_info.php

########### Step.1 -> 十分內讀取第二次時，則接 cache file 內容
//->SIKO : Read Cache File
$filename = “../../tmp/".$ecstart[“user"][“ruserid"]."@@.htm";
if (file_exists($filename)) {

$now_time = time() ;
$file_time = date(“Y-m-d H:i:s.", filemtime($filename));
if($now_time – ecstart_unix_timestamp($file_time) < 600){
//->SIKO : Cache file time < 10m than read cache file
//echo $now_time – ecstart_unix_timestamp($file_time);
$handle = fopen($filename, “r");
echo fread($handle, filesize($filename));
fclose($handle);
exit;
}
}
########### Step.2-> 第一次執行時，則由資料庫拉資料，直接傳回結果
$Record = SQL…..

//第一次執行時直接傳回結果
echo $Record
########### Step.3 -> 將上面結果寫入 cache file ，以利第二次並十分內接資料用
//先將資料寫到tmp資料夾內
$content = iconv(“big5″,"utf8″,$content); //Ajax 中文 亂碼 問題
$fileHandle = fopen($filename, “w+");
fwrite($fileHandle, $content);
fclose($fileHandle);
//print_r($path_root."/www/html");

//chown
$cmd = “/bin/chown -R netsecure.netsecure “.$filename;
system($cmd);

//chmod
$cmd = “/bin/chmod -R 755 “.$filename;
system($cmd);

Ajax

[Study][News] – Ajax框架jQuery推新版

發表留言 Posted by 於 2009/02/06

再花個時間來 study 一下，
看是否能當做下一個開發架講…
——————————————————————– 以下為消息轉載文

閱讀全文

Ajax, jQuery

[Ajax] – XMLHTTPRequest的屬性和方法簡介

發表留言 Posted by 於 2008/04/22

設計AJAX時使用的一個重要的技術（工具）就是XMLHTTPRequest。
XMLHttpRequest對象是當今所有AJAX和Web 2.0應用程序的技術基礎。

1、XMLHTTPRequest對象什麼是？
閱讀全文

Ajax

[Ajax] – 學習

發表留言 Posted by 於 2008/04/05

Ajax 公司的同仁早就在使用，
但我自已方面總是找盡各種理由未有真的好好的去學習過，
這次遠傳的案子的一個二層式下拉式選單功能，
PM希望我能借由此功能練習，
也因此我只好硬著頭表去實作看看，
到最後發現原來難的不是Ajax技術，
而是我一直有在使用的JavaScript，
也借由這次的練習，
才讓我知Ajax其實滿好玩的，
也讓我知對於JavaScript 的功能有多差，
此次的功能是參考下面幾個不錯的範例得來的靈感。

Displaying XML Files

利用 AJAX 來動態呈現選項的結果

JavaScript print_r

Javascript 如何判斷下拉式選單Select有無被選取

Ajax