使用 AJAX 讀取本地文件

Question

我是 AJAX 的新手，只想確認：如果我將所有代碼都放在桌面上的一個文件夾中，並且我使用 AJAX 在 HTML 的 div 中輸出文件內容，是否可以通過 AJAX 或文件必須在服務器上？

我只是第一次測試 AJAX 功能，我遇到了問題，因為它在 .js 文件中顯示錯誤“拒絕訪問”

Answer 1

出於安全原因，JavaScript 對客戶端文件系統的訪問受到限制 - 考慮您是否希望（其他人的）JavaScript 讀取您的敏感文檔。

即使在試驗時，最好使用現實的拓撲結構，從真實系統中的服務器提供服務。

設置 Apache 等 Web 服務器指向您的開發目錄非常容易，因此“服務器”只是您偽裝的桌面。 因此，編輯/測試周期非常快。

Answer 2

在任何瀏覽器 javascript 實現中，文件訪問從一開始就被禁止。 有人可以手動禁用瀏覽器中的“安全功能”。 例如，對於 Google Chrome，您必須使用--disabled-web-security作為命令行參數來啟動可執行文件。 Firefox 可以在about:config禁用它。

無論如何，如果您正在為公眾編寫代碼，您當然完全不能依賴它。 但隧道盡頭有光。 “新”的 Javascript File API已經在 Chrome 中可用，我猜/希望其他供應商很快就會跟進。 該 API “正式”允許您的腳本讀取本地機器上的文件。

Answer 3

如果你只是想用它進行測試，你可以嘗試在 chrome 上禁用網絡安全，然后它應該可以工作。

Answer 4

Javascript 可在客戶端運行，但訪問權限有限，因此無法從客戶端計算機訪問本地文件。

因此，您需要在服務器上放置內容，而不是使用 ajax 並獲取 div 中的數據以顯示客戶端。

Answer 5

我希望可以使用 Ajax 在本地訪問文件，我用 mozilla firefox 嘗試過它並且運行良好。 我創建了 2 個文本文件並在同一個文件夾中進行了調整。 這是代碼。 如有錯誤，請見諒。

function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest(); //Not IE
    } 
    else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP"); //IE
    } 
    else {
        alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
    }
}           
var receiveReq = getXmlHttpRequestObject();     
function sayHello(fname) {
    if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
        receiveReq.open("GET", fname, true);
        receiveReq.onreadystatechange = handleSayHello; 
        receiveReq.send(null);
    }           
}
function handleSayHello() {
    if (receiveReq.readyState == 4) {
        document.getElementById('span_result').innerHTML = receiveReq.responseText;
    }
}

Here is the html code
<select name="files" onchange="sayHello(this.value)">
<option value="">Select a file</option>
<option value="file.txt">file.txt</option>
<option value="file2.txt">file2.txt</option>
<option value="ajax.html">Ajax.html</option>
</select><br>
<p>Contents of the file will be displayed below</p>
<div id="span_result"></div>