Question

我有一个div来记录网站，管理它的功能是对象方法：

objLumberJack = {
// attributes 
// edit before creation .set()
att: {
    id: 'FrameBee_Body_Log',
    header: 'LumberJack',
    success: {
        className: 'Success',
        text: 'OK'
    },
    error: {
        className: 'Error',
        text: 'Fail'
    },
},
// methods
// creates the object as structure defined above
// and append it to the body as first child
set: function () {
    $('body').prepend(
        '<div id="' + this.att.id + '">' +
        '<header>' + this.att.header + '</header>' +
        '<section></section' + 
        '</div>'
    );
},
// update the box with the required string as first parameter
// and the optional boolean second parameter
add: function (strIN, booIN) {
    var elmTMP =
        ((typeof booIN === 'undefined') ? '' :
            ('<span class="' + ((booIN) ? this.att.success.className : this.att.error.className) +
            '">' + ((booIN) ? this.att.success.text : this.att.error.text) +
            '</span>')) +
        ' ' + strIN;
    $('#' + this.att.id + ' section').append(elmTMP);
},
// checks if the url exists
exists: function (urlIN) {
    var booTMP = false;
    $.ajax({
        url: urlIN,
        async: false,
        dataType: 'html',
        success: function () { booTMP = true; }
    });
    alert(urlIN + '\n' + booTMP);
    return booTMP;
},
// shortcut to check an url and update the box
check: function (urlIN) {
    this.add(urlIN, this.exists(urlIN));
}};

我使用check方法将其他信息也放在日志框中，如

objMaster.log('<p>[Modules]</p>');

其中objMaster.log是一个快捷方式（它检查用户是否启用了日志框，如果为true，则更新它）。

// Log update shortcut for objLumberJack
log: function (urlIN) {
    if (objManager.enableLog) {
        objLumberJack.check(urlIN)
    }
}

问题是，使用path，方法行为是正确的，而html字符串代替返回成功：

objMaster.log('<p>[Modules]</p>'); // [success] I espect error
objMaster.log('RES/MOD/test.js'); // [error] OK because test.js doesn't exists
objMaster.log('RES/MOD/jquery.js'); // [success] OK because jquery.js exists

我无法理解。

编辑：

Here a live example of the code

Answer 1

如果您的目标是知道服务器上是否存在该文件，则应该检查响应状态而不是请求是否成功。为此，请按以下步骤更改ajax success函数：

success: function(data, textStatus, xhr) {
    if (xhr.status == 200) booTMP = true;
}

或者更好的是，使用ajax complete函数，如下所示：

complete: function(xhr, textStatus) {
    if (xhr.status == 200) booTMP = true;
}

请注意：只要您的服务器不覆盖HTTP状态代码（例如，在重定向到现有错误页面时错误地将状态404更改为200），这将正常工作。

另请注意：不推荐在主线程（您编写async: false的位置）上使用同步XMLHttpRequest。

这是您的源代码，在我的服务器上进行了修改和测试：

<!DOCTYPE html>
<html>
    <head>
        <script>
objLumberJack = {
// attributes 
// edit before creation .set()
att: {
    id: 'FrameBee_Body_Log',
    header: 'LumberJack',
    success: {
        className: 'Success',
        text: 'OK'
    },
    error: {
        className: 'Error',
        text: 'Fail'
    },
},
// methods
// creates the object as structure defined above
// and append it to the body as first child
set: function () {
    $('body').prepend(
        '<div id="' + this.att.id + '">' +
        '<header>' + this.att.header + '</header>' +
        '<section></section' + 
        '</div>'
    );
},
// update the box with the required string as first parameter
// and the optional boolean second parameter
add: function (strIN, booIN) {
    var elmTMP =
        ((typeof booIN === 'undefined') ? '' :
            ('<span class="' + ((booIN) ? this.att.success.className :     this.att.error.className) +
            '">' + ((booIN) ? this.att.success.text :     this.att.error.text) +
            '</span>')) +
        ' ' + strIN;
    $('#' + this.att.id + ' section').append(elmTMP);
},
// checks if the url exists
exists: function (urlIN) {
    var booTMP = false;
    $.ajax({
        url: urlIN,
        async: false,
    dataType: "html",
//    success: function(data, textStatus, xhr) {
//        if (xhr.status == 200) booTMP = true;
//    },
    complete: function(xhr, textStatus) {
        if (xhr.status == 200) booTMP = true;
    } 
    });
    alert(urlIN + '\n' + booTMP);
    return booTMP;
},
// shortcut to check an url and update the box
check: function (urlIN) {
    this.add(urlIN, this.exists(urlIN));
},
// Log update shortcut for objLumberJack
log: function (urlIN) {
    //if (objManager.enableLog) {
        objLumberJack.check(urlIN)
    //}
}};
    </script>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
    <script>     
objLumberJack.log('<p>[Modules]</p>'); // [error] 
objLumberJack.log('RES/MOD/test.js'); // [error]
objLumberJack.log('index.htm'); // [success] 
        </script>    
    </body>
</html>

希望这会有所帮助;）

使用html字符串作为url值

1 个答案: