实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html>
<head>
    <title>XHR Post Example</title>
</head>
<body>
    <p>This example must be run on a server to work properly.</p>
    <p>Fill in the form below:</p>
    <form id="user-info">
        <label for="user-name">Name:</label><input type="text" id="user-name" name="user-name" /><br />
        <label for="user-email">Email:</label><input type="text" id="user-email" name="user-email" /><br />
        <input type="button" value="Submit" onclick="submitData()" />
    </form>
    <script type="text/javascript">
    
        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"],
                        i, len;
            
                    for (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 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("&");
        }
        
        function submitData(){
            var xhr = createXHR();        
            xhr.onreadystatechange = function(event){
                if (xhr.readyState == 4){
                    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                        alert(xhr.responseText);
                    } else {
                        alert("Request was unsuccessful: " + xhr.status);
                    }
                }
            };
            
            xhr.open("post", "/upload/files/201702/postexample.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var form = document.getElementById("user-info");            
            xhr.send(serialize(form));
        }

</script>
</body>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
    <title>XHR Post Example</title>
</head>
<body>
    <p>This example must be run on a server to work properly.</p>
    <p>Fill in the form below:</p>
    <form id="user-info">
        <label for="user-name">Name:</label><input type="text" id="user-name" name="user-name" /><br />
        <label for="user-email">Email:</label><input type="text" id="user-email" name="user-email" /><br />
        <input type="button" value="Submit" onclick="submitData()" />
    </form>
    <script type="text/javascript">
    
        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"],