Ajax JS 小示例

最新推荐文章于 2025-12-31 16:31:20 发布

原创最新推荐文章于 2025-12-31 16:31:20 发布 · 672 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #javascript #callback #import #html

HTML页面

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script language="javascript" src="jquery.js"></script>
    <script language="javascript" src="xml.js"></script>

    <meta http-equiv=”Content-Language” content=”UTF-8” />
    <title>ajax实例 TEST</title>
</head>
<body>
    ajax实例 TEST <br/>

        <input type="text" id="username"name="username"/>
        <input type="button" value="ok" onclick="varify()">
        <div id="msg"></div>

</body>
</html>

JAVASCRIPT:

var xmlhttp;
function varify(){
    var username = document.getElementById("username").value;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
        if(xmlhttp.overrideMimeType ){
            xmlhttp.overrideMimeType("text/xml");
        }
    }else if(window.ActiveXObject) {
        var activexName = ["MSXML.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i;i<activexName.length;i++){
            try{
                xmlhttp = new ActiveXObject(activexName[i]);
                break;
            }catch(e){
            }
        }
    }
    //注册回调函数时，只需要函数名，不要回括号
    xmlhttp.onreadystatechange=callback;
    /*
     * 第一个参数表示http的请求方式，支持所有http的请求方式，主要为get和post;
     * 第二个参数表示请求的url地址，get方式参数也在URL中;
     * 第三个参数表示采用异步还是同步方式交互，true 表示异步;
     */
   // xmlhttp.open("GET","AjaxServlet?name="+username,true);
   // xmlhttp.send(null);


    //post方式
    xmlhttp.open("POST","AjaxServlet",true);
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") ;
    // 参数
    xmlhttp.send("name="+username);
}

// 回调函数
function callback() {

    //判断对象的状态是交互完成的
    if(xmlhttp.readyState == 4){
        if(xmlhttp.status==200){

         //  使用纯文本方式   out.println("用户名[" + name + "]已经存在，请使用其他用户名, ");
             var responseText = xmlhttp.responseText;
             alert(responseText) ;


             //使用XML   s.append("用户名[" + name + "]已经存在，请使用其他用户名, ").append("</message>");
             var domObj = xmlhttp.responseXML;
             var messageNode = domObj.getElementsByTagName("message");
             var responseMessage = messageNode[0].firstChild.nodeValue;

             alert(responseMessage) ;

             document.getElementById("msg").innerHTML=responseMessage;
        }
     }
}

==================

AjaxServlet

import javax.servlet.ServletException;
import javax.servlet.http.*;
import java.io.*;

public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/xml;charset=utf-8");  //使用XML 为 text/xml
        PrintWriter out = response.getWriter();
        String name = request.getParameter("name");

        StringBuilder s= new StringBuilder();
        s.append("<message>");
        if(name==null||name.length()==0){
            s.append("用户不能为空").append("</message>");
        } else{

            if(name.equals("qq")) {
                s.append("用户名[" + name + "]已经存在，请使用其他用户名, ").append("</message>");
            } else{
                s.append("用户名[" + name + "]不存在，可以使用").append("</message>");
            }
            out.println(s.toString());
            System.out.println(s);
        }
    }
}