對這文章發表回應
發表限制: 非會員 可以發表
發表者： 冷日 發表時間： 2011/12/12 3:47:24
我們經常要使用到檢索、查詢或是資料庫處理。
但有時候系統繁忙或是資料量龐大時，畫面常常就是一片空白！？
為了要讓用戶不會誤以為系統當機了，Loading（或是Searching）提示就很重要囉。
可是上一篇實做上有點不足，至少XMLHttpReq這個東西不是預設就有低（可以參閱Ajax簡介）！
後來參閱了這一篇：为什么我的 XMLHttpReq.readyState 总是返回1 - Java / Java EE以後，冷日整理了一個自己的版本，這裡作個紀錄。
先來看看JavaScript的所有Code部份：
分段說明：
上面這一段基本上，就是自己實做一個原生的AJAX（XMLHttpReq）。
然後把原本的Submit改用loadfirst function來處理。
這裡比較要注意的幾點：
1.XMLHttpReq是可以用POST低！（大多數的範例都是GET）
2.XMLHttpReq要走POST的話，記得要加『setRequestHeader』！
3.XMLHttpReq POST 的時候透過send這個method傳遞參數。
4.最後告訴瀏覽器，當XMLHttpReq搞定的時候，去呼叫loadcallback。
這裡就是負責把船回來的東西給Show出來囉。
最懶得方法就是像冷日這一招：document.write！
把所有XMLHttpReq回來的東西重新寫出一次
但有時候系統繁忙或是資料量龐大時，畫面常常就是一片空白！？
為了要讓用戶不會誤以為系統當機了，Loading（或是Searching）提示就很重要囉。
可是上一篇實做上有點不足，至少XMLHttpReq這個東西不是預設就有低（可以參閱Ajax簡介）！
後來參閱了這一篇：为什么我的 XMLHttpReq.readyState 总是返回1 - Java / Java EE以後，冷日整理了一個自己的版本，這裡作個紀錄。
先來看看JavaScript的所有Code部份：
<script type="text/javascript">
var XMLHttpReq;
var targetSeId;
function createXMLHttpRequest(){
if(window.XMLHttpRequest) {//Mozilla
XMLHttpReq=new XMLHttpRequest();
}
else if(window.ActiveXObject){//IE 瀏覽器
try {
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP ");
} catch (e){
try{
XMLHttpReq=new ActiveXObject("Micrsost.XMLHTTP ");
}catch(e){}
}
}
if(!XMLHttpReq){
alert("無法創建 XMLHttpRequest 對象！");
}
}
function loadfirst(){
// alert("開始加載...");
document.getElementById("loading").style.visibility = 'visible';
var url="/FullTextSearch.jsp";
var param = document.getElementById("searchString").value;
// alert(param);
createXMLHttpRequest();
if(XMLHttpReq){
XMLHttpReq.open("POST",url,true);
// alert("open");
XMLHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XMLHttpReq.send("searchString=" + param);
XMLHttpReq.onreadystatechange=loadcallback;
}
}
function loadcallback(){
// alert("數據返回...");
if(XMLHttpReq.readyState==4){
if(XMLHttpReq.status==200){
// alert(XMLHttpReq.responseText);
document.write(XMLHttpReq.responseText);
}else{
alert("返回不正常"+XMLHttpReq.statusText);
}
}
}
</script>
分段說明：
var XMLHttpReq;
var targetSeId;
function createXMLHttpRequest(){
if(window.XMLHttpRequest) {//Mozilla
XMLHttpReq=new XMLHttpRequest();
}
else if(window.ActiveXObject){//IE 瀏覽器
try {
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP ");
} catch (e){
try{
XMLHttpReq=new ActiveXObject("Micrsost.XMLHTTP ");
}catch(e){}
}
}
if(!XMLHttpReq){
alert("無法創建 XMLHttpRequest 對象！");
}
}
上面這一段基本上，就是自己實做一個原生的AJAX（XMLHttpReq）。
function loadfirst(){
// alert("開始加載...");
document.getElementById("loading").style.visibility = 'visible';
var url="/FullTextSearch.jsp";
var param = document.getElementById("searchString").value;
// alert(param);
createXMLHttpRequest();
if(XMLHttpReq){
XMLHttpReq.open("POST",url,true);
// alert("open");
XMLHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XMLHttpReq.send("searchString=" + param);
XMLHttpReq.onreadystatechange=loadcallback;
}
}
然後把原本的Submit改用loadfirst function來處理。
這裡比較要注意的幾點：
1.XMLHttpReq是可以用POST低！（大多數的範例都是GET）
2.XMLHttpReq要走POST的話，記得要加『setRequestHeader』！
3.XMLHttpReq POST 的時候透過send這個method傳遞參數。
4.最後告訴瀏覽器，當XMLHttpReq搞定的時候，去呼叫loadcallback。
function loadcallback(){
// alert("數據返回...");
if(XMLHttpReq.readyState==4){
if(XMLHttpReq.status==200){
// alert(XMLHttpReq.responseText);
document.write(XMLHttpReq.responseText);
}else{
alert("返回不正常"+XMLHttpReq.statusText);
}
}
}
這裡就是負責把船回來的東西給Show出來囉。
最懶得方法就是像冷日這一招：document.write！
把所有XMLHttpReq回來的東西重新寫出一次