簡單的AJAX示例 - 從txt文件加載數據

我正在嘗試做一個基本的AJAX教程，將文件hello.txt中的數據讀入我的網頁。 hello.txt和我目前的html網頁都在同一個目錄下。有誰知道我做錯了什麼？當我加載頁面時沒有任何反應。（可運行JavaScript或只是任何服務器端語言）簡單的AJAX示例 - 從txt文件加載數據

<!DOCTYPE html> 
<head><title>Ajax Test</title> 
<script type="text/javascript"> 
    var xmlHttp = new XMLHttpRequest(); 
    xmlHttp.open("GET", "hello.txt", true); 
    xmlHttp.addEventListener("load", ajaxCallback, false); 
    xmlHttp.send(null); 
    function ajaxCallback(event){ 
     alert("Your file contains the text: " + event.target.responseText); 
    } 

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

來源

2013-11-02 Spanner

下'HTTP位於您的文本文件：// example.com/hello.txt'其中請求來自'HTTP：// example.com'？ – Sumurai8

我只是將它保存在與我的html文件相同的文件夾中。當我上傳到我的服務器時，我的html頁面是http://www.example.com/~user/test.html，我的文本文件是http://www.example.com/~user/hello.txt – Spanner

您的代碼在最新的FF和Chrome上完美運行。 – nietonfir

-1

打開一個空的PHP文件或.aspx文件

粘貼「頭」標記之間的這段代碼。

<script> 
    var xmlhttp; 
    function loadXMLDoc(url, cfunc) { 
     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else {// code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = cfunc; 
     xmlhttp.open("GET", url, true); 
     xmlhttp.send(); 
    } 
    function myFunction() { 
     loadXMLDoc("hello.xml", function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById("myDiv").innerHTML = xmlhttp.responseText; 
      } 
     }); 
    } 
</script>

正如你所看到的，javascript是指「hello.xml」文件來獲取信息。

打開您在創建的項目文件夾中的空XML文件。命名您的XML文件「的hello.xml」

將此代碼粘貼到您的XML文件。

<?xml version="1.0" encoding="utf-8"?> 
<note> 
    <to>Tove</to> 
    <from>Jani</from> 
    <heading>Reminder</heading> 
    <body>Don't forget me this weekend!</body> 
</note>

在localhost上運行你的php（或.aspx）文件。

點擊按鈕，您的頁面必須獲取XML數據到您的網站。

來源

2013-11-02 22:00:24

我在hello.txt中有文本「test」。我試過這個例子，但是我的按鈕並沒有做任何事情 – Spanner

我把整個東西複製並粘貼到一個空白的html頁面中，並且該按鈕仍然沒有做任何事情。我確定在同一個目錄中還有一個名爲hello.txt的文本文件。我的hello.txt文件只是我在komodo中創建的純文本文件，其中包含字符串「test」 – Spanner

好的，謝謝！ – Spanner

這裏是一個函數，我總是用簡單的異步GET AJAX：

1.使用onload事件，因爲它是短寫，當你不需要添加多個事件處理器。

2.不要做syncronous ajax。

function ajax(a,b,c){//url,function,just a placeholder 
c=new XMLHttpRequest; 
c.open('GET',a); 
c.onload=b; 
c.send() 
} 

function alertTxt(){ 
alert(this.response) 
} 

window.onload=function(){ 
ajax('hello.txt',alertTxt) 
}

例如

http://jsfiddle.net/9pCxp/

額外的信息

https://stackoverflow.com/a/18309057/2450730

全HTML

<html><head><script> 
function ajax(a,b,c){//url,function,just a placeholder 
c=new XMLHttpRequest; 
c.open('GET',a); 
c.onload=b; 
c.send() 
} 

function alertTxt(){ 
alert(this.response) 
} 

window.onload=function(){ 
ajax('hello.txt',alertTxt) 
} 
</script></head><body></body></html>

來源

2013-11-02 22:00:27 cocco

你沒有做任何事情 – Spanner

您使用的瀏覽器？「hello.txt」與html文件位於同一文件夾中？ – cocco

是的，hello.txt文件包含字符串「test」，並與html文件位於同一文件夾中。 – Spanner

-1

function Go() { 

     this.method = "GET"; 
     this.url = "hello.txt"; 

     if (window.XMLHttpRequest && !(window.ActiveXObject)) { 
      try { 
       this.xmlhttp = new XMLHttpRequest(); 
      } 
      catch (e) { 
       this.xmlhttp = false; 
      } 
      // branch for IE/Windows ActiveX version 
     } 
     else if (window.ActiveXObject) { 
      try { 
       this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
      } 
      catch (e) { 
       try { 
        this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
       } 
       catch (e) { 
        this.xmlhttp = false; 
       } 
      } 
     } 

     if (this.xmlhttp) { 

      var self = this; 
      if (this.method == "POST") { 
       this.xmlhttp.open("POST", this.url, true); 
      } 
      else { 
       //remember - we have to do a GET here to retrive the txt file contents 
       this.xmlhttp.open("GET", this.url, true); 
      } 


      this.xmlhttp.send(null); 

      //wait for a response 
      this.xmlhttp.onreadystatechange = function() { 

       try { 
        if (self.xmlhttp.readyState == 4) { 
         if (self.xmlhttp.status == 200) { 
          if (self.xmlhttp.responseText != null) { 
           self.response = self.xmlhttp.responseText; 

           alert(self.xmlhttp.responseText); 
          } 
          else { 
           self.response = ""; 
          } 

         } 
         else if (self.xmlhttp.status == 404) { 
          alert("Error occured. Status 404: Web resource not found."); 
         } 
         else if (self.xmlhttp.status == 500) { 
          self.showHtmlError("Internal server error occured", "Status: " + self.xmlhttp.responseText); 
         } 
         else { 
          alert("Unknown error occured. Status: " + self.xmlhttp.status); 
         } 
        } 
       } 
       catch (e) { 
        alert("Error occured. " + e.Description + ". Retry or Refresh the page"); 
       } 
       finally { 

       } 
      }; 

     } 
    } 


    //Use the function in your HTML page like this: 

    Go(); 

</script>

來源

2015-03-16 15:32:30 UberGeoff

爲什麼你使用'this'而不是幾個變量？ – bfontaine

簡單的AJAX示例 - 從txt文件加載數據

回答

相關問題