基于JSP的AJAX局部刷新实例

首先是JSP页面 关键是js中的几个函数

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


        <title>My JSP 'index.jsp' starting page</title>


    <link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
      var xmlHttp;
      function createXMLHttpRequest(){
          try{
              xmlHttp=new XMLHttpRequest();//非IE
          }catch(e){
              try{
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//ie6
              }catch(e){
                  try{
                      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE5
                  }catch(e){
                      alert("您的浏览器版本太低,不支持ajax");
                  }
              }                  
          }
      }    
      var uname;
      var upwd;
      function login(){
          uname=document.getElementById("uname").value;
          upwd=document.getElementById("upwd").value;
          if(uname.length==0||upwd.length==0){
              alert("用户名或密码不允许为空!");
          }else{
              doAjax();
          }
      }
      
      function doAjax(){
          createXMLHttpRequest();
          xmlHttp.open("get","/ajax/login?uname="+uname+"&upwd="+upwd,true);//是否为异步
          xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//若用post的话需要这样配置
          xmlHttp.onreadystatechange=callBack;
          xmlHttp.send(null);
      }
    function callBack(){
        if(xmlHttp.readyState==4){
            if(xmlHttp.status==200){
                var r=xmlHttp.responseText;
                if(r==uname){
                    document.getElementById("loginChange").innerHTML="<span>欢迎您:"+uname+"</span>";
                }else{
                    document.getElementById("loginChange").innerHTML=rss;
                }
            }
        }
    }
</script>
    
</head>
    
    <body>
        <div>
            <form action="" name="form1" method="post">
                <label>
                    用户名
                </label>
                <input type="text" id="uname" name="uname" />
                <br />
                <label>
                    密码
                </label>
                <input type="password" id="upwd" name="upwd" />
                <br />
                <input type="button" value="提交" οnclick="login()" />
            </form>
            <p id="loginChange"></p>
        </div>
    </body>



</html>

下面是Servlet,因为这个例子很简单,返回的信息是responseText的,好像是还可以返回.xml jason什么的,下一步要了解一下,现在先看这个简单的好了。

回到刚才,因为返回的是这个responseText,所以在servlet中药print或者write出来


package com.ajax;

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

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

public class LoginServlet extends HttpServlet{

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;utf-8");
        PrintWriter out=resp.getWriter();
        String uname=req.getParameter("uname");
        String upwd=req.getParameter("upwd");
        out.print(uname);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        this.doGet(req, resp);
    }
        
}

然后最后就是web.xml的配置了


  <servlet>
    <servlet-name>login</servlet-name>
    <servlet-class>com.ajax.LoginServlet</servlet-class>  
  </servlet>
 
  <servlet-mapping>
      <servlet-name>login</servlet-name>
      <url-pattern>/login</url-pattern>
  </servlet-mapping>
 





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值