基于JSP的AJAX局部刷新实例

最新推荐文章于 2021-08-06 10:38:46 发布

查理001

最新推荐文章于 2021-08-06 10:38:46 发布

阅读量2.9k

点赞数

分类专栏： java 文章标签： jsp ajax xmlhttprequest servlet function stylesheet

本文链接：https://blog.csdn.net/chaoowang/article/details/7816963

版权

java 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

首先是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>