Struts2 Ajax校验

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Ajax(Asynchronous javascript and xml)：异步刷新技术

技术组成：
CSS + xml +JavaScript +DOM

Ajax核心对象： XMLHttpRequest
应用场景：实现页面的局部刷新

Ajax:异步刷新技术

XMLHttpRequest的常用方法

XMLHttpRequest的常用属性：

readystate：XMLHttpRequest的状态信息

onreadystatechange：设置回调函数

status：返回当前请求的Http状态码

responseText：以文本形式获取相应之

responseXML:以XML形式获取响应值，并且解析成DOM对象返回

statusText:返回当前请求的响应行状态

使用Ajax发送GET请求及处理响应

在index.jsp 验证用户是否存在

步骤：

1.创建XMLHttpRequest对象

2.设置回调函数

3.初始化XMLHttpRequest对象

4.发送请求

<%@ 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>

    <base href="<%=basePath%>">

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

    <script type="text/javascript">

      //给文本框注册一个失去焦点事件

    window.onload=function(){

        var dom=document.getElementById("txtName");

          dom.onblur=function(){

             myajax();

          };

    };

    function myajax(){

       //01.定制出 xhr对象

       var xhr;

       //02.能力检测

       if(window.XMLHttpRequest){

           //非IE浏览器

          xhr=new XMLHttpRequest();

       }else{

          //IE内核

          xhr=new ActiveXObject("Microsoft.XMLHttp");

       }

        var dom=document.getElementById("txtName");

        var myspan=document.getElementById("msg");

        var myval=dom.value;

       //03.构建请求地址

       //xhr.open("请求类型","请求地址","是否异步");

       xhr.open("get","<%=path%>/servlet/CheckUserServlet?uname="+myval,true);

       //04.设置回调函数     响应回来的数据

       xhr.onreadystatechange=function(){

         //什么

         if(xhr.readyState==4&&xhr.status==200){

            //获取响应数据

            var data=xhr.responseText;

            if(data=='OK'){

                 myspan.innerText="用户名已经被注册";

            }else{

                 myspan.innerText="用户名可以注册";

            }

         }

       };

       //05.用send真正的发送请求

       xhr.send(null);

       }

    </script>

  </head>

  <body>

    <input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>

    <input type="password" name="txtPwd"/>

  </body>

</html>

通过XMLHttpRequest的返回值判断当前浏览器创建XMLHttpRequest对象的方式。如果为true，说明是其他浏览器；如果为false，说明是ie浏览器，需使用new ActiveXObject("Microsoft.XMLHttp")对象

通过XMLHttpRequest对象的onreadystatechange属性设置回调函数，用于当请求成功后接收服务器端返回的数据

通过XMLHttpRequest对象的open()方法，传入参数完成初始化XMLHttpRequest对象的工作。第一个参数为Http请求方式，选择发送Httpget 请求，因此参数为get。第二个参数为要发送的url请求路径，将要发送的数据附加到url路径后面

调用XMLHttpRequest对象的send()方法，参数为要发送到服务器端的数据，因为采用"get"方式请求时，参数已经附加到url路径后，所以直接设置为null。如果send()方法不设值，在不同的浏览器下可能存在不兼容问题。

servlet

package cn.servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class CheckUserServlet extends HttpServlet {

    /**

     * hh

     */

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doPost(request, response);

    }

    /**

     *hh

     */

    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        String uname=request.getParameter("uname");

        if(uname.equals("admin")){

            response.getWriter().write("OK");

        }else{

            response.getWriter().write("NO");

        }

    }

}

效果：

如果用户名不等于admin，显示用户可以注册；等于admin，显示用户已经被注册

使用Ajax发送post请求及处理响应

get与post方式实现Ajax的区别
发送方式	步骤三：初始化XMLHttpRequest对象	步骤四：发送请求
get	指定XMLHttpRequest对象的open()方法中method参数为“get”	指定XMLHttpRequest对象的send()的data参数为“null”
post	1.指定XMLHttpRequest对象的open()方法中method参数为“post” 2.指定XMLHttpRequest对象要请求的Http头信息，该Http请求头信息为固定写法	指定XMLHttpRequest对象的send()的data参数的值，即该请求需要携带的具体数据

需注意采用get方式发送请求时，XMLHttpRequest.send()方法不需要传递参数，设为null即可；采用post方式发送请求时，XMLHttpRequest.send()方法中指定传递的参数

<%@ 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>

    <base href="<%=basePath%>">

    <title>Ajax验证用户名是否存在   post发生请求</title>

    <script type="text/javascript">

      //给文本框注册一个失去焦点事件

    window.onload=function(){

        var dom=document.getElementById("txtName");

          dom.onblur=function(){

             myajax();

          };

    };

    function myajax(){

       //01.定制出 xhr对象

       var xhr;

       //02.能力检测

       if(window.XMLHttpRequest){

           //非IE浏览器

          xhr=new XMLHttpRequest();

       }else{

          //IE内核

          xhr=new ActiveXObject("Microsoft.XMLHttp");

       }

        var dom=document.getElementById("txtName");

        var myspan=document.getElementById("msg");

        var myval=dom.value;

       //03.构建请求地址

       //xhr.open("请求类型","请求地址","是否异步");

       xhr.open("post","<%=path%>/servlet/CheckUserServlet?uname="+myval,true);

       //04.设置回调函数     响应回来的数据

       xhr.onreadystatechange=function(){

         //什么

         if(xhr.readyState==4&&xhr.status==200){

            //获取响应数据

            var data=xhr.responseText;

            if(data=='OK'){

                 myspan.innerText="用户名已经被注册";

            }else{

                 myspan.innerText="用户名可以注册";

            }

         }

       };

       //05.用send真正的发送post请求

       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

       xhr.send("uname"+myval);

       }

    </script>

  </head>

  <body>

  <h1>Ajax验证用户名是否存在   post发生请求</h1>

    用户名：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>

    密码：<input type="password" name="txtPwd"/>

  </body>

</html>