阿賈克斯成功與HTML字符串作爲url值

我有一個div登錄該網站並管理它的功能是對象的方法：阿賈克斯成功與HTML字符串作爲url值

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)); 
}};

我用的檢查方法也把其他信息在日誌箱像

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

其中objMaster.log是一個快捷方式（它檢查用戶是否啓用了日誌框，如果是，更新它）。

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

的問題是，與路徑，方法的行爲是正確的，與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

來源

2015-06-18 Giacomo

，如果你嘗試用瀏覽器在網頁「（當前的URL）開什麼追加/

[模塊]

「？如果它以200響應，它正常工作。該頁面存在 – B3rn475

我收到錯誤，因爲該文件不存在 – Giacomo

嘗試添加一些調試信息。更改函數（）{booTMP = true; }在函數（數據）{booTMP = true;的console.log（數據）; } – B3rn475

如果你的目標是要知道是否存在於服務器上的文件，你應該檢查響應狀態，而不是請求的成功。要做到這一點，改變你的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>

希望這有助於;）

來源

2015-06-19 04:41:06

非常感謝！如果xmlhttprequest被棄用，我如何在JavaScript中進行同步調用？ – Giacomo

僅僅使用'async：false'已被棄用，這意味着您仍然可以使用它，但請注意它將來可能不是有效的JQuery代碼。在JQuery中不贊成使用同步AJAX調用，因爲我認爲它們使用主線程並且往往會降低頁面性能。在任何情況下，使用異步AJAX最好：只需使用回調函數'complete'並從函數內恢復執行。 –

好的，沒有JQuery呢？我在另一個項目上，我正在使用xmlhttprequest。我需要做同步調用 – Giacomo

阿賈克斯成功與HTML字符串作爲url值

回答

相關問題