ajax基础原理

时间：2010-11-08 来源：mingwjj

通过对用户名的校验来学习:
1.首先要了解ajax的本质xmlhttprequest:

创建xmlhttprequest对象
注册回调函数
设置连接信息
发送数据,开始和服务器端进行交互
接收相应数据

var xmlhttp;

function verify()
{
    //1.使用dom的方式获取文本框的值
    var userName = document.getElementById("userName").value;

    //2.创建xmlhttprequest对象
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
        //针对某些特定版本的Mozilla浏览器的BUG进行修正
        if(xmlhttp.overrideMimeType)
        {
            xmlhttp.overrideMimeType("text/xml");
        }
    }
    else if(window.ActiveXObject)
    {
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i=0; i<activexName.length; i++)
        {
            try
            {
                xmlhttp = new ActiveXObject(activexName[i]);
                break;
            }
            catch(e)
            {}
        }
    }
    //确认xmlhttprequest对象创建成功
    if(!xmlhttp)
    {
        alert("XMLHttpRequest对象创建失败!");
        return;
    }
    else
    {
        alert(xmlhttp);
    }

    //3.注册回调函数,不加括号,加上括号就会把函数的返回值注册上
    xmlhttp.onreadystatechange = callback;
    //4.设置连接信息
    //第一个参数表示http的请求方式,支持所以http的请求,主要使用get和post
    //第二个参数表示请求的url地址,get方式请求的参数也在url中
    //第二个参数表示采用异步还是同步,true表示异步
    xmlhttp.open("GET", "AjaxServer?name=" + userName, true);

    //xmlhttp.open("POST", "AjaxServer", true);
    //xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //xmlhttp.send("name=" + userName);

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

//回调函数
function callback()
{
    //6.接收相应数据
    //判断对象的状态是否交互完成
    if(xmlhttp.readyState == 4)
    {
        //判断http的交互是否成功
        if(xmlhttp.status == 200)
        {
            //获取服务器端返回的数据
            var responseText = xmlhttp.responseText;
            //将结果显示在页面上
            var divNode = document.getElementById("result");
            //设置元素节点的html内容
            divNode.innerHTML = responseText;
        }
    }
}

2.jQuery对xmlhttprequest对象的包装:

function verify()
{
    //document.getElementById("userName");
    var jqueryObj = $("#userName");
    //获取节点的值
    var userName = jqueryObj.val();

    //2.将文本框中的数据发送给服务器的servlet
    //使用jquery的XMLHTTPrequest对象get请求的封装
    $.get("AjaxServer?name=" + userName,null,callback);
}

function callback(data)
{
    //3.接收服务器端返回的数据
    //alert(data);
    //4.将服务器返回的数据动态的显示在页面上
    var resultObj = $("#result");
    //动态改变页面中div节点中的内容
    resultObj.html(data);

}

3.jQuery的简单写法

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

附:html代码

用户名:<input type="text" id="userName" onblur="verify()"/>
<div id="result"></div>