`
xvm03
  • 浏览: 143963 次
  • 来自: ...
社区版块
存档分类
最新评论

servlet,yui简单无刷新提交

阅读更多

JAVA代码:

TestServlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
  String name=(String)request.getParameter("name");
  System.out.println("name:"+name);
  request.setAttribute("name", "ming");
   PrintWriter out =response.getWriter();
   response.setContentType("text/xml");  
    response.setHeader("Cache-Control", "no-cache");  
    String ids="hello,China!";  
    //将ids返回给客户端  
    out.write("ids:"+ids);
    out.write("name:"+name);
    out.flush();
   
 }

web.xml配置:

<servlet>
  <servlet-name>TestServlet</servlet-name>
  <servlet-class>test.TestServlet</servlet-class>

 </servlet>
 <servlet-mapping>
  <servlet-name>TestServlet</servlet-name>
  <url-pattern>/TestServlet</url-pattern>
 </servlet-mapping>

 <welcome-file-list>
  <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>

 

 

前台页面:index.jsp

 

 <body>
  <form action="#"  method="post">
  name:<input id="name" type="text" name="name"><br>
  <input type="button"  value="asdf" onclick="makeRequest()">
  <div id="divID">
  </div>
  </form>
  </body>
  <script src="js/yahoo.js"></script>  
 <script src="js/event.js"></script>  
 <script src="js/connection.js"></script> 
 
  <script type="text/javascript">
 var div = document.getElementById('divID');

var handleSuccess = function(o){
 if(o.responseText !== undefined){
  div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
  div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
  div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
  div.innerHTML += "<li>HTTP headers: <ul>" + o.getAllResponseHeaders + "</ul></li>";
  div.innerHTML += "<li>Server response: " + o.responseText + "</li>";
  div.innerHTML += "<li>Argument object: Object ( [foo] => " + o.argument.foo +
       " [bar] => " + o.argument.bar +" )</li>";
 }
}

var handleFailure = function(o){
 if(o.responseText !== undefined){
  div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
  div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
  div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
 }
}

var callback =
{
  success:handleSuccess,
  failure: handleFailure,
  argument: { foo:"foo", bar:"bar" }
};

function makeRequest(){
  var sUrl = "TestServlet?name="+document.getElementById("name").value;
 var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
}
  </script>

分享到:
评论

相关推荐

    yui3-master.zip

    《深入理解YUI3:基于yui3-master.zip的探讨》 YUI(Yahoo! User Interface Library)是由雅虎公司开发的一套开源JavaScript库,它为Web开发者提供了丰富的功能和工具,以创建交互性强、性能优秀的网页应用。YUI3是...

    YUI-EXT使用详解

    5. **Ajax交互(Ajax Interactions)**:YUI-EXT集成了YUI的Ajax功能,允许在不刷新页面的情况下与服务器进行异步通信。这使得用户界面能够实时更新,提高了用户体验。 6. **工具提示(Tooltips)**:YUI-EXT还提供...

    YAHOO yui2.7 文档+ 代码+例子

    - **Ajax通信**:YUI的Ajax组件支持异步与服务器进行数据交换,实现无刷新页面更新。 **2. YUI的可扩展性** YUI的设计非常注重模块化和可扩展性,开发者可以通过编写新的模块来扩展其功能。YUI的模块化结构使得代码...

    yui.rar 例子

    总结来说,“yui.rar 例子”为我们揭示了YUI在实际项目中的应用,从简单的布局到模块化的代码组织,再到丰富的组件库和强大的调试工具,都体现了YUI的强大功能和易用性。学习并掌握YUI,不仅可以提高开发效率,还能...

    YUI-ajax框架开发文档

    通过查看提供的demo,开发者可以直观地了解如何在实际项目中应用YUI的Ajax功能,比如动态加载内容、无刷新更新页面等。 总之,YUI的Ajax框架为开发者提供了强大的工具,使他们能够轻松地构建动态、交互性强的Web...

    yui 资源包

    3. **事件处理**:YUI的事件系统强大,支持事件绑定、解绑、事件冒泡等,使得用户交互编程简单易行。 4. **动画效果**:通过Transition和Anim模块,可以轻松实现平滑的CSS3动画和JavaScript动画效果。 5. **数据绑定...

    一些关于YUI的资源

    4. **Ajax支持**:YUI包含了Ajax组件,可以方便地进行异步数据交换,无需刷新整个页面就能更新部分内容,提升了用户体验。 5. **动画效果**:YUI的Animation模块提供了一系列方法来创建平滑的CSS属性变化动画,如...

    【YUI组件】基于YUI的表单验证器

    这个表单验证器是YUI库中的一个关键部分,用于确保用户在提交表单时输入的数据符合预设的规则和格式,从而提高数据质量和应用的安全性。 **描述分析:** 描述中提到的“NULL”意味着没有提供额外的详细信息。不过...

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    asp.net ajax GridView无刷新

    在ASP.NET AJAX中,GridView的无刷新功能主要依赖于UpdatePanel和AjaxControlToolkit库中的扩展控件。UpdatePanel是ASP.NET AJAX的核心组件,它的工作原理是将包含在其中的控件的更改封装在一个异步请求中,然后仅...

    YUI3.6文档及示例

    2. **事件系统**:YUI的事件处理机制强大且灵活,支持DOM事件、自定义事件以及事件委托,使事件绑定和解绑变得简单易行。 3. **DOM操作**:提供了一系列DOM操作API,如选择元素、创建元素、修改属性等,简化了对...

    yui_2.5.2 类库

    - **Ajax(Asynchronous JavaScript and XML)**:支持异步数据交换,与服务器进行无刷新通信。 - **IO(Input/Output)**:提供HTTP请求功能,支持GET和POST等HTTP方法,用于与服务器进行数据交互。 - **数据...

    YUI.rar_html_javascript YUI_yui_yui javascript

    7. **AJAX**:YUI的AJAX组件支持异步数据交换,使得网页可以在不刷新的情况下更新内容。 8. **动画效果**:YUI的Anim模块可以创建复杂的动画效果,增强了用户体验。 **YUI的示例** 压缩包中的示例文件展示了如何...

    yui_3.8.1.zip

    《深入理解Yahoo UI Library(YUI)3.8.1版本》 Yahoo UI Library(简称YUI)是一款开源的JavaScript库,由Yahoo公司开发并维护,旨在帮助开发者构建高性能、可扩展的Web应用程序。YUI 3.8.1是其发展过程中的一个...

    针对YUI框架API

    IO组件提供了一套完整的Ajax解决方案,能够与服务器进行异步数据交换,实现无刷新页面更新。 9. **JSON处理** JSON模块提供了JSON的解析和序列化功能,方便了数据的传输和存储。 10. **国际化与本地化** YUI的...

    yui_2.9.0前端UI

    YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...

    Ajax(yui-slideshow)

    Ajax,全称Asynchronous JavaScript and XML,是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新,提升了用户体验。YUI(Yahoo! User ...

    YUI JS CSS 打包工具

    YUI JS CSS 打包工具是一款高效的前端资源优化工具,主要针对JavaScript (JS) 和 Cascading Style Sheets (CSS) 文件进行压缩和合并,以提升网页加载速度和整体性能。这款工具由雅虎(Yahoo!)开发,是其开源项目的...

    《YUI使用文档》汉语版的yui学习材料

    《YUI使用文档》汉语版是一份详细的YUI学习材料,它涵盖了这个JavaScript库的核心功能和使用方法。YUI,全称Yahoo! User Interface Library,是Yahoo开发的一个开放源代码的JavaScript库,旨在帮助开发者创建交互式...

    雅虎 用户接口库YUI

    连接管理(Connection Manager ):这个工具包帮助你管理XMLHttpRequest(一般被称为AJAX)事务,它提供对表单提交(form posts),错 误捕获(error handling)和callbacks的全面支持。该工具包也支持文件的上传...

Global site tag (gtag.js) - Google Analytics