自己封装的AJAX

// 提示消息

function messageDiv(title)
{
    var messageDiv = document.createElement('

');
    messageDiv.innerHTML = '+screen.height+'" id="message">'+
                          ''+
                          '

' +
                          ' ' + title + ',
连接未初始化...

';
    var length = document.getElementsByName("message").length;
    messageDiv.style.cssText = "position:absolute;bottom:" + (length * 24) + "px;left:0px;display:none";
    document.body.appendChild(messageDiv);
    this.clear = function () {
        document.body.removeChild(messageDiv);
        var msg = document.getElementsByName("message");
        for (var i=0;i<msg.length;i++){
            msg[i].parentNode.style.cssText = "position:absolute;bottom:" + (i*24) + "px;left:0px";
        }
    }
    this.showMsg = function (message) {
        messageDiv.style.display = "";
        messageDiv.all.Span1.innerHTML += '
' + message;
    }
}

// 兼容IE与其它浏览器（From Sajax.php v0.12）

function createXMLHttpRequest() {
    var requestObject;
    var _msxmlhttp = new Array(
        'Msxml2.XMLHTTP.5.0',
        'Msxml2.XMLHTTP.4.0',
        'Msxml2.XMLHTTP.3.0',
        'Msxml2.XMLHTTP',
        'Microsoft.XMLHTTP');
    for(var i = 0; i < _msxmlhttp.length; i++) {
        try {
            if(requestObject = new ActiveXObject(_msxmlhttp[i])) {
                break;
            }
        } catch (e) {
            requestObject = null;
        }
    }
    if(!requestObject && typeof XMLHttpRequest != 'undefined') {
        requestObject = new XMLHttpRequest();
    }

    if(!requestObject) {
        alert('Could not create connection object.');
    }

    return requestObject;
}

var submitMethodConst = new Object();
submitMethodConst.POST = 'POST';
submitMethodConst.GET = 'GET';

function AjaxBase() {

    this.author = 'QBQ';
    this.version = '2009-12-10 build1.0a';

    var requestObject = new createXMLHttpRequest();

    this.defaultRequest = function(url, callback, postString) {
      this.request(url, callback, true, submitMethodConst.POST, postString, false);
    }

    /**
     *
     * @param {} url 请求页面URL（必填）
     * @param {} callback 返回值处理函数（必填）
     * @param {} isAsync 是否异步 ,(ture|false), 默认true
     * @param {} 请求方式,(submitMethodConst.POST | submitMethodConst.GET), 默认get
     * @param {} postString 请求方式为post时,请求内容
     * @param {} messageTitle 请求内容标题
     */
    this.request = function (url, callback, isAsync, submitMethod, postString, messageTitle, cache) {

        var async = true;
        var method = submitMethodConst.GET;
        var params = '';
        var title = '请等待';
        var useCache = false;

        async = isAsync;
        useCache = cache;

        if (submitMethod) {
            method = submitMethod;
        }

        if (typeof(postString) == 'string') {
            params = postString;
            if (!useCache) {
                params += '&sid=' + Math.random();
            }
        }

        if (messageTitle != '' && typeof(messageTitle) == 'string') {
            title = "正在获取" + messageTitle;
        }

        var msgbox = new messageDiv(title);

        requestObject.onreadystatechange = function () {
            if (async) {
                switch (requestObject.readystate) {
                    case 1:
                        msgbox.showMsg("正在初始化连接...");
                        return;
                    case 2:
                        msgbox.showMsg("正在发送数据...");
                        return;
                    case 3:
                        msgbox.showMsg("正在接收数据...");
                        return;
                    case 4:
                        msgbox.showMsg("数据接收完成...");
                        if (requestObject.status == 200) {
                            callback(requestObject.responseText);
                            setTimeout(msgbox.clear, 1000);
                        } else {
                            msgbox.showMsg("请求失败," + requestObject.statustext + "(" + requestObject.status + ")");
                            setTimeout(msgbox.clear, 3000);
                        }
                        return;
                }
            }
        }

        requestObject.open (method, url, async);

        if (method == 'POST') {
            msgbox.showMsg("正在接收数据...");
            requestObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 这句一定不能缺，否则参数传不到后台

            requestObject.send(params);
        } else {
            requestObject.send(null);
        }

        if (!async) {
            msgbox.showMsg("数据接收完成...");
            callback(requestObject.responseText);
            msgbox.clear();
        }
    };
}

 

使用方法：

 

function changeText(result) {
    document.getElementById("suggest").innerHTML = result;
}

function showHint(str) {
  if (str.length == 0) {
    document.getElementById("suggest").innerHTML = "";
    return;
  }

  var url = 'ajaxinput';

  var postString = 'input=' + str;

  new AjaxBase().defaultRequest(url, changeText, postString);

//更多参数请使用

//new AjaxBase().request(url, changeText, true, submitMethodConst.POST, postString, '');
}

详细源码（完整Eclipse工程）：

发布到Tomcat中，访问即可

其中有两个例子，第三个Tree还没做好。。。

文件:	testajax.zip
大小:	36KB
下载:	下载

 

 

另外：

 

 

关于application/x-www-form-urlencoded等字符编码的解释说明

 在Form元素的语法中，EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。 下边是说明： application/x-www-form-urlencoded： 窗体数据被编码为名称/值对。这是标准的编码格式。 multipart/form-data： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。 text/plain： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。
 补充
form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。 当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2...），然后把这个字串append到url后面，用?分割，加载这个新的url。 当action为post时候，浏览器把form数据封装到http body中，然后发送到server。 如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。


一，HTTP上传的基本知识      

         在Form元素的语法中，EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。下边是说明： application/x-www-form-urlencoded： 窗体数据被编码为名称/值对。这是标准的编码格式。 multipart/form-data： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。 text/plain：窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。
补充
         form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application /x-www-form-urlencoded。

         当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1& amp;name2=value2...），然后把这个字串append到url后面，用?分割，加载这个新的url。

         当action为post时候，浏览器把form数据封装到http body中，然后发送到server。

        如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上 Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件 name)等信息，并加上分割符(boundary)。

二，使用中需要注意的地方

       在AJAX往服务器上传数据是，设置了content-type为application/x-www-form-urlencoded，此时是对整个发送内容作了编码，并不是对名字对应的值做了编码。因此，在服务器端，通过request.getParameter("name")的方式取值，是有问题的。

       有两种解法办法：

       1）改服务器端： 采用流的方式硬编码

            InputStream stream=request.getInputStream();
           InputStreamReader isr=new InputStreamReader(stream);
           BufferedReader br=new BufferedReader(isr);
           String str=br.readLine();  
            System.out.println(str);
    
            str=URLDecoder.decode(str,"gb2312");
            System.out.println(str);
             br.close();

         2）改客户端：更改数据发送结构

             在往服务器上发数据的时候，使用name=escape(value)的方式组对

              此时在服务器代码中，通过request.getParameter("name")获得的数值，就不用编码了