首頁 > 開發者 > Ajax

ajax的一些執行個體

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

兩種引用方法：

Code:
  1. //1   
  2.   <Script Language ="JavaScript">  
  3.             window.alert("歡迎使用指令碼語言!");    
  4.    </Script>     
  5. //2   
  6.  <Script Language ="JavaScript" src="init.js"></Script>    

//========1。藉助javaScript實現豐富的頁面互動效果（採用滾動字幕<marquee>組件）。

Code:
  1. <body>  
  2.     <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollDelay=110 >  
  3.     <a href="" target=_blank>  
  4.     <font color=#ff0000>熱點新聞:Ajax成為互連網技術中的新寵</font>  
  5.     </a></marquee><br>  
  6. </body>  

//=========2.驗證提交的內容。其中使用DOM來擷取form中的資料。

Code:
  1.   
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  3. <html>  
  4.   <head>  
  5.     <title>3-3.html</title>  
  6.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  7.     <Script Language="JavaScript">  
  8.   
  9.             function checkValid()   
  10.             {   
  11.                 var tmp1,temp2,str1;   
  12.                 //獲得text1的值   
  13.                 str1 = document.myform.email.value;                
  14.                 //擷取第一個@的位置   
  15.                 tmp1 = str1.indexOf('@');   
  16.                 //擷取最後一個@的位置   
  17.                 tmp2 = str1.lastIndexOf('@');   
  18.                 if(str1.length == 0)   
  19.                     //不合法，字串為空白串   
  20.                     window.alert("請輸入內容後再提交");                 
  21.                 else if(tmp1 < 0)   
  22.                     //不合法，字串中不包含@字元   
  23.                     window.alert("字串中不包含@");   
  24.                 else if(tmp1 == 0 || tmp1 == str1.length-1)   
  25.                     //不合法，@字元出現的位置不對   
  26.                     window.alert("@字元出現的位置不對");   
  27.                 else if(tmp1 != tmp2)   
  28.                     //不合法，@字元出現了不止一個   
  29.                     window.alert("@字元出現了不止一個");   
  30.                 else   
  31.                     //合法的Email地址   
  32.                     alert("E-mail地址合法有效");                     
  33.             }              
  34.     </Script>  
  35.        
  36.   </head>  
  37.   <body>  
  38.       <form name="myform">  
  39.         請輸入您的E-mail地址：<br>  
  40.         <input type=text value="" name="email">  
  41.         <p><input type=button value="提交"name="ok"onclick="checkValid()">  
  42.       </form>  
  43.   </body>  
  44. </html>  

//---------3.列表框的事件驅動---------------------

Code:
  1.   
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  3. <html>   
  4.   <head>   
  5.     <title>3-4.html</title>   
  6.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  7.     <Script Language="JavaScript">   
  8.         //當列表框中的被選中選項發生改變時調用的函數   
  9.         function change()   
  10.         {   
  11.             //依據選擇的不同選項，顯示不同的作者資訊   
  12.             switch(myform.option1.value)   
  13.             {   
  14.                 case "s1":   
  15.                     myform.txt1.value="張桂元";   
  16.                     break;   
  17.                 case "s2":   
  18.                     myform.txt1.value="賈燕楓";   
  19.                     break;   
  20.                 case "s3":   
  21.                     myform.txt1.value="張宇翔";   
  22.                     break;   
  23.             }          
  24.         }   
  25.     </Script>   
  26.   
  27.   </head>   
  28.      
  29.   <body>   
  30.     <P>書籍作者資訊查詢：   
  31.     <form name="myform">   
  32.       <SELECT type="select" name="option1" onchange="change()">    
  33.         <OPTION selected value="s0"><-----請選擇-----></OPTION>   
  34.         <OPTION value="s1">Web 2.0開發入門與實踐（Java）</OPTION>   
  35.         <OPTION value="s2">Web 2.0開發入門與實踐（.NET）</OPTION>   
  36.         <OPTION value="s3">Ajax核心技術</OPTION>   
  37.       </SELECT>   
  38.       <Input type="text" name="txt1" value="作者資訊">   
  39.     </form>   
  40.   </body>   
  41. </html>  

   效果:在列表框中選擇不同的選項，在文字框中將顯示該書作者的相應資訊。

//4-------------------onload頁面載入和onunload卸載時發生---------

Code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  2. <html>   
  3.   <head>   
  4.     <title>3-5.html</title>   
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  6.         <Script Language="JavaScript">   
  7.         function init()   
  8.         {   
  9.             alert("歡迎光臨！");   
  10.         }   
  11.         function finish()   
  12.         {   
  13.             alert("下次再來！");   
  14.         }   
  15.     </Script>   
  16.    </HEAD>   
  17.    <BODY OnLoad="init()" OnUnLoad="finish()">   
  18.    </BODY>   
  19.   
  20. </html>  

    可以通過onload事件來與資料庫互動。

//-------------------5 onfoucs事件和onblur事件  焦時間點事件-------------------

Code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  2. <html>   
  3.   <head>   
  4.     <title>3-6.html</title>   
  5.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  6.         <script language="JavaScript">   
  7.             function begin()   
  8.             {   
  9.                 usrId.value="";   
  10.             }   
  11.             function end()   
  12.             {   
  13.                 alert("請確認輸入的資訊，謝謝！");   
  14.             }   
  15.         </script>    
  16.   </head>     
  17.   <body>   
  18.     <input type="text" value="請輸入使用者名稱" name="usrId" onfocus="begin()" onblur="end()">   
  19.   </body>   
  20. </html>  

  //效果：首先在文字框中顯示預設內容，根據游標插入，預設內容消失！

======================javascript事件匯總===================

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More