(AJAX学习一) AJAX入门

来源：互联网发布：5.11淘宝真假编辑：程序博客网时间：2024/04/30 09:50

AJAX--Asynchronous Javascript And XML

1、使用XHTML和CSS的基于标准的表示技术
2、使用DOM进行动态显示和交互
3、使用XML和XSLT进行数据交换和处理
4、使用XMLHttpRequest进行异步数据检索
5、使用Javascript将以上技术融合在一起

写一个入门实例感受了一下Ajax的效果，感受Ajax流行框架JQuery...

//用XMLHttpRequest对象进行AJAX异步交互 
var xmlhttp;
function verify(){
    //DOM解析获得文本框的值 
    var name = document.getElementById("username").value;
    
    //第一步 获得XMLHttpRequest对象 
    if(window.XMLHttpRequest){
        //针对FireFox mozillar Opera IE7 IE8... 
        xmlhttp = new XMLHttpRequest();
        
            //针对某些特定版本的mozillar浏览器的BUG的修正 
        if(xmlhttp.overrideMimeType){
            xmlhttp.overrideMimeType("text/xml");
        }
    }else if(window.ActiveXObject){
        //针对IE6 IE5... 
        var activexName = ["MSXML2.XMLHTTP","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.5.0","Microsoft.XMLHTTP"];
        for(var i=0;i<activexName.length;i++){
            try{
                xmlhttp = new ActiveXObject(activexName[i]); 
                break;
            }catch(e){
            }
        }
    }
    //if(!xmlhttp){ 
    //  alert("XMLHttpRequest创建失败！"); 
    //} 
    //else{ 
    //  alert(xmlhttp); 
    //} 
    
    //第二步 注册回调函数 
    xmlhttp.onreadystatechange = callback;
    
    //第三步 设置连接信息  
    //参数一是HTTP请求方式 参数二表示URL地址 参数三表示是异步或同步(true为异步) 
    xmlhttp.open("GET","AJAXServer?name=" + name,true);
    
        //xmlhttp.open("POST","AJAXServer",true); 
        //POST方式需要设置HTTP的请求头 
        //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
        //xmlhttp.send("name=" + name); 
        
    
    //第四步 发送数据 
    //同步方式下send会在服务器数据回来后才执行 异步方式下send立即完成执行 
    xmlhttp.send(null);
}
//回调函数 
function callback(){
    //判断对象交互 
    if(xmlhttp.readyState == 4){
        //判断http交互 
        if(xmlhttp.status == 200){
            //获得服务器返回数据 
            var responseText = xmlhttp.responseText; //获得纯文本数据 
            //将结果显示在页面 
            var divNode = document.getElementById("result");
            //设置元素节点的HTML内容 
            divNode.innerHTML = responseText;
        }
    }
}

JQuery实现代码要简单的多。。。这是记得引入<script type="text/javascript" src="js/jquery-1.2.js"></script>

function verify(){
    $.get("AJAXServer?name=" + $("#username").val(),null,function(data){
        $("#result").html(data);
    });
}

服务器端Servlet

try {
            response.setContentType("text/html;charset=utf-8");
            PrintWriter out = response.getWriter();
            String name = request.getParameter("name");
            if(name == null || name.length() == 0) {
                out.println("用户名不能为空");
            }
            else {
                if(name.equals("gqh")){
                    out.println("用户["+name+"]已经存在，请使用其它用户!");
                }
                else{
                    out.println("用户["+name+"]尚不存在，可以使用该用户!");
                }
            }
        }catch(Exception e){
            e.printStackTrace();
        }

       <input type="text" id="username" />
       <input type="button" value="校验" onclick="verify()"/>
       <div id="result"></div>