才知道ajax應用并不需要一次又一次createXmlHttpRequest,使用框架,一切變得很輕松
Prototype僅僅是一個編寫好的js腳本庫,跟javascript一樣,此腳本庫只需在頁面引用即可
下載地址:?
http://prototype.conio.net/dist/prototype-1.4.0.tar.gz這是一個完全版本,只需要將文件解壓,然后在dest目錄下拷貝出prototype.js就可以使用,這個文件不需要任何其他文件,只需要在您的項目中拷貝它,引用它,使用它.
這里我使用兩個腳本文件來對其進行講解
??<script?src="js/prototype.js"></script>
??<script?src="js/test.js"?></script>
在調試的時候使用<script?src="js/prototype.js"/>會造成IE頁面沒有任何顯示,也不報錯,很不解,希望知道為什么的朋友可以告訴我
要被賦值的文本框
<input?type="text"?id="userName"></input>
觸發事件的button
<input?type="button"?value="button"?onClick="testGEBI('userName')"/><br>
用于輸出的局部刷新位置
ss:<span?id="ss"></span><br>
test.js中的函數
function?testGEBI(str){
????//使用$()代替getElementById()
????$(str).value="button";
????//使用$F取文本框值
????ss.innerHTML=$F("userName");
}
這里$(element)相當于document.getElementById()
????$F(element)相當于document.getElementById().value
使用prototype的好處就在于可以簡化我們的代碼,減少代碼量
其中參數element可以是object對象也可以是id值
類似的方法還有一些,大家可以去查查
Prototype還有一些自定義的對象和類
這里用一個Element對象的empty(element)方法來舉例
頁面上布置一個觸發事件的按鈕
<input?type="button"?value="testEmpty"?onClick="isEmpty()"/>
<span?id=”ise”></span>
腳本中加入
function?isEmpty(){
????if(Element.empty("ss")){
????????ise.innerHTML="空元素";
????}
}
這個方法判斷id為”ss”的標簽內部是否有元素,如果沒有返回true,這個對象還有一些hide(element),show(element)等控制元素顯示和隱藏的函數
以下是ajax相關的內容,prototype同樣為ajax提供了相關函數,避免不停的重復編寫createXHR()函數,類有很多,這里只介紹一下Ajax.Request類
腳本中加入
function?getXML(){
????//局部請求的地址
????var?url="priceAction";
????//創建的?對象名(這個對象名其實在這里并沒有被使用過,當對象一被創建,局部請求就已經發出,所以這里不需要使用這個對象名,它完全可以是匿名的)
????var?myAjax?=?new?Ajax.Request(
????url,
????{
????????method:'post',?//請求方法
????????onComplete:showResponse,?//回調函數
????????asynchronous:true?//是否異步
????}
????);
}
//回調函數,注意這個回調函數是有參數,用于接收返回的信息
function?showResponse(xmlrequest){
????gx.innerHTML=xmlrequest.responseText;
}
頁面中加入
xml:<span?id="gx"></span><input?type="button"?value="getXml"?onclick="getXML()"/>
可以看到請求被正確發出了,沒有瀏覽器的判斷,沒有手寫的open函數,很簡潔
同一頁面可以很方便的使用多個XmlHttpRequest對象來進行異步請求
腳本中再加入
function?getXML2(){
????var?url="priceAction";
????var?myAjax?=?new?Ajax.Request(
????url,
????{
????????method:'post',
????????onComplete:showResponse2,
????????asynchronous:true
????}
????);
}
function?showResponse2(xmlrequest2){
????gx2.innerHTML=xmlrequest2.responseText;
}
頁面中
xml2:<span?id="gx2"></span><input?type="button"?value="getXml2"?onclick="getXML2()"/>
然后我們編寫一個生成隨機數的servlet,注意他的地址和上面的url參數一致
import?java.io.IOException;
import?java.io.PrintWriter;
import?java.util.Random;
import?javax.servlet.ServletException;
import?javax.servlet.http.HttpServlet;
import?javax.servlet.http.HttpServletRequest;
import?javax.servlet.http.HttpServletResponse;
public?class?PriceAction?extends?HttpServlet?{
????/**
?????*?Constructor?of?the?object.
?????*/
????public?PriceAction()?{
????????super();
????}
????/**
?????*?Destruction?of?the?servlet.?<br>
?????*/
????public?void?destroy()?{
????????super.destroy();?//?Just?puts?"destroy"?string?in?log
????????//?Put?your?code?here
????}
????/**
?????*?The?doGet?method?of?the?servlet.?<br>
?????*
?????*?This?method?is?called?when?a?form?has?its?tag?value?method?equals?to?get.
?????*?
?????*?@param?request?the?request?send?by?the?client?to?the?server
?????*?@param?response?the?response?send?by?the?server?to?the?client
?????*?@throws?ServletException?if?an?error?occurred
?????*?@throws?IOException?if?an?error?occurred
?????*/
????public?void?doGet(HttpServletRequest?request,?HttpServletResponse?response)
????????????throws?ServletException,?IOException?{
????????response.setContentType("text/html");
????????PrintWriter?out?=?response.getWriter();
????????out
????????????????.println("<!DOCTYPE?HTML?PUBLIC?\"-//W3C//DTD?HTML?4.01?Transitional//EN\">");
????????
????????Random?rand?=?new?Random(System.currentTimeMillis());
????????out.write(rand.nextInt(10)+"$"+rand.nextInt(10)+"$"+rand.nextInt(10));
????????//System.out.println(rand.nextInt(10)+"$"+rand.nextInt(10)+"$"+rand.nextInt(10));
????????out.flush();
????????out.close();
????}
????/**
?????*?The?doPost?method?of?the?servlet.?<br>
?????*
?????*?This?method?is?called?when?a?form?has?its?tag?value?method?equals?to?post.
?????*?
?????*?@param?request?the?request?send?by?the?client?to?the?server
?????*?@param?response?the?response?send?by?the?server?to?the?client
?????*?@throws?ServletException?if?an?error?occurred
?????*?@throws?IOException?if?an?error?occurred
?????*/
????public?void?doPost(HttpServletRequest?request,?HttpServletResponse?response)
????????????throws?ServletException,?IOException?{
????????doGet(request,response);
????}
????/**
?????*?Initialization?of?the?servlet.?<br>
?????*
?????*?@throws?ServletException?if?an?error?occure
?????*/
????public?void?init()?throws?ServletException?{
????????//?Put?your?code?here
????}
}
點擊兩個getXml按鈕,可以發現它們并不互相影響,頁面也沒有被刷新,請求被局部發出,局部刷新.Ajax的框架還有很多,prototype是一個輕量級的