J2EE下使用AJAX(二) Prototype封装

转载 2015年07月11日 08:37:11

需提前下载prototype.js并置于自己的项目中,本例实现的功能与上例类似,Prototype对XMLHttpRequest进行了封装,我们可以使用较为简单的方式发送请求。

2.1 Servlet

实际上与上例的Servlet完全一样。内容如下:

package lld.test.ajax;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class PrototypeAjaxServlet extends HttpServlet
...{
    
private static final long serialVersionUID = -839091745512216332L;

    @Override
    
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            
throws ServletException, IOException
    
...{
        
this.doPost(req, resp);
    }


    @Override
    
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            
throws ServletException, IOException
    
...{
        String uname 
= req.getParameter("uname");
        String return_str 
= "Hello, " + uname;
        resp.getOutputStream().print(return_str);
        resp.getOutputStream().close();
        System.out.println(return_str);
    }


}

2.2 JSP

首先,要在页面中引用prototype.js

<script type="text/javascript" src="js/prototype.js"></script>

发送请求的HTML代码

<input type="button" value="Prototype" onclick="prototype_ajax()" />

发送/接收请求的JavaScript代码


function prototype_ajax()
...{
    
var url = "PrototypeAjax.do";
    
var pars = "uname=London&reqid=" + Math.random();
    
var myAjax = new Ajax.Request(
        url,
        
...{method: 'post', parameters: pars, onComplete: prototype_response}
    );
}


function prototype_response(req)
...{
    alert(req.responseText);
}

 

与使用原始方法相比,该方式更为简洁直观(我最常用的一种)。

在发送请求时,使用了一个随机数作为参数,是因为浏览器缓存的缘故,如果在调试过程中更改了程序,使用随机数参数可以强制程序不使用缓存中的数据,从而可反映出程序最新的变化。

2.3 web.xml

<servlet>
    
<servlet-name>PrototypeAjax</servlet-name>
    
<servlet-class>lld.test.ajax.PrototypeAjaxServlet</servlet-class>
</servlet>

<servlet-mapping>
    
<servlet-name>PrototypeAjax</servlet-name>
    
<url-pattern>/PrototypeAjax.do</url-pattern>
</servlet-mapping>

J2EE下使用AJAX(二) Prototype封装

需提前下载prototype.js并置于自己的项目中,本例实现的功能与上例类似,Prototype对XMLHttpRequest进行了封装,我们可以使用较为简单的方式发送请求。2.1 Servlet实...
  • lldwolf
  • lldwolf
  • 2008年04月23日 16:01
  • 2801

[转]prototype.js开发笔记(针对Ajax的JS框架Prototype的使用介绍)

/*针对Prototype框架使用讲解,文章非常经典,中文版,在Java.net上有,特转载过来,感谢作者和翻译者。原文地址:https://compdoc2cn.dev.java.net/proto...
  • heiyeshuwu
  • heiyeshuwu
  • 2006年01月24日 17:59
  • 2804

prototype.js实现AJAX小例子

  原本不知道prototype.js是一个框架,只当其是一个再普通不过的JS文件.随手拿着用了用,写了一个JSP页面,单纯的用prototype.js来实现AJAX效果.用了之后发现超好用,自己再也...
  • sliufen
  • sliufen
  • 2007年09月07日 13:09
  • 4757

封装--javascript的原型(prototype)

这里介绍一种基于组合的对象定义为了解决原型所带来的问题,需要通过组合构造函数和原型来实现对象的创建:将属性在构造函数中定义,将方法在原型中定义。这样有效结合了基于原型链和构造函数来定义对象的有点,是目...
  • Yana_li
  • Yana_li
  • 2016年10月10日 20:27
  • 574

调用prototype.js的ajax进行post提交方法

index.html代码如下:    function postNewContact(){    var form = $(’form’);
  • sonysonyok88
  • sonysonyok88
  • 2011年04月11日 13:55
  • 797

剖析prototype框架的封装机制(OO特性,组件封装)

    说起OO,我们首先想到的肯定是抽象,继承,多态,重载等一系列的名词。而在JavaScript语言中,因为它是基于对象的(Object-Based),并不是面向对象的(object-orient...
  • jkjdskq
  • jkjdskq
  • 2006年02月19日 03:22
  • 2402

使用Promise封装简单Ajax方法

一直都很喜欢使用原生的JavaScript,特别是不需要考虑兼容性的场景(虽然少得可怜)。可惜ECMAScript并没有封装好的Ajax方法(其实也没什么必要有),自己动手使用Promise撸一个吧!...
  • qq_35844177
  • qq_35844177
  • 2017年07月17日 10:07
  • 1603

jQuery-jquery封装的ajax使用总结

对于页面一些效果,验证等,我们都是通过JavaScript语言进行完成的,但是它也就像我们的Java代码一样,是最前台语言最基础的,而jQuery则是对js代码进行封装方便我们前台代码的编写,而且它还...
  • qq_36859415
  • qq_36859415
  • 2016年12月20日 18:38
  • 3454

js中利用prototype给类添加方法

1.如何定义一个简单的类? 以下是一个没有任何属性和方法的类的定义:function MyClass(){};你可能会想,这不就是个简单的函数声明?没错,这个函数就是一个类的定义的实现。如何使用这个...
  • github_26672553
  • github_26672553
  • 2016年04月29日 10:54
  • 5399

jQuery对AJAX操作的封装

jQuery对AJAX操作的封装1.jQuery对AJAX操作的封装——load() (‘…′).load(url,[data],[fn])异步加载指定URL返回的数据(必需是text/html)...
  • amihui
  • amihui
  • 2015年11月20日 00:00
  • 1749
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:J2EE下使用AJAX(二) Prototype封装
举报原因:
原因补充:

(最多只允许输入30个字)