Ajax——從伺服器擷取各種檔案

最後更新：2017-08-12 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：data cli return click php檔案按鈕 create rip innerhtml

ajax.js內容

function ajax(url,fnWin,fnFaild){    //1.建立ajax對象    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");    //2.與伺服器建立串連    xhr.open("GET",url,true);    //3.發送請求    xhr.send();    //4.接收伺服器返回的資訊    xhr.onreadystatechange = function(){        if(xhr.readyState == 4){            if(xhr.status == 200){                fnWin && fnWin(xhr.responseText);            }else{                fnFaild && fnFaild();            }        }    }}

執行個體一，擷取txt檔案內容

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            #box{                width:300px;                height: 300px;                border: 1px solid black;            }        </style>    </head>    <body>        <input type="button" name="" id="" value="按鈕一" />        <input type="button" name="" id="" value="按鈕二" />        <input type="button" name="" id="" value="按鈕三" />        <div id="box"></div>    </body></html>
<script type="text/javascript" src="js/ajax.js" ></script><script type="text/javascript">    var oBtn = document.getElementsByTagName("input");    var oDiv = document.getElementById("box");    for(var i = 0;i < oBtn.length;i ++){        oBtn[i].index = i;        oBtn[i].onclick = function(){            ajax(this.index + 1 + ".txt",function(str){                oDiv.innerHTML = str;            })        }    }</script>

如下↓

執行個體二，通過ajax訪問伺服器端的abc.txt檔案，並實現無重新整理即時更新內容↓

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <p>通過ajax訪問伺服器端的abc.txt檔案</p>        <input type="button" name="btn" id="btn" value="讀取檔案" />        <div id="box">                    </div>    </body></html>
<script type="text/javascript" src="js/ajax.js" ></script><script type="text/javascript">    var oBtn = document.getElementById("btn");    var oDiv = document.getElementById("box");    oBtn.onclick = function(){        document.title = "abc.txt?" + new Date().getTime();        ajax("abc.txt?t=" + new Date().getTime(),function(str){   //？後的內容會被瀏覽器忽略，以此實現即時重新整理內容，即在修改abc.txt檔案內容後，無須重新整理也能擷取最新內容。            oDiv.innerHTML = str;        })    }</script>

執行個體三，

通過ajax訪問伺服器端的data.json檔案

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <p>通過ajax訪問伺服器端的data.json檔案</p>        <input type="button" name="btn" id="btn" value="讀取檔案" />        <div id="box">                    </div>    </body></html>                                                  <script type="text/javascript" src="js/ajax.js" ></script><script type="text/javascript">    var oBtn = document.getElementById("btn");    var oDiv = document.getElementById("box");    oBtn.onclick = function(){        ajax("data.json?t=" + new Date().getTime(),function(str){            var json = (new Function("return" + str))();            alert(json[0].c);        })    }</script>

執行個體四，動態建立dom節點並插入json檔案內容

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <ul id="ul1"></ul>        <a href="javascript:;">1</a>        <a href="javascript:;">2</a>        <a href="javascript:;">3</a>    </body></html><script type="text/javascript" src="js/ajax.js" ></script><script type="text/javascript">    var oUl = document.getElementById("ul1");    var oA = document.getElementsByTagName("a");    for(var i = 0;i < oA.length; i ++){        oA[i].index = i;        oA[i].onclick = function(){            oUl.innerHTML = ""; //清空ul            ajax("page" + (this.index + 1) + ".json",function(str){                var json = (new Function("return" + str))(); //解析json                //利用js中DOM動態產生頁面中的內容                for(var j = 0;j < json.length;j ++){                    var obj = json[j];                    for(var key in obj){                        var oLi = document.createElement("li");                        oLi.innerHTML = "<strong>" + key + "</strong><i>" + obj[key] + "</i>";                        oUl.appendChild(oLi);                    }                                    }            })        }    }</script>

page.json1↓

[{"a":1},{"aa":11},{"aaa":111}]

page.json2↓

[{"b":2},{"bb":22},{"bbb":222}]

page.json3↓

[{"c":3},{"cc":33},{"ccc":333}]

↓

點擊1

點擊2

點擊3

執行個體五，擷取php檔案內容

Ajax——從伺服器擷取各種檔案

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More