ProfessinalJavaScriptDemos/Ch21/XHRFormDataExample01.htm at master · wangminli/ProfessinalJavaScriptDemos · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
    <title>XHR FormData Example</title>
</head>
<body>
    <p>This example must be run on a server to work properly.</p>
    <script>document.writeln("<p>You browser " + (typeof FormData != "undefined" ? "does" : "doesn't") + " support the FormData type.");</p></script>
    <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>

        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 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", "postexample.php", true);
            var form = document.getElementById("user-info");
            xhr.send(new FormData(form));
        }

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