本文實例講述了prototype.js簡單實現ajax功能。分享給大家供大家參考,具體如下:
原本不知道prototype.js是一個框架,只當其是一個再普通不過的JS文件.隨手拿著用了用,寫了一個JSP頁面,單純的用prototype.js來實現AJAX效果.用了之后發現超好用,自己再也不用寫那么大一堆代碼了,哦耶.言歸正傳,還是把今天寫的那個小代碼發上來.
一.JSP部分
這部分的代碼,最為關鍵的是JS部分的改變.沒有采用prototype.js的時候,生成一個AJAX效果,起碼得有四大段.現在,只用寫成下面這一小段代碼了.
<script type="text/javascript"> function getnodelist(){ function onSuccess(request) { alert("success"); $("result").innerHTML = "abc"+request.responseText ; } function onComplete(request){ } function onFailure(request){ alert("failure"); $("result").innerHTML = request.responseText ; } var paras = "" ; var ajax = new Ajax.Request( "http://localhost:8080/LoginDemo/test.do", { method: 'post', parameters:paras , onSuccess: onSuccess, onComplete:onComplete, onFailure:onFailure } ); } </script>
其中最重要的就是這一段了:
var ajax = new Ajax.Request( //新生成一個AJAX.Request對象. "http://localhost:8080/LoginDemo/test.do", //請求的servlet地址.即URL { //參數 method: 'post', parameters:paras , onSuccess: onSuccess, //這些函數和上面三個函數相對應. onComplete:onComplete, onFailure:onFailure });
注明:,里面的URL要么寫成絕對路徑,要么就在前面取<% String path = request.getContextPath();%>,然后在這里
"<%=path%>/test.do"
prototype.js讓我覺得最方便的地方就在于我不用自己去判斷當前瀏覽器的狀態,如果成功了就調用OnSuccess函數,失敗就調用onFailure函數,而我只用關注于成功失敗之后該怎么處理,簡化了程序.
二.后臺struts部分
public ActionForward execute( ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) { // TODO Auto-generated method stub try{ System.out.println("in action"); response.setContentType("text/html;charset=gb2312"); ServletOutputStream out = response.getOutputStream(); out.print("hello slf!"); System.out.println("out"); }catch(Exception e) { e.printStackTrace(); } return null; }
簡單的打印.
希望本文所述對大家prototype.js框架的程序設計有所幫助。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com