使用XMLHttpRequest处理一般数据（一）

最新推荐文章于 2024-07-25 12:41:07 发布

dabizime

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量276

点赞数

分类专栏： Ajax 文章标签： xmlhttprequest ajax integer 服务器 servlet callback

本文链接：https://blog.csdn.net/dabizime/article/details/5490043

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先写一个html页面userajax.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>用户校验ajax实例</title>
     
     
    <script type="text/javascript" src="js/validateajax.js"></script>
</head>
<body>
    用户名校验AJAX实例，请输入用户名：</br>
    <input type="text" id="userName"><br>
    <input type="button" value="检查" οnclick="validateajax()">
    
     
    <div id="result"></div>

</body>
</html>

在写一个servlet类AJAXServlet

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

public class AJAXServlet extends HttpServlet{

    @Override
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        try{
            httpServletResponse.setContentType("text/html;charset=utf-8");
            PrintWriter out = httpServletResponse.getWriter();

            //加一个计数器检测浏览器中缓存中的情况根据不同的浏览器看是不是读取同一个缓存
            Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
            int temp = 0;
            if(inte == null){
                temp = 1;
            }else{
                temp = inte.intValue() + 1;
            }
            httpServletRequest.getSession().setAttribute("total",temp);

            //1.取参数
            String username = httpServletRequest.getParameter("username");
             //2.检查参数是否有问题
            if(username == null || username.length() == 0){
                out.println("用户名不能为空");
            } else{
                 //3.校验操作
                if(username.equals("wangxingkui")){
                    //4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
                    //写法没有变化，本质发生了改变
                    out.println("用户名[" + username + "]已经存在，请使用其他用户名, " + temp);
                } else{

                    out.println("用户名[" + username + "]尚未存在，可以使用该用户名注册, " + temp);
                }
            }
        }catch(Exception e){
            e.printStackTrace();
        }
    }

    @Override
    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
              doGet(httpServletRequest, httpServletResponse);
    }
}

最后写一个js validateajax.js

//用户名校验的方法
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function validateajax(){

    //使用DOM方式获取文本框中的值
    //document.getElementById("userName")是dom中获取元素节点的一种方法
    //value可以获得一个元素节点的value属性值
    var userName = document.getElementById("userName").value;

    //1.创建XMLHTTPRequest对象
    //这是XMLHTTPRequest对象五部使用中最复杂的一步
    //需要针对IE和其他类型的浏览器建立这个对象的不同方式的不同代码
    if(window.XMLHttpRequest){
        //针对FireFox.Mozillar.Opear.safari.ie7.ie8
        xmlhttp = new XMLHttpRequest();
        //针对某些特定版本的 Mozillar浏览器的bug进行修正
        if(xmlhttp.overrideMimeType){
            xmlhttp.overrideMimeType("text/xml")
        }
    }else if(window.ActiveXObject()){
         //针对ie6,ie5.5,ie5
        //两个可以创建XMLHTTPRequet的对象的控件名称，保存在一个js数组中
        //排在前面的版本较新
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i=0;i<activexName.length;i++){
            try{
         //取出一个空间名进行创建，如果创建成功就终止循环
          //如果创建失败，会抛出异常，然后可以继续循环，继续执行创建
                xmlhttp = new ActiveXObject([i]);
                break;
            }catch(e){

            }
        }
    }
    //确认XMLHTTPRequest对象创建成功
    if(!xmlhttp){
        alert("XMLHttpRequest对象创建失败")
    }else{
        alert(xmlhttp.readyState);
    }
    //2.注册回调函数
    //注册回调函数时，只需要函数名，不需要括号
    //我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
    xmlhttp.onreadystatechange = callback;

   //3.设置连接信息
    //第一个参数表示http请求的方式，支持所有http请求的方式，主要是get和post
    //第二个参数标识请求的url地址，get方式请求的参数也在url中
    //第三个参数标识采用异步还是同步方式交互，true表示异步
    xmlhttp.open("GET","AJAXServlet?username=" + userName,true);

    //4.发送数据开始和服务器端交互
    //同步方式下，send这句话会在服务器端数据回来后才执行
    //异步方式下，send这句话会立即完成执行
     xmlhttp.send(null);

}

//回调函数
function callback(){
    alert(xmlhttp.readyState);
    //5.接收响应数据
   //判断对象的状态时交互完成
    if(xmlhttp.readyState == 4){
        //判断http的交互是否成功
        if(xmlhttp.status == 200){
            //获取服务器端返回的数据
            //获取服务器端输出的纯文本数据
            var responseText = xmlhttp.responseText;
            //将数据显示在页面上
            //通过dom方式找到div标签所对应的元素节点
            var divNode = document.getElementById("result");
            //设置元素节点中的html内容
            divNode.innerHTML = responseText;
        }else{
            alert("出错了！！！")
        }
    }
}

当然最后在要web.xml中配置servlet

dabizime

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用XMLHttpRequest处理一般数据（一）

首先写一个html页面userajax.html "http://www.w3.org/TR/html4/loose.dtd"> 用户校验ajax实例用户名校验AJAX实例，请输入用户名： 456--> 123456--> 在写一个servlet类AJA
复制链接

扫一扫

专栏目录