原生ajax

首先是CreateXMLHttpRequest，IE有点另类，所以要判断

function createXHR() {
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    }
    else if (typeof ActiveXObject != "undefined") {
        if (typeof arguments.callee.activeXString != "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                        "MSXML2.XMLHttp"];
            for (var i = 0, len = versions.length; i < len; i++) {
                try {
                    var xhr = new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    return xhr;
                } catch (ex) {
                    //skip
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }
    else {
        throw new Error("No XHR object available.");
    }
}

接着就是触发事件了

function newComment(articleID) {

    var xhr = createXHR();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                contacts = JSON.parse(xhr.responseText);
                var ul = document.getElementById("myul");
                var li = document.createElement("li");
                li.innerText = contacts[0].CommentContent;
                ul.appendChild(li);
            }
            else
                alert("Request was unsuccessful:" + xhr.status);
        }
    }
    //    xhr.open("get","/comment/new?name1=1&name2=2",true)
    //    xhr.send(null)
    xhr.open("post", "/comment/new/"+articleID, true);
    xhr.timeout = 1000; //set timeout for 1 second(it does't work , but i don't know why)
    xhr.ontimeout = function(){
    alert("Request did not return in a second.");
    };
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var form = document.getElementById("CommentMessage");
    xhr.send(serialize(form))
}

serialize form

function serialize(form) {
    var parts = new Array();
    var field = null;
    for (var i = 0, len = form.elements.length; i < len; i++) {
        field = form.elements[i];
        switch (field.type) {
            case "select-one":
            case "select-multiple":
                for (var j = 0, optLen = field.options.length; j < optLen; j++) {
                    var option = field.options[j];
                    if (option.selected) {
                        var optValue = "";
                        if (option.hasAttribute) {
                            optValue = (option.hasAttribute("value") ?
option.value : option.text);
                        } else {
                            optValue = (option.attributes["value"].specified ?
option.value : option.text);
                        }
                        parts.push(encodeURIComponent(field.name) + "=" +
encodeURIComponent(optValue));
                    }
                }
                break;
            case undefined: //fieldset
            case "file": //file input
            case "submit": //submit button
            case "reset": //reset button
            case "button": //custom button
                break;
            case "radio": //radio button
            case "checkbox": //checkbox
                if (!field.checked) {
                    break;
                }
                /* falls through */
            default:
                parts.push(encodeURIComponent(field.name) + "=" +
encodeURIComponent(field.value));
        }
    }
    return parts.join("&");
}

is amazing