javascript - 为什么我在以下 JavaScript 代码中收到 XMLHTTPRequest 错误？

Question

我正在尝试执行 native JavaScript 并使用以下 JS 代码请求 html 页面，为什么它会返回(在 Chrome 中)以下内容？

XMLHttpRequest 无法加载/live-examples/temp.html。请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问源“null”。

我使用的代码如下:

            var sendRequest = (function(){

            // Private member variables
            var readyState = {
                UNSENT          : 0,
                OPENED          : 1,
                HEADERS_RECIVED : 2,
                LOADING         : 3,
                DONE            : 4
            }

            var status = {
                SUCCESS : 200,
                NOT_MODIFIED : 304
            }

            // Private member methods
            function getData(callBack){

                var xhr = getXhr();
                if(!xhr){
                    console.log('unable to create xhr object.')
                    return false;
                }

                // test readyState
                if(xhr.readyState !== readyState.DONE) return;

                if(xhr.status === status.SUCCESS && xhr.status !== status.NOT_MODIFIED){
                    callBack(xhr.responseText);
                }
            }


            function getXhr(){

                var XMLHttpList = [
                    function(){ return new XMLHttpRequest(); },
                    function(){ return ActiveXObject("Msxml2.XMLHTTP"); },
                    function(){ return ActiveXObject("Microsoft.XMLHTTP"); }
                ], xhr;

                for(var i = 0; i < XMLHttpList.length; i++){
                    try{
                        xhr = XMLHttpList[i];
                        break;
                    }catch(e){
                        continue;
                    }
                }
                return xhr();
            }


            return function(url, callBack, postData){
                var xhr = getXhr();
                if(!xhr) return;

                var method = (postData) ? 'POST' : 'GET';

                xhr.open(method, url, true);
                xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                xhr.onreadystatechange = getData(callBack);

                xhr.send(postData);
            };

        })();

        function dealWithResponse(response){
            // the response from the xhr request
            console.log('success response: ' + response);
        }

        // cross origin request error.
        $(function(){
            document.getElementById('MyID').onclick = function(){ sendRequest('/live-examples/temp.html', dealWithResponse, 'GET'); }
        });

BODY内的HTML代码如下:

<button id="MyID">I have a button!</button>

我检查了文件“temp.html”确实存在。

我在这段代码中只是想在我即将出席的演讲中使用 native javascript 展示一些简单的 ajax 调用。

提前非常感谢，昆顿:)

Answer 1

当您想要使用 XMLHTTPRequest 对象访问数据时，您需要使用 HTTP。