prototype.js简单实现ajax功能示例


Posted in Javascript onOctober 18, 2017

本文实例讲述了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框架的程序设计有所帮助。

Javascript 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
jQuery Selector选择器小结
May 06 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
浅谈JS函数节流防抖
Oct 18 #Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 #Javascript
详解Js中的模块化是如何实现的
Oct 18 #Javascript
JS跳转手机站url的若干注意事项
Oct 18 #Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 #Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 #Javascript
浅谈Node异步编程的机制
Oct 18 #Javascript
You might like
php自定义session示例分享
2014/04/22 PHP
golang与PHP输出excel示例
2016/07/22 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
php自动加载代码实例详解
2021/02/26 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
django之session与分页(实例讲解)
2017/11/13 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python实现超市商品销售管理系统
2019/10/25 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
python音频处理的示例详解
2020/12/23 Python
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
法律系毕业生自荐信范文
2014/03/27 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
外出学习心得体会范文
2016/01/18 职场文书
手残删除python之后的补救方法
2021/06/26 Python
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers