blocks|key|203569|text|打开一个空的.PHP文件或.ASPX文件(或者任何可以运行javascript的服务器端语言)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|203570|将这段代码粘贴到"head“标签之间。|203571|<script>
++++var+xmlhttp;
++++function+loadXMLDoc(url,+cfunc)+{
++++++++if+(window.XMLHttpRequest)+{//+code+for+IE7%2B,+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>|code-block|syntax|javascript|203572|如您所见，javascript引用"hello.xml“文件来获取信息。|203573|在中创建的项目文件夹中打开一个空的XML文件。将XML文件命名为"hello.xml“|203574|将此代码粘贴到XML文件中。|203575|<?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>|203576|在本地主机上运行php+(或.aspx)文件。|203577|单击按钮，您的页面必须将XML数据获取到您的网站中。|203578|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>Open an empty .PHP file or .ASPX file (or just any server-side language that can run javascript)</p>

<p>Paste this code between "head" tags.</p>

<pre><code>&lt;script&gt;
    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 &amp;&amp; xmlhttp.status == 200) {
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            }
        });
    }
&lt;/script&gt;
</code></pre>

<p>As you see, javascript is referring to "hello.xml" file to get information from.</p>

<p>Open an empty XML file inside the project folder you have created in. Name your XML file as "hello.xml"</p>

<p>Paste this code to your XML file.</p>

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

<p>Run your php (or .aspx) file on localhost.</p>

<p>Click on button, your page must acquire the XML data into your website.</p>


blocks|key|4709454|text|下面是我在简单的异步get+ajax中经常使用的一个函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4709455|1.使用onload，因为它编写起来更短，而且不需要添加多个eventhandlers。|4709456|2.不要使用同步ajax。|4709457|js|4709458|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)
}|code-block|syntax|javascript|4709459|示例|4709460|http://jsfiddle.net/9pCxp/|offset|length|4709461|额外信息|4709462|https://stackoverflow.com/a/18309057/2450730|4709463|完整的html|4709464|<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>|4709465|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|0|0|0|Q|0|0|0|0|18|1|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1E|8|@]|9|@$Q|1F|R|1G|1|1H]]|A|$]]|$1|S|3|T|5|6|7|1I|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1J|8|@]|9|@$Q|1K|R|1L|1|1M]]|A|$]]|$1|W|3|X|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|J|7|1O|8|@]|9|@]|A|$K|L]]|$1|10|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|P]]|17|$5|13|14|15|A|$16|V]]]]

<p>here is a function i always use for simple async get ajax:</p>

<p>1.use onload as it's shorter to write and as you don't need to add multiple eventhandlers.</p>

<p>2.don't do syncronous ajax.</p>

<p>js</p>

<pre><code>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)
}
</code></pre>

<p>example</p>

<p><a href="http://jsfiddle.net/9pCxp/" rel="nofollow noreferrer">http://jsfiddle.net/9pCxp/</a></p>

<p>extra info</p>

<p><a href="https://stackoverflow.com/a/18309057/2450730">https://stackoverflow.com/a/18309057/2450730</a></p>

<p>full html</p>

<pre><code>&lt;html&gt;&lt;head&gt;&lt;script&gt;
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)
}
&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;
</code></pre>


blocks|key|203641|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|203642|++++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:+"+%2B+self.xmlhttp.responseText);
++++++++++++++++++++++++}
++++++++++++++++++++++++else+{
++++++++++++++++++++++++++++alert("Unknown+error+occured.+Status:+"+%2B+self.xmlhttp.status);
++++++++++++++++++++++++}
++++++++++++++++++++}
++++++++++++++++}
++++++++++++++++catch+(e)+{
++++++++++++++++++++alert("Error+occured.+"+%2B+e.Description+%2B+".+Retry+or+Refresh+the+page");
++++++++++++++++}
++++++++++++++++finally+{

++++++++++++++++}
++++++++++++};

++++++++}
++++}


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

++++Go();

</script>|code-block|syntax|javascript|203643|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p></p>

<pre><code>    function Go() {

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

        if (window.XMLHttpRequest &amp;&amp; !(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();

&lt;/script&gt;
</code></pre>


blocks|key|203651|text|这就是你的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|203652|var+xhttp+=+new+XMLHttpRequest();
xhttp.onreadystatechange+=+function+()+{
++++if+(this.readyState+==+4+&&+this.status+==+200)+{
++++++++var+allText+=+this.responseText;
++++++++alert(allText);
++++}
};
xhttp.open("GET",+"filename.txt",+true);
xhttp.send();|code-block|syntax|javascript|203653|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is your answer.</p>

<pre><code>var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 &amp;&amp; this.status == 200) {
        var allText = this.responseText;
        alert(allText);
    }
};
xhttp.open("GET", "filename.txt", true);
xhttp.send();
</code></pre>


blocks|key|4709524|text|下面的代码可能对某些人有用...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4709525|+<!DOCTYPE+html>
+<html>
+<body>

+<h1>Load+Data+from+text+file+</h1>

+<button+type="button"+onclick="loadDoc()">Change+Content</button>

+<script>
+++++function+loadDoc()+{
+++++++var+xhttp+=+new+XMLHttpRequest();
+++++++xhttp.open("GET",+"info.txt",+true);
+++++++xhttp.send();
+++++++document.getElementById("demo").innerHTML+=+xhttp.responseText;
+++++}
+</script>

+</body>
+</html>|code-block|syntax|javascript|4709526|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The below code may be useful for someone...</p>

<pre><code> &lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;body&gt;

 &lt;h1&gt;Load Data from text file &lt;/h1&gt;

 &lt;button type="button" onclick="loadDoc()"&gt;Change Content&lt;/button&gt;

 &lt;script&gt;
     function loadDoc() {
       var xhttp = new XMLHttpRequest();
       xhttp.open("GET", "info.txt", true);
       xhttp.send();
       document.getElementById("demo").innerHTML = xhttp.responseText;
     }
 &lt;/script&gt;

 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>


<p>I'm trying to do a basic AJAX tutorial to read data from a file, hello.txt, into my webpage. hello.txt and my current html webpage are in the same directory. Does anyone know what I'm doing wrong? Nothing happens when I load the page.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;head&gt;&lt;title&gt;Ajax Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
    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 );
    }

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


Simple AJAX example - load data from txt file

服务器

Windows

我正在尝试做一个基本的AJAX教程，将文件hello.txt中的数据读取到我的网页中。hello.txt和我当前的html网页在同一个目录中。有人知道我做错了什么吗？当我加载页面时，没有任何反应。<!DOCTYPE html><head><title>Ajax Test</title><script type="tex...

问简单的AJAX示例-从txt文件加载数据
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单的AJAX示例-从txt文件加载数据EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问简单的AJAX示例-从txt文件加载数据
EN