目前分類：JS - BASIC (5)

瀏覽方式： 標題列表 簡短摘要

在網頁上實作倒數計時讓使用者知道多久會被導向到另一個網站，這個功能常會用在網站改網址或者是要告知一些重要事項。作法如下：

jQuery: jquery-1.11.1.min.js

jquery.countdown: jquery.countdown.min.js

下載上面兩個 java script，然後再寫一個網頁 index.html，內容如下即可。請修改紅色標示的地方。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<META HTTP-EQUIV="Refresh" CONTENT="15;URL=https://bpm.polinwei.com">
<title>Welcome BPM (Business Process Management, BPM) 企業流程管理系統</title>

<link href="style.css" rel="stylesheet" type="text/css">

<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.countdown.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    val = 15 * 1000;
    selectedDate = new Date().valueOf() + val;
    $('.clock').countdown(selectedDate, function(event) {
           $(this).html(event.strftime('%S'));
         });
});    

</script>

<style type="text/css">
<!--
body {
    background-color: #e1dbcd;
    margin: 0px;    
    background-repeat: repeat-x;
}
-->
</style>

</head>
<body>


<div id="content">
    <p><span class="text_black"> Attention</span></p>
    
    <span class="text_bold">eSystem New URL</span>? ?<br>
    <p><span class="text">
    esystem's URL will be changed to <a href="https://bpm.polinwei.com"> https://bpm.polinwei.com</a> in 2015/11/16 , Please noted.
    </span></p>
    <p><span class="text_bold_nounderline">This page will redirect to new page in <span class="clock"></span> sec.</p>
    <p> PS: BPM - Business Process Management </p>
    
    <br/>
    <p><span class="text_black"> 請注意 </span></p>
    <p><span class="text_bold">eSystem 網址即將變更</span>? ?</p>
    <p><span class="text">
    esystem 網址將於2015/11/16更新為 <a href="https://bpm.polinwei.com">https://bpm.polinwei.com</a>，請將該網址加到你的最愛。
    </span></p>   
    <p><span class="text_bold_nounderline">該網頁將於<span class="clock"></span>秒後自動轉址。</span></p>
    <p> 註: 企業流程管理 BPM（Business Process Management, BPM）</p>
    
</div>

</body>
</html>
文章標籤
jquery countdown

MIS 發表在 痞客邦 留言(0) 人氣()

▲top

在撰寫程式時，對於刪除資料前應該是先詢問使用者，以往都是跳出一個詢問視窗，但現在的流覽器大都會阻隔，在導入 Bootstrap 的 framework 後，可以加入 bootstrap-dialog.js 的 plug-in 來強化程式的友善化。效果如下：

 

  • 查詢後的畫面

beforeDel

  • 按下刪除時的詢問視窗

askDel 

 

作法如下：

Step 01：客制一個 java script

// 詢問Y/N 視窗
function dialogYN(formId,dialogType,title,message){
    
    BootstrapDialog.show({
        type: dialogType,
        title: title,
        message: message,            
        closable: false,
        buttons: [{
                label: 'No',
                action: function(dialog) {                        
                    dialog.close();
                }
            }, {
                label: 'Yes',
                cssClass: 'btn-primary',
                action: function(dialog) {
                    dialog.close();
                    $(formId).submit();
                }
            }]
    });    

}

參數：

formId: 回覆為 Yes 後要執行的 form id

dialogType: 詢問視窗的型態有 'type-default' , 'type-info' , 'type-primary' , 'type-success' , 'type-warning' , 'type-danger'

title: dialog 視窗的 title

message: 要顯示的內容

 

Step 02：在 Struts 2 的 Tag 中的用法

<s:submit name="usersSubmit" value="delDataForm" key="display.delete" onclick="$('#reqCode').val('delDataForm');return dialogYN('#UsersTagAction','type-danger','%{getText('display.windowTitle.delConfirm')}','%{getText('msg.common.confirm')}')"/>

為了多國語言的顯示，需要用 getText 配合 EL 的方法來作，如：'%{getText('display.windowTitle.delConfirm')}'

文章標籤
bootstrap bootstrap-dialog struts 2

MIS 發表在 痞客邦 留言(0) 人氣()

▲top

標準 XMLHttpRequest 的操作方法如下 ：

abort()
 停止當前請求

getAllResponseHeaders()
把 HTTP 請求的所有回應標頭作為鍵/值對傳回

getResponseHeader("header")
傳回指定標頭的字串值

open("method", "url")
建立對伺服器的呼叫。method 參數可以是 GET、POST 或 PUT。url 參數可以是相對 URL 或絕對 URL。這個方法還包括 3 個可選的參數

send(content)
向伺服器發送請求

