2015年9月4日 星期五

Ajax 相關基礎的觀念 -- 20150904


XMLHttpRequest的open( )方法中,啟動Ajax呼叫的連線方法有GETPOST兩種。

對應到HTML表單傳送時,GET使用字串方式傳送;POST使用封包傳送。


備註:

XMLHttpRequest物件回傳有兩種方式:

  1. 純文字 responseText
  2. XML格式 responseXML


GET方法:


「一般表單」

再傳送執行字串時,把所有字串和字串值,連結在執行程式後,如:http://www.gy.com/default.asp? ID=a264&pwd=123

※根據上述,在一般表單中使用的話,使用者容易在網址列上看到所傳遞的字串值,而GET方式通常是應用在沒有保全顧慮的程式,如:讀取新聞資料等。


「Ajax」

由於Ajax直接傳送到伺服器,並不會把連線字串反應在瀏覽器網址列,但使用相同原理來傳輸。再傳送之前,需要把代入的字串和字串值,和連線程式一起送到伺服器,故須先把字串處理好。通常在Ajax中使用GET模式傳遞時,多半連線字串不會太複雜。

避免讀取快取,而導致回傳資料沒有變化,在傳遞參數時,加上一個變量,使得連練字串每次都不同,確保不會由快取中讀取舊資料。

舉例:

xmlHttp.open(''GET,'xxxx/default.asp?timeStamp='+new Date( ).getTime( ));


---------------------------------------------------------------------------------------


POST方法:


使用POST模式較複雜,除了必須和XMLHttpRequest的send( )方法一起使用外,還必須指定傳遞字串要編過碼。否則在非UTF-8語系下的頁面,傳遞到伺服器時,伺服器將會無法正確接收中文字,造成亂碼。


------------------------------------------------------------------------------------

表單使用JavaScript取得欄位值得方式:

例一、(表單元件:text、password、hidden、textarea、select)

欄位值 = document.表單名稱.欄位名稱.value

例二、(表單元件:radio、checkbox)

→ 欄位值 = document.表單名稱.欄位名稱[i].value


根據網頁中的表單裡面所有欄位,通稱為「表單元件」,以陣列形式儲存,所以表單中的欄位,可使用form.elements[i]來代表,因此以下方式可取得該表單內的表單元件。

  • 欄位名稱  = form.elements[i].name
  • 欄位值 = form.elements[i].value
  • 欄位型態 = form.elements[i].type
  • 欄位名稱=欄位值;form.elements[i].name = form.elements[i].value
  • 總共有多少欄位,相當於表單陣列的個數 = form.elements.length








2015年8月26日 星期三

動態新增Div與文字(JavaScript範例) -- 20150826

步驟如下:

1.開啟一個全新的HTML網頁。
2.將下面兩段程式碼放入新網頁中。
3.執行後,可以看見效果。



-----(放置head標籤內)-----------------------------


<script type="text/javascript">

    function GreateParagraph(t) {
        var body = document.getElementsByTagName("body")[0];
        var para = document.createElement("div");
        //動態新增一段落文字,可修改createElement內的元件標籤,如:createElement("p")
        var ptext = document.createTextNode(t);

        para.appendChild(ptext);
        body.appendChild(para);

    }

</script>



------(放置body標籤內)-------------------------------------------

<form id="form1" name="form1" method="get" action="">

文字:<input type="text" name="t" /> 
 <input type="button" value="產生文字段落" onclick="GreateParagraph(this.form.t.value);" />
                                                          
</form>

-------------------------------------------------------------------------------



※使用getElementsByTagName( )取得HTML標籤成為物件。
   使用getElementById( )取得HTML標籤中以id識別的元件成為物件。