wiki:wade/ajax

Version 3 (modified by wade, 15 years ago) (diff)

--

javascript

  1. 盡量包成一個 .js 檔,可以 HTML 保持精簡及易讀性。
  2. 引入方式為:
    <head>
       <script type="text/javascript" src="xxx.js"></script>
    </head>
    
  3. javascript 會在 HTML 載入後自動執行。
  4. javascript 執行的時間會早於 HTML 。
  5. 在 javascript 中的 document 會指向 <body> 這個元件。
  6. 以 DOM 建立以下架構
    <body>--<div>--+--"test DOM"
                   |
                   +--<br>
                   |
                   +--<ul>--+--<li>--"one"
                            |
                            +--<li>--"tow"
    
    程式碼:
    <html>
       <head>
          <meta content="text/html; charset=utf-8">
          <!--<script type="text/javascript" src="myJS.js">-->
       </head>
       <script language="javascript">
          function ex1()
          {
             // 取得 w_div 這 div 元件的 id 。
             my_div = document.getElementById("h_div");
             // 創造一個文字元件(節點)
             my_text = document.createTextNode("test DOM");
             // 將文字元件加到 div 元件內
             my_div.appendChild(my_text);
    
             // 創造一個 <br> 元件
             my_element = document.createElement("br");
             // 將 <br> 元件加入 div 元件下
             my_div.appendChild(my_element);
    
             // 創造一個 <ul> 元件
             my_element = document.createElement("ul");
             // 將 <ul> 元件加入 div 元件下
             my_div.appendChild(my_element);
    
    
             // 創造一個 <ui> 元件
             my_element1 = document.createElement("li");
             // 創造一個文字元件(節點)
             my_text = document.createTextNode("one");
             // 將文字元件加到 ui元件內下
             my_element1.appendChild(my_text);
             // 將 <ui> 元件加入 ul 元件下
             my_element.appendChild(my_element1);
    
             // 創造一個 <ui> 元件
             my_element1 = document.createElement("li");
             // 創造一個文字元件(節點)
             my_text = document.createTextNode("two");
             // 將文字元件加到 ui元件內下
             my_element1.appendChild(my_text);
             // 將 <ui> 元件加入 ul 元件下
             my_element.appendChild(my_element1); 
          }
          function ex2()
          {
             alert("ex2");
          }
       </script>
       <body>
          <input type="button" value="使用 DOM 範例 1 " onClick="ex1()">
          <input type="button" value="使用 DOM 範例 2 " onClick="ex2()">
          <br>
          ======== 以下為 div 結果 ========
          <div id="h_div">
       </body>
    <html>
    
  7. 使用 css 。
    • css 檔名 style.css:
      .Table1
      {
        font-family:arial;
        border:2px;
      }
      
    • javascript:
      <html>
         <head>
            <meta content="text/html; charset=utf-8">
            <!--<script type="text/javascript" src="myJS.js">-->
            <link href="style.css" type="text/css" rel="stylesheet"/>
         </head>
         <script language="javascript">
            function ex1()
            {
               // 取得 table 的 id
               my_table = document.getElementById("table");
               // 將 css 加入 table 中
               my_table.className = "Table1";
            }
      
         </script>
         <body>
            <input type="button" value="使用 css 範例 1 " onClick="ex1()">
            <br>
            ======== 以下為 結果 ========
            <table id="table">
               <tr>
                  <td>test</td>
               </tr>
            </table>
         </body>
      <html>
      
      

【AJAX XMLHttpRequest】

  1. 連結:http://www.w3schools.com/ajax/ajax_xmlhttprequest.asp

XMLHttpRequest

【筆記】

typeof

顯示物件的類別。回傳值 undefined 表示此物件為 (未定義、null、false) ,或表示此瀏覽器不支援此物件,例如:

  • 一般 browser 所支援的 XMLHttpRequest() ,不被 IE 6 及其早期的 browser 支援,必需使用 new ActiveXObject("Microsoft.XMLHttp") 來產生物件。
    if (typeof XMLHttpRequest != "undefined")
       xmlHttp = new XMLHttpRequest();
    else
       xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
    
    try
    {
       xmlhttp = new XMLHttpRequest();
    }
    cache(e)
    {
       try
       {
          xmlhttp = new ActiveXObject("Microsofr.XMLHttp");
       }
    }
    

onkeyPress

判斷鍵盤輸入的按鍵

<html>
   <head>
      <meta content="text/html; charset=utf-8">
   </head>
   <script language="javascript">
      document.write("test document");
      function press(e)
      {
         if (window.event)
         {
            e = event;
            e.which = e.keyCode;
         }
         if (e.which == 13)
         {
            myForm.submit();
         }
      }
   </script>
   <body>
      <form action="a.php" method="post" name="myForm">
         <input name="user" type="text" size="10" onKeyPress="press(event)">
         <INPUT TYPE="button" VALUE="登入">
      </form>
   </body>
<html>

【Reference】

  1. http status, RFC 2616 Hypertext Transfer Protocol -- HTTP/1.1
  2. http://blog.miniasp.com/?tag=/http+status+code