setRequestHeader("header", "value")
把指定標頭設定為所提供的值。在設定任何標頭之前必須先呼叫 open

接下來，再來針對各別的方法 ( Method ) 作比較仔細的說明：

void abort()：
顧名思義，這個方法就是要停止請求。

string getAllResponseHeaders()：
這個方法的核心功能對 Web 應用程式開發人員應該很熟悉了，它傳回一個字串，其中包含 HTTP 請求的所有回應標頭，標頭包括 ContentLength、Date 和 URI。

string getResponseHeader(string header)：
這個方法與 getAllRes-ponseHeaders() 是對應的，不過它有一個參數表示你希望得到的指定標頭值，並把這個值作為字串傳回。

void open(string method, string url, boolean asynch, string username,string password)：
這個方法會建立對伺服器的呼叫。這是初始化一個請求的純腳本方法。它有兩個必要的參數，還有 3 個可選參數。
要提供呼叫的特定方法（GET、POST 或 PUT）
還要提供所呼叫資源的 URL。

另外還可以傳遞一個 Boolean 值，指示這個呼叫是非同步的還是同步的。預設值為 true，表示請求本質上是非同步的。如果這個參數為 false，處理就會等待，直到從伺服器傳回回應為止。由於非同步呼叫是使用 Ajax 的主要優勢之一，所以倘若將這個參數設定為 false，從某種程度上講與使用XMLHttpRequest 物件的初衷不太相符。不過，前面已經說過，在某些情況下這個參數設定為 false 也是有用的，比如在持久儲存頁面之前可以先驗證使用者的輸入。

最後兩個參數不說自明，允許你指定一個特定的使用者名稱和密碼。

void send(content)：
這個方法實際向伺服器發出請求。如果請求聲明為非同步的，這個方法就會立即傳回，否則它會等待直到接收到回應為止。可選參數可以是 DOM 物件的實例、輸入串流，或者字串。傳入這個方法的內容會作為請求本體的一部分發送。

void setRequestHeader(string header, string value)：
這個方法為 HTTP請求中一個給定的標頭設定值。它有兩個參數，第一個字串表示要設定的標頭，第二個字串表示要在標頭中放置的值。需要說明，這個方法必須在呼叫 open() 之後才能呼叫。

　　在所有這些方法中，最有可能用到的就是 open() 和 send()。XMLHttp-Request 物件還有許多屬性，在設計 Ajax 互動時這些屬性非常有用。

 

文章標籤
javascript Ajax XMLHttpRequest

MIS 發表在 痞客邦 留言(0) 人氣()

▲top

XMLHttpRequest 重要的屬性： onreadystatechange，readyState，status， statusText ，responseXML ，responseText。  

  • onreadystatechange
     參考至callback函式，readyState每次改變時，都會呼叫onreadystatechange所參考的函式。  
  • responseText
    伺服器傳來的請求回應文字，會設定給這個屬性。  
  • responseXML
     伺服器傳來的請求回應如果是XML，會成為DOM設定給這個屬性。  
  • statusText
    返回當前 XMLHttpRequest 請求的回應行狀態，回傳值： string status  
  • readyState
    回應 XMLHttpRequest 的當前狀態，會有0到4的數值，共有5個狀態

0 = UNINITIALIZED; opennot yet called
(未初始化) Object已建立，但是尚未初始化（尚未使用open方法）  

1 = Open; send for request not yet called
(初始化) Object已建立，尚未使用send方法  

2 = Sent; send called, headers and status are available
(送出數據) send方法已使用，但是當前的狀態及http檔頭頭未知  

3 = Receiving; downloading response, responseText only partially set (數據傳送中) 已接收部分數據，因為回應及http檔頭不全，這時通過 responseBody 和responseText 獲取部分數據會出現錯誤  

4 = COMPLETED; finished downloading
(完成)數據接數完畢，此時可以通過 responseBody 和 responseText 獲取完整的回應數據

• status： 回應 XMLHttpRequest 請求的 http 狀態碼 ，回傳值：integer status code

100:Continue
101:Switching protocols
200:OK
201:Created
202:Accepted
203:Non-Authoritative Information
204:No Content
205:Reset Content
206:Partial Content
300:Multiple Choices
301:Moved Permanently
302:Found
303:See Other
304:Not Modified
305:Use Proxy
307:Temporary Redirect
400:Bad Request
401:Unauthorized
402:Payment Required
403:Forbidden
404:Not Found
405:Method Not Allowed
406:Not Acceptable
407:Proxy Authentication Required
408:Request Timeout
409:Conflict
410:Gone
411:Length Required
412:Precondition Failed
413:Request Entity Too Large
414:Request-URI Too Long
415:Unsupported Media Type
416:Requested Range Not Suitable
417:Expectation Failed
500:Internal Server Error
501:Not Implemented
502:Bad Gateway
503:Service Unavailable
504:Gateway Timeout
505:HTTP Version Not Supported

PS:此屬性 status 是唯讀，返回當前 XMLHttpRequest 請求的 http 狀態碼 ，此屬性僅當數據送出並完整接收完畢後才可以獲取。

程式範例如下：

if(myXmlHttp.readyState == 4) {
   if(myXmlHttp.status == 200) {
   //以純文字方式取回伺服器回傳資料
    txtresp = myXmlHttp.responseText;
   //以 XML 方式取回伺服器回傳資料
   xmlresp = myXmlHttp.responseXML;
   if (txtresp) {
      alert(txtresp);
      document.getElementById("myTxtResp").innerHTML = txtresp;
   }
}
 
文章標籤
javascript Ajax XMLHttpRequest

MIS 發表在 痞客邦 留言(0) 人氣()

▲top

　　AJax 技術是目前網頁流行的趨勢，在工作上也時常運用此技術．那什麼是 AJax 呢？節錄一段 WIKI 上的 AJax 文章如下： AJAX 全稱為「Asynchronous JavaScript and XML」（非同步JavaScript和XML），是一種創建互動式網頁應用的網頁開發技術。根據Ajax提出者Jesse James Garrett　建議，它：

  • 使用XHTML+CSS來表示資訊；
  • 使用JavaScript操作DOM（Document Object Model）進行動態顯示及互動；
  • 使用XML和XSLT進行資料交換及相關操作；
  • 使用XMLHttpRequest物件與Web伺服器進行非同步資料交換；
  • 使用JavaScript將所有的東西繫結在一起。
  • 使用SOAP以XML的格式來傳送方法名和方法參數。

 　　對架構有興趣的網友再自行細讀．接下來我們要以實作來瞭解AJax的運作，在實作之前再說明一下， JavaScript要放在網頁中的兩種模式：

第一種：JavaScript 嵌入 HTML 中的作法，有下列兩種模式

A: <script type="text/javascript"> .code </script>
B: <script type="text/javascript" src="url"></script>

建議使用 B 為宜，因為這樣程式碼分離，閱讀及 Debug 都較為方便．

第二種：搭配 XHTML，若是搭配嚴謹的XHTML格式則必須使用 cdata 將 JavaScript 用註解格式封裝 

<script type="“text/javascript”">
<![CDATA[//>
<!— Javascript Code here … //-->
<!]]>
</script>

AJAX 處理的順序大致可以分成下列五個步驟

1.Create the object : XMLHttpRequest
2.Set the readystatechange event trigger
3.Open the Request
4.Send the Request
5.Check the readyState property

整個架構圖如下：

AjaxConcept.png  

 　　下面就舉實例來說明 AJax 這五個步驟，在這個實例中需要兩個檔案 AJax.html & HelloAjax.txt，透過 AJax.html 是來取得網站內 HelloAjax.txt 檔案裡的資料。  

AJax.html 檔案

<html>
<head>
<script type='text/javascript'>  
var myXmlHttp;
function createXmlHttpObj(){
   if(window.XMLHttpRequest) {
      myXmlHttp = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
      myXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    }
}

function handleStateChange(){
   var txtresp;
   var xmlresp;
   if(myXmlHttp.readyState == 4) {
      if(myXmlHttp.status == 200) {
    //以純文字方式取回伺服器回傳資料
   txtresp = myXmlHttp.responseText;
   //以 XML 方式取回伺服器回傳資料
     xmlresp = myXmlHttp.responseXML;
   //5.Check the readyState property
    if (txtresp) {
    document.getElementById("myTxtResp").innerHTML = txtresp;
      }     
     }  
 }
}
function sendRequest(){
 // 1.Create the object : XMLHttpRequest   
 createXmlHttpObj();  
 if(myXmlHttp) {      
  // 2.Set the readystatechange event trigger      
  myXmlHttp.onreadystatechange = handleStateChange;      
  // 3.Open the Request      
  myXmlHttp.open('get', 'HelloAjax.txt');      
  // 4.Send the Request      
  myXmlHttp.send(null);  
 }else {
   alert("您的瀏覽器不支援這個Ajax程式的功能");
 }
}
</script>
</head>
<body>
    <input value="click me(介紹 AJax 的功能)" onclick="sendRequest();" type="button"><br>
    <a href="#" onClick="sendRequest();" >click me(介紹 AJax 的功能)</a>
    <div id="myTxtResp"></div>
</body>
</html>

HelloAjax.txt 檔案

Hello AJax
這是由 AJax 技術取得伺服器後端 HelloAjax.txt 的檔案資料
文章標籤
Ajax java script

MIS 發表在 痞客邦 留言(0) 人氣()

▲top