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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
老生常谈js数据类型
Aug 03 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
PHP与javascript的两种交互方式
2006/10/09 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
vuex的简单使用教程
2018/02/02 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
用js实现放大镜效果
2020/10/28 Javascript
Python探索之URL Dispatcher实例详解
2017/10/28 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
实习单位推荐信范文
2013/11/27 职场文书
大学生自我鉴定
2013/12/16 职场文书
新闻发布会策划方案
2014/06/12 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
2014年工会工作总结
2014/11/12 职场文书
新教师个人总结
2015/02/06 职场文书
红色故事汇观后感
2015/06/18 职场文书
Django路由层如何获取正确的url
2021/07/15 Python