ajax

第一步：web.xml中配置拦截

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <servlet>
    <servlet-name>Action</servlet-name>
    <servlet-class>web.Action</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Action</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
</web-app>

第2步：新建实体类。

package entity;

public class user {
private String name;
private String password;
public String getName() {
    return name;
}
public void setName(String name) {
    this.name = name;
}
public String getPassword() {
    return password;
}
public void setPassword(String password) {
    this.password = password;
}

}

第3步：新建action控制层

package web;

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 Action extends HttpServlet{

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        String uri = req.getRequestURI();
        String path =uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out = resp.getWriter();
        if(path.equals("/check")){
            String username = req.getParameter("name");
            if(username.equals("zs")){
                out.print("zhanyong");
            }else{
                out.print("key");
            }
        }
        out.close();
    }

}

第4步：新建jsp文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <style type="text/css">
  .s{
    color: red;
    font-size: 24px;
  }
  </style>
  <script type="text/javascript">
  function getXmlHttpRequest(){
    var xhr = null;
    if((typeof XMLHttpRequest)!='undefined'){
      xhr = new XMLHttpRequest();
    }else {
        xhr= new ActiveXObject('Microsoft.XMLHttp');
        
    }
    return xhr;
  }
  function check(){
     var xhr=getXmlHttpRequest();
     var name=document.getElementById("username").value;
     xhr.open('get', 'check.do?name='+name, true);//'ction.do? 参数名='+参数值
     xhr.onreadystatechange= function(){
     /*
      readyState
      0——未初始化 ,对象已建立，未初始化
      1——初始化 ，                    尚没有调用send方法
      2——发送数据   ，send方法已调用，当前状态Http头未知
      3——发送数据中，已接受部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误为
      4—— (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
     */
     if(xhr.readyState==4){
     /*
     status属性返回当前请求的http状态码,
                 此属性仅当数据发送并接收完毕后才可获取
     200 OK 一切正常，对GET和POST请求的应答文档跟在后面。
     */
        if(xhr.status==200){
        var txt = xhr.responseText;
        document.getElementById("username_msg").innerHTML = txt;
        }
     }
     };
     xhr.send(null);
  }
  </script>
 

  </head>
  
  <body>
         用户名：<input  id="username" onblur="check();"/>
         <span class="s" id="username_msg"></span>
  </body>
</html>

posted on 2016-05-07 20:36 南神阅读(85) 评论(0) 收藏举报