Ajax入门——XMLHttpRequest对象的使用

最新推荐文章于 2023-08-08 20:30:15 发布

Fighting_Lin

最新推荐文章于 2023-08-08 20:30:15 发布

阅读量774

点赞数

分类专栏：技术交流文章标签： xmlhttprequest ajax email 服务器 callback mozilla

本文链接：https://blog.csdn.net/Fighting_Lin/article/details/5425114

版权

技术交流专栏收录该内容

6 篇文章 0 订阅

订阅专栏

index.html代码：

<%--
    Document   : index
    Created on : 2010-3-25, 12:46:06
    Author     : zhan
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd ">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript">
            var xmlhttp;
            //var array = [];//定义一个数组来存储XMLHttpRequest的状态
            function submit(){
                ///alert("Test submit().");
                //1.创建XMLHttpRequest对象
                if(window.XMLHttpRequest){
                    //IE7.0,IE8.0,FireFox,Mozilla,Safari,Opera
                    xmlhttp = new XMLHttpRequest();
                    if(xmlhttp.overrideMineType){
                        xmlhttp.overrideMineType("text/xml");
                    }
                }else if(window.ActiveXObject){
                    //IE5,IE5.5,IE6..
                    var activexName = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
                    for(var i=0;i<activexName.length;i++){
                        try{
                            xmlhttp = new ActiveXObject(activexName[i]);
                            break;
                        }catch(e){
                        }
                    }
                }

                //判断浏览器是否支持创建XMLHttpRequest对象
                if(xmlhttp == undefined || xmlhttp == null){
                    alert("当前浏览器不支持创建XMLHttpRequest对象");
                    return;
                }

                //alert(xmlhttp);
                //array.push(xmlhttp.readyState);
                //2.注册回调方法
                xmlhttp.onreadystatechange = callback;
                //错误的写法
                //xmlhttp.onreadystatechange = callback();

//获取文本框中用户输入的内容
var email = document.getElementById("email").value;

                //GET方式
                //3.设置和服务器交互的相应参数
                xmlhttp.open("GET", "Email?email="+email, true, "admin", "admin");

                //4.设置向服务器端发送的数据，启动和服务器的交互
                xmlhttp.send(null);

               //POST方式
               /*
               xmlhttp.open("POST", "Email", true, "admin", "admin");
               xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
               xmlhttp.send("email="+email);
               */
            }
            //回调方法
            function callback(){
                //array.push(xmlhttp.readyState);
                //5.判断和服务器的交互是否完成，还要判断服务器是否正确返回了数据
                if(xmlhttp.readyState == 4){
                    //readyState=0 表示XMLHttpRequest对象已经创建，但没有初始化(未调用open方法)
                    //readyState=1 表示open方法已经调用，但是没有向服务器发送数据(send方法没有调用)
                    //readyState=2 表示send方法被调用，服务器尚未开始接收数据
                    //readyState=3 表示正在接收服务器发送的数据，http响应头信息已经接收完成，响应数据尚未接收完成
                    //readyState=4 表示响应数据接收完成，和服务器的交互已经完成
                    if(xmlhttp.status == 200){
                        //status=404 表示未找到
                        //status=500 表示服务器内部错误
                        //服务器的响应代码是200，表示正确返回了数据
                        //xmlhttp.statusText返回服务器返回的状态码的文本信息
                        //纯文本数据的接受方法
                        var msg = xmlhttp.responseText;

                        //XML数据对应的DOM对象接受方法
                        //使用前提：要求服务器端设置 xmlhttp.setRequestHeader("Content-type", "text/xml")
                        //var domXml = xmlhttp.responseXML;

                        //向div中填充内容
                        var div = document.getElementById("msg");
                        div.innerHTML = msg;

                        //alert(array);
                        /*alert(xmlhttp.responseXML.documentElement);
                         * 判断xmlhttp.responseXML是否正确解析
                         * xmlhttp.responseXML.documentElement == null || xmlhttp.responseXML.documentElement.nodeName != ""*/
                    }
                }

            }
        </script>
    </head>
    <body>
        <h3>163邮箱注册</h3>
        邮箱名：<input id="email" type="text"/><span id="msg" style="color: red; font-size: 12px;"></span>
        <br />
        <input type="button" οnclick="submit()" value="提交"/>
    </body>
</html>
Servlet代码： (Email)

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String email = request.getParameter("email");
            if (email.equals("") || email == null) {
                out.print("   邮箱不能为空!");
            } else {
                email = new String(email.getBytes("ISO8859-1"), "UTF-8");
                if (email.equals("zhanknow@163.com ")) {
                    out.print("   *邮箱名：[" + email + "]已经存在，请注册其它名称");
                } else {
                    out.print("   恭喜你注册成功，你可以用[" + email + "]登录了");
                }
            }
        } finally {
            out.close();
        }
    }