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

 更新时间:2017年10月18日 10:28:45   作者:sliufen  
这篇文章主要介绍了prototype.js简单实现ajax功能,结合实例形式分析了prototype.js前台实现ajax与后台struts的相关操作技巧,需要的朋友可以参考下

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

相关文章

  • JS实现搜索关键词的智能提示功能

    JS实现搜索关键词的智能提示功能

    最近在百度搜索的时候,当你输入一个字或者词的时候,他会给你们弹出一个下拉框出来,里面是和你相关的搜索提示,效果非常人性化,基于js怎么实现搜索关键词智能提示功能,下面小编通过实例代码给大家介绍下,需要的的朋友参考下吧
    2017-07-07
  • JavaScript写的一个DIV 弹出网页对话框

    JavaScript写的一个DIV 弹出网页对话框

    自己整理得一个JavaScript写的一个DIV 弹出网页对话框
    2009-08-08
  • 详解小程序毫秒级倒计时(适用于拼团秒杀功能)

    详解小程序毫秒级倒计时(适用于拼团秒杀功能)

    这篇文章主要介绍了小程序毫秒级倒计时,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • js实现仿购物车加减效果

    js实现仿购物车加减效果

    本文主要介绍了js实现仿购物车+ -效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • 手机端网页点击链接触发自动拨打或保存电话的示例代码

    手机端网页点击链接触发自动拨打或保存电话的示例代码

    通过网页拨打电话,在点击链接时触发自动拨打或保存电话,此方法塞班、安卓与iphone都支持
    2014-08-08
  • JavaScript日期类型的一些用法介绍

    JavaScript日期类型的一些用法介绍

    这篇文章主要介绍了JavaScript日期类型的一些用法介绍,本文讲解了获取某个月份的天数、获取时区、计算运行时间、删除cookie等用法,需要的朋友可以参考下
    2015-03-03
  • 详解JS中你不知道的各种循环测速

    详解JS中你不知道的各种循环测速

    在前端JS中,有着多种数组循环的方式:for循环;while和do-while 循环;forEach、map、reduce、filter循环;for-of循环;for-in 循环;那么哪种循环的执行速度最快呢,我们今天来看一看。
    2021-05-05
  • 微信小程序实现的数字滑块拼图效果

    微信小程序实现的数字滑块拼图效果

    滑块拼图(Slider Puzzle)是一种经典的智力游戏,通常由一个3x3或更大的格子组成,其中一个格子为空,玩家通过滑动拼图块来达到特定的图案或顺序,这篇文章主要介绍了微信小程序实现的数字滑块拼图,需要的朋友可以参考下
    2024-08-08
  • 基于JavaScript实现随机点名器

    基于JavaScript实现随机点名器

    这篇文章主要介绍了基于JavaScript实现随机点名器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • 聊聊JavaScript中.?、??、??=的用法以及含义

    聊聊JavaScript中.?、??、??=的用法以及含义

    今天项目中突然遇到了不太明白的写法,下面这篇文章主要给大家介绍了关于JavaScript中.?、??、??=的用法以及含义的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04

最新评论