標籤：style http java color 使用 os
常式：<body> <script type="text/javascript"> var date=new Date(); document.writeln("日期是："+date.toLocaleString()+"<br/>"); document.writeln("日期對應的JSON字串為："+date.toJSON()+"<br/>"); var p={ name:"zpc", age:25 }; //將對象轉換成JSON字串 document.writeln("普通對象的JSON字串為："+Object.toJSON(p)+"<br/>"); var books=["周鵬程","鳥鵬"]; //document.writeln("數組的JSON字串為："+books.toJSON()+"<br/>"); var hash=$H({name:'周鵬程',age:34}); document.writeln("Hash對象的JSON字串為："+hash.toJSON()+"<br/>"); //document.writeln("數值的JSON字串為："+(45).toJSON()+"<br/>"); var str='{"name":"zpc","gender":"male"}'; //將一個json格式的字串轉換成JSON對象 var zpc=str.evalJSON(); document.writeln("zpc對象的名字："+zpc.name+"<br/>"); document.writeln("zpc對象的性別："+zpc.gender+"<br/>"); </script> </body>7、使用Element對象：該類提供了一些方法簡化HTML元素的操作
常式： <body><script type="text/javascript" src="prototype-1.6.0.3.js"></script> <script type="text/javascript"> //直接用new建立一個ObjectRange對象var range=new ObjectRange(2,9,true);//true表示不包含9range.each(function(ele,index){document.writeln("索引"+index+"處的值："+ele+"<br/>")});//使用$R()函數建立一個ObjectRange對象var ra=$R('a','g');document.writeln($A(ra));alert(ra.include('b')); </script> </body>9、使用Form.Element動作表單控制項
<body> <table border="1"> <tr><td><div><input id="ok" type="button" value="click me"/></div>table的Inner</td></tr> </table> <div id="d">e</div> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript">Event.observe("ok","click",function(event){document.writeln("是否為左擊事件："+event.isLeftClick());document.writeln("事件來源："+event.element().value);document.writeln("最近的td元素："+event.findElement("td").innerHTML);});$("d").innerHTML="<h2>哈哈<h2>"; </script> </body>//上面的代碼不在使用原始的事件模型，而是使用基於Event提供的事件簡化，這種簡化消除了事件模型的瀏覽器差異。13、使用Template
<body><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">objArr = [ {book : 'Hadoop教程',author : "zpc"}, {book : 'Java教程',author : '錢剛'}, {book : '天龍八部',author : "金庸"} ];var template=new Template("書名是#{book},作者是#{author}.");for(var i=0;i<objArr.length;i++){document.writeln(template.evaluate(objArr[i]));}</script></body>14、使用Class的create()方法建立對象可以提供一些物件導向的支援
//只要任何錶單控制項的值被改變就觸發<body><form action="#" method="post" id="test">使用者名稱：<input type="text" id="user" name="user"/>密 碼：<input type="text" id="pass" name="pass"/></form><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">new Form.Observer("test",1,function(){alert(this.getValue());});</script></body>//使用者名稱輸入框值改變觸發<body><form action="#" method="post" id="test">使用者名稱：<input type="text" id="user" name="user"/>密 碼：<input type="text" id="pass" name="pass"/></form><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">new Form.Element.Observer("user",1,function(){alert(this.getValue());});</script></body>16、Prototype庫不僅提供了一系列的自訂的類和對象，還擴充了某些JS中原有的類和對象。
<body><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">//為document的loaded事件綁定監聽器document.observe("dom:loaded",function(event){$("show").innerHTML+=("頁面裝載完成<br/>");});//為document的a:b事件綁定事件監聽器document.observe("a:b",function(event){$("show").innerHTML+=("myEvent被觸發了<br/>");$("show").innerHTML+=("event.memo.book的屬性值："+event.memo.book);});</script><input type="button" value="單擊我" onclick='document.fire("a:b",{book:"Hadoop權威指南"});'/><div id="show"></div></body>//a:b是開發人員自訂的“人工合成”事件。單擊頁面中的“單擊我”按鈕時，程式使用document.fire()方法觸發a:b事件
<body> <h3>請輸入您喜歡的水果</h3> <div style="width:280px;font-size:9pt">輸入apple、banana、peach可以看到明顯效果</div><br/> <input id="favorite" name="favorite" tyep="text" onblur="$('tips').hide();"/> <div id="tips" style="width:160px;border:1px solid menu;background-color: #ffffcc;display: none;"></div><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">function searchFruit(){var url="/Ajax/fruit.jsp";//將favorite表單域的值轉化為請求參數，形如favorite=app&color=red....var params=Form.Element.serialize('favorite');//alert(params);//建立Ajax.Request對象,對應於發送請求var myAjax=new Ajax.Request(url,{method:'post',parameters:params,onComplete:showResponse,asynchronous:true});}//定義回呼函數function showResponse(request){//alert("回呼函數被觸發！");//在tip中顯示伺服器的響應$('tips').innerHTML=request.responseText;//顯示tip對象$('tips').show();}new Form.Element.Observer("favorite",1,searchFruit);</script> </body>//JSP頁面嵌入的Java代碼<%String hdchar=request.getParameter("favorite");System.out.println(hdchar);if("apple".startsWith(hdchar)){out.println("apple");}else if("banana".startsWith(hdchar)){out.println("banana");}else if("peach".startsWith(hdchar)){out.println("peach");}else {out.println("other");}%>(2)使用Form.request()方法
<body><h3>請輸入使用者名稱和密碼登入</h3><form id="login" action="/Ajax/login.jsp" method="post">使用者名稱：<input type="text" name="user" /><br />密 碼：<input type="password" name="pass"><br /><input type="button" value="驗證使用者" onclick="login();"/><br /><div id="d"></div></form><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">function login() {//直接使用Form的request方法發送非同步請求，request方法的參數是個json數組的格式！$("login").request( {//指定回呼函數onComplete : function(request) {$("d").innerHTML = request.responseText;}});}</script></body>jsp頁面嵌入的Java代碼<%String user=request.getParameter("user");String pass=request.getParameter("pass");if(user.equals("zpc")&&pass.equals("123456")){out.println("驗證通過！");}else{out.println("沒有通過驗證！");} %>
(2)使用Ajax.Responders對象
這個對象用於註冊Ajax事件監聽器，該對象註冊的Ajax事件監聽器不管是哪個XMLHttpRequest在發生互動，都能被自動觸發。因而Ajax.Responders註冊的事件監聽器是全域有效，可以用於監控整個Ajax的互動過程。
//增加了loading圖片的fruit.html<body><h3>請輸入您喜歡的水果</h3><div style="width: 280px; font-size: 9pt">輸入apple、banana、peach可以看到明顯效果</div><br /><input id="favorite" name="favorite" tyep="text"onblur="$('tips').hide();" /><img alt="loading" id="loading" src="/Ajax/images/loading.gif"style="display: none; width: 20px; height: 20px"><div id="tips"style="width: 160px; border: 1px solid menu; background-color: #ffffcc; display: none;"></div><script type="text/javascript" src="prototype.js"></script><script type="text/javascript">function searchFruit() {var url = "/Ajax/fruit.jsp";//將favorite表單域的值轉化為請求參數，形如favorite=app&color=red....var params = Form.Element.serialize('favorite');//alert(params);//建立Ajax.Request對象,對應於發送請求var myAjax = new Ajax.Request(url, {method : 'post',parameters : params,onComplete : showResponse,asynchronous : true});}//定義回呼函數function showResponse(request) {//alert("回呼函數被觸發！");//在tip中顯示伺服器的響應$('tips').innerHTML = request.responseText;//顯示tip對象$('tips').show();}//定義Ajax的全域事件處理器對象var myGlobalHandlers = {//剛剛開始Ajax互動時觸發該屬性指定的函數onCreate:function() {$("loading").show();},//互動完成時觸發該屬性的指定函數onComplete:function() {if (Ajax.activeRequestCount == 0) {$('loading').hide();}},//互動失敗時觸發該屬性指定的函數onFailure:function() {alert("對不起，頁面載入出錯！");}};//為Ajax事件綁定全域的事件處理器Ajax.Responders.register(myGlobalHandlers);new Form.Element.Observer("favorite", 1, searchFruit);</script></body>(3)使用Ajax.Updater類
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
