夕口技術錄

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

[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_fun.js] <- Ajax core
function getXHR()
{
if(window.ActiveXObject){
return new ActiveXObject(“Microsoft.XMLHTTP");
}else if(window.ActiveXObject){
return new ActiveXObject(“Msxml2.XMLHTTP.4.0″);
}else if(window.ActiveXObject){
return new ActiveXObject(“Msxml2.XMLHTTP");
}else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else
throw { name: ‘GetRequestObject’, message: ‘XMLHttpRequest is not available, xajax is disabled’ }
}//getXHR()

function getXDOM(xml)
{
try //Internet Explorer 6
{
xmlDoc=new ActiveXObject(“Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(xml);
}//try
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(xml,"text/xml");
}//try
catch(e)
{

try //IE7
{
xmlDoc=new ActiveXObject(“MSXML2.DOMDocument");
xmlDoc.loadXML(xml);
}//try
catch(e)
{
alert(e.message);
return;
}//catch
}//catch
}//catch
return xmlDoc;
}

Ajax

1 responses to “[Ajax] – 實作範例”

  1. 夕口 2010/11/30 於 10:03:12

    如回傳值為 選項，
    就是如下完整回傳，
    不能無法接到

    回應

發表留言