Ajax學習筆記(二)

時間  2019-11-05
標籤 ajax 學習 筆記 欄目 Ajax 简体版
原文   原文鏈接


2、prototype庫具體解釋

一、prototype庫的使用
//導入下載好的prototype.js文件
<script type="text/javascript" src="prototype.js"></script>
//在本身的js中直接使用Prototype對象
<script type="text/javascript">
document.writeln("Prototype庫的版本號是："+Prototype.Version+"<br/>");
document.writeln("個人庫的版本號是："+zpc.version+"<br/>"+"個人年齡："+zpc.age+"<br/>");
document.writeln("client是否爲Chrome："+Prototype.Browser.WebKit+"<br/>");
alert(Prototype.K("測試字符串"));
</script>
二、使用$()函數和$$()函數訪問文檔中的HTML元素
   $(String tagName)函數：直接得到id爲tagName的HTML元素
   $(String tagName1,String tagName2):得到id爲tagName一、tagName2的HTML元素數組
   $$()的參數是一個或多個合法的CSS選擇器
三、$A()函數用於將一個參數轉換成數組，假設傳入的參數不是一個集合，而是一個普通變量，$A()函數將返回一個空數組。而不是僅僅有一個元素的數組。
   $F()函數用於獲取表單控件的值，比方input、textArea、select等元素。
   $()函數是獲取HTML元素自己，而$F()函數用於獲取表單控件的值，而不是表單域自己。
   可以這樣說：$()函數返回的是一個HTML元素對象。而$F()函數返回的僅僅是一個字符串值。
   使用這兩個函數時都應該讓HTML元素的id屬性和name屬性保持一致(保證IE)
四、$H()函數：將js對象轉換成Hash對象。Hash類是Prototype庫提供的一個類，相似於Java語言裏的Map數據結構
五、使用Try.these()函數贊成傳入一些列的函數做爲參數，它將依次調用傳入的一系列函數，找到第一個能成功返回值的函數。並將該函數的返回值做爲Try.these()函數的返回值。

假設這一系列函數都沒有返回值，Try.these()將會返回undefined
   Try.these()的參數僅僅能是函數引用
六、Prototype的json支持爲Date、Object、Array、Hash、Number類添加了toJSON()方法，用於將這些對象轉換成一個JSON格式的字符串
   此外，Prototype還爲String類添加了例如如下三個與JSON相關的方法：
   isJSON():該方法推斷指定字符串是否爲合法的JSON字符串
   evalJSON([sanitize=false]):將指定的字符串轉換成json對象
   toJSON()：用於將字符串轉換成JSON字符串
 javascript

  例程：
<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>
七、使用Element對象：該類提供了一些方法簡化HTML元素的操做
八、使用ObjectRange對象：一個ObjectRange對象表明一個範圍 
   例程：
  <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表示不包括9
	range.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>
九、使用Form.Element操做表單控件
   Form.Element專門用於操做表單控件。使用它可以激活表單控件。可以推斷某個表單控件是否爲空。可以清空系列表單控件
十、使用Form操做表單。注意：Form.Element是操做指定表單控件，而Form是操做指定表單(或者表單內的全部控件)
十一、使用Hash對象
    Hash對象是一種相似於Java中Map的數據結構。它是一個Key-Value對的集合。

Hash對象的每個Item是包括兩個元素的數組，前一個是Key後一個是Value
    藉助$H函數可以將一個普通的對象轉換爲Hash對象。再借助Hash對象的方法可以方便的訪問該對象的全部屬性和屬性值
十二、使用Event來簡化事件編程
 html

<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提供的事件簡化，這樣的簡化消除了事件模型的瀏覽器差別。
1三、使用Template
    有時咱們要生成多個字串。這些字串中有大量反覆內容，僅僅有少許關鍵部分發生變化。這時就可以藉助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>
1四、使用Class的create()方法建立對象可以提供一些面向對象的支持
1五、兩個經常使用的監聽表單控件及表單的監聽器
    Form.Observer(form,interval,callback):假設表單form內不論什麼表單控件的值發生改變，interval秒後本身主動觸發callback函數。

該表單既可以是表單的id屬性，也可以是表單自己。java


   Form.Element.Observer(element,interval,callback):假設表單控件element的值發生改變，interval秒後本身主動觸發callback函數。編程

該element既可以是表單控件的id屬性，也可以是表單控件自己。
例程：
json

	//僅僅要不論什麼表單控件的值被改變就觸發
	<body>
		<form action="#" method="post" id="test">
		username：<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>
	
	//username輸入框值改變觸發
	<body>
		<form action="#" method="post" id="test">
		username：<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>
1六、Prototype庫不只提供了一系列的本身定義的類和對象，還擴展了某些JS中原有的類和對象。
例程：擴展的document 
	<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事件
//使用document、Element的observe()方法爲「人工合成」事件綁定監聽器時，該事件的事件名稱格式必須爲xx:xx
1七、Prototype對Ajax的支持
(1)使用Ajax.Request類
例程：輸入提示效果
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();"/>
  	<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()方法
   該方法會將該表單控件轉換爲請求參數，默認向該表單action指定的URL發送異步請求
例程：驗證用戶是否合法
html頁面代碼： 
<body>
		<h3>
			請輸入username與password登陸
		</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("對不起，頁面載入出錯！app
");
		}
	};
	//爲Ajax事件綁定全局的事件處理器
	Ajax.Responders.register(myGlobalHandlers);
	new Form.Element.Observer("favorite", 1, searchFruit);
</script>
</body>
(3)使用Ajax.Updater類
  這個類是Ajax.Updater類的簡化，使用該類無需使用回調函數，該類可以本身主動將server響應顯示在某個容器中。

當server響應完畢時，clienthtml頁面無需使用回調函數解析server響應(固然也可以手動加入回調函數)，從而進一步簡化Ajax交互編程。 (4)使用Ajax.PeriodicalUpdater類    它是一個週期性的Ajax.Updater類，週期性地向server發送請求(固然也可以手動指定定時器對象)，並將server響應在clientHTML頁面的某個元素中顯示出來。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程