`

AJAX学习笔记---应用AJAX模仿"联系站长"(JSP版)

阅读更多

基于对XML的学习,想好好的学习一下AJAX。刚刚学习一个入门,模仿书中的例子,实践一下先。

jsp页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  
<head>
    
<script type="text/javascript">
    
function ajaxSubmit(path){
      
// 获取留言相关信息
      var name = document.forms[0].name.value;
      
var email = document.forms[0].email.value;
      
var title = document.forms[0].title.value;
      
var content = document.forms[0].content.value;
      
// 创建XMLHttpRequest对象
      var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      
// new XMLHttpRequest();
      // 创建请求结果处理程序
      xmlhttp.onreadystatechange = function(){
        
if(xmlhttp.readyState==4 && xmlhttp.status==200){   
          
var date = xmlhttp.responseText;
          addMsg(date);
        }

      }

      
// 打开连接,true表示异步提交
      xmlhttp.open("post",path+"/add.do",true);
      
// 当方法为post时需要如下设置http头
      xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');     
      
// 发送数据
      xmlhttp.send("name="+escape(name)+"&email="+escape(email)+"&title="+escape(title)+"&content="+escape(content));
    }

    
// 添加留言信息的方法
    function addMsg(date){
      
// 获取留言DIV的容器
      var msg = document.getElementById("msgList");
      
// 创建新标签
      var dl = document.createElement("dl");
      
var dt = document.createElement("dt");
      
var ddname = document.createElement("dd");
      
var ddcontent = document.createElement("dd");
      
// 插入标签
      msg.insertBefore(dl,msg.firstChild);
      dl.appendChild(dt);
      dl.appendChild(ddname);
      dl.appendChild(ddcontent);
      dt.innerHTML 
= "标题:"+document.forms[0].title.value;
      ddname.innerHTML 
= "留言者:"+document.forms[0].name.value+"&nbsp;时间:" + date;
      ddcontent.innerHTML 
= document.forms[0].content.value;
      
// 清空输入信息
      document.forms[0].name.value="";
      document.forms[
0].title.value="";
      document.forms[
0].email.value="";
      document.forms[
0].content.value="";
    }

    
</script>
  
</head>
  
<body>
    
<div id="msgList">
    
<!--初始化页面时,显示从数据库读取数据  -->
    
</div>
    
<div id="postBox">
      
<form action="/add.do">
        
<dl>
          
<dt>如果你有任何评论、问题、建议,请发邮件给我:</dt>
          
<dd>姓名:<input type="text" maxlength="150" size="45" name="name"/></dd>
          
<dd>Email:<input type="text" maxlength="150" size="45" name="email"/></dd>
          
<dd>标题:<input type="text" maxlength="150" size="45" name="title"/></dd>
          
<dd>内容<textarea rows="10" cols="45" name="content"></textarea></dd>
          
<dd>
            
<input type="button" onclick="ajaxSubmit('<%=request.getContextPath()%>');" value="发送留言" />
          
</dd>
        
</dl>
      
</form>
    
</div>
  
</body>

AddAction.java
package com.realsmy.mytangs.action;

import java.io.IOException;
import java.io.PrintWriter;

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

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;


public class AddAction extends Action {
    
    
public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response) 
{
        String name 
= request.getParameter("name");
        String email 
= request.getParameter("email");
        String title 
= request.getParameter("title");
        String content 
= request.getParameter("content");
        
// 与数据库交互进行处理,省略。
        PrintWriter out = null;
        
try {
            out 
= response.getWriter();
        }
 catch (IOException e) {
            e.printStackTrace();
        }

        out.print(
"2007-09-15");
        
return null;
    }


}


这是对基于AJAX的开发模式的简单理解。

记录于此,继续学习。
分享到:
评论

相关推荐

    云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于ssm的云的学习笔记系统-ssm-java代码

    云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...

    AJAX学习笔记----jquery+servlet实现用户名验证

    NULL 博文链接:https://persistc.iteye.com/blog/264072

    ajax 学习笔记源代码

    ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...

    云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-基于Web的云的学习笔记系统设计与实现-java代码

    云的学习笔记-云的学习笔记系统-云的学习笔记系统源码-云的学习笔记管理系统-云的学习笔记管理系统java代码-云的学习笔记系统设计与实现-基于ssm的云的学习笔记系统-基于Web的云的学习笔记系统设计与实现-云的学习...

    Ajax-ajax-contact-form-wordpress.zip

    Ajax-ajax-contact-form-wordpress.zip,wordpress的联系人表单,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...

    Ajax-wc-ajax-product-filter.zip

    Ajax-wc-ajax-product-filter.zip,Woomerce AJAX产品过滤器-是一个插件,允许您根据类别、属性和价格轻松过滤产品。您可以对产品进行排序,导航到下一页和上一页,而无需重新加载该页。,ajax代表异步javascript和xml...

    jboss-ajax4jsf-1.1.1-src

    【标题】"jboss-ajax4jsf-1.1.1-src" 是一个开源项目,主要涉及Ajax4jsf框架的源代码版本,版本号为1.1.1。Ajax4jsf是针对JavaServer Faces (JSF) 技术的一个扩展,它允许开发者在JSF应用中无缝集成Ajax功能,提升...

    AJAX应用笔记(1)

    本笔记将探讨AJAX的基本原理和实现方式,通过分析`index.jsp`和`easy.jsp`两个文件,来展示一个简单的AJAX应用。 1. **AJAX 基本概念** - **异步性**:AJAX的核心特性是异步处理,即在后台与服务器通信,不会阻塞...

    Ajax-gunbasic-js.zip

    Ajax-gunbasic-js.zip,gunbasic js是一个库,用于快速开发基于ajax的web应用程序,这些应用程序易于独立测试。编写ajax代码只需要一行客户端js和服务器中的实现。适用于快速成型和团队开发。,ajax代表异步javascript...

    Ajax-bootstrap-select-ajax.zip

    Ajax-bootstrap-select-ajax.zip,bootstrap select对数据源的ajax支持,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...

    AJAX学习笔记(内含实例)

    AJAX学习笔记。内含Java调用的两个实例,及JavaScript的ajax工具函数,可快速入门,也可当手册使用。个人精心整理,值得收藏。 更多:http://download.csdn.net/user/daillo/all

    Ajax-ajax-shopping-cart-page.zip

    Ajax-ajax-shopping-cart-page.zip,magento 2购物车页面ajax更新数量,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...

    Ajax-magento2-ajax-layered-navigation.zip

    Ajax-magento2-ajax-layered-navigation.zip,ajax分层导航magento 2提供了一个过滤器列表,帮助您的客户以最短的方式搜索和获得他们最喜欢的产品。这个扩展应用了现代ajax技术来增强过滤系统,以提高用户对页面上每...

Global site tag (gtag.js) - Google Analytics