作者TonyQ (骨頭)
看板Ajax
標題[請益]AJAX 運用
時間Wed Dec 27 12:30:35 2006
之前一直都是用request做呼叫的方式，
最近用function把我比較常用的處理部份包起來，
把討厭的傳值部分用Object物件作集合處理，
然後再把call back分成執行成功和網頁開啟失敗兩個模式，
另外可以在分POST和GET兩種處理。
話說聽說有很多AJAX的lib可以用，不過感覺都蠻高深的。哈
小弟我還是比較喜歡自己刻東西來用...(汗)
如果有興趣能看完這些贅碼的話，還請大大請多多指教(汗)
這邊的討論感覺上很不像一般的程式討論區，文章很少實際code的討論...
是因為AJAX的lib太成熟了，還是AJAX太簡單......
btw, 剛看到web_design版規是整個把javascript整個畫到AJAX板來了。XD
我所寫的基本模型執行的範例碼在下面，最下面則是我的簡單function。
────────────────────────────────
function check()
{
var ValueObj=new Object();
if(!checkValue('school','請填寫學校',0)) return false;
ValueObj["school"]=document.getElementById('school').value;
if(!checkValue('name','請填寫姓名',0)) return false;
ValueObj["name"]=document.getElementById('name').value;
if(!checkValue('code','請輸入檢查碼',0)) return false;
ValueObj["code"]=document.getElementById('code').value;
var cb_ok=function(str){ //str表示request取得的資料
document.getElementById('result').innerHTML=str;
}
var cb_err=function(str){
document.getElementById('result').innerHTML="網站目前無法開啟!";
}
send_AJAX_Form("action_target.asp",ValueObj,"POST",cb_ok,cb_err);
//目標網頁 可以改成GET
}
───myAJAx.js ───────────────────────
/* written by Tony1223 */
function getXMLHttpRequest(){
var request;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
return request;
}
function send_AJAX_Form(url,valueObj,method,cb_ok,cb_err){
if(url&&valueObj&&method&&cb_ok&&cb_err){
var request=getXMLHttpRequest();
if(method=='POST'){
var requestValue="";
var length=0;
for (var i in valueObj)
{
if(requestValue!="") requestValue+="&";
requestValue+=i+"="+escape(valueObj[i]);
length+= parseInt(escape(valueObj[i]).length);
}
request.open("POST", url, true);
request.setRequestHeader("content-length",length);
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
request.onreadystatechange = function(){
callBackFunction(request,cb_ok,cb_err);
};
request.send(requestValue);
}else{ // "GET" Mode
var requestValue="";
for (var i in valueObj)
{
if(requestValue!="") requestValue+="&";
requestValue+=i+"="+escape(valueObj[i]);
}
if(requestValue.length>256){
alert('長度超過Get上限,無法送出!');
return false;
}
request.open("GET", url+"?"+requestValue, true);
request.onreadystatechange = function(){
callBackFunction(request,cb_ok,cb_err);
};
request.send(null);
}
}else{
alert('<url>,<valueObj>,<method>,<cbfunction>');
}
}
function callBackFunction(request,cb_ok,cb_err) {
if (request.readyState == 4) {
if (request.status == 200) {
cb_ok(request.responseText);
} else{
cb_err(request.responseText);
}
}
//alert('callback');
}
--
String temp="relax"; | Life just like programing
while(buringlife) String.forgot(temp); | to be right or wrong
while(sleeping) brain.setMemoryOut(); | need not to say
stack.push(life.running); | the complier will
stack.push(scouting.buck()); | answer your life
stack.push(bowling.practice()); | Bone
everything
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.134.27.68
※ 編輯: TonyQ 來自: 220.134.27.68 (12/27 12:30)
※ 編輯: TonyQ 來自: 220.134.27.68 (12/27 12:33)
※ 編輯: TonyQ 來自: 220.134.27.68 (12/27 12:35)
※ 編輯: TonyQ 來自: 220.134.27.68 (12/27 13:37)
1F：推 easyman:我ㄧ開始也是自己寫, 不過後來用dojo比較方便 12/30 23:42