JavaScript 之 ajax

littlewxp發表於2018-05-04
JavaScript

1. AJAX 的概念

AJAX，即 Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）

    • 同步：前面的程式碼不執行完畢，後面的程式碼無法執行
    • 非同步：前面的程式碼不執行完畢，後面的程式碼也可正常執行
  • 作用：在不重新載入整個頁面的情況下，與伺服器交換資料並更新部分網頁，實現非同步無重新整理
  • 運用場景：表單驗證，搜尋框輸入，論壇，部落格等

2. XMLHttpRequest 物件

XMLHttpRequest 用於在後臺與伺服器交換資料

  • 建立XMLHttpRequest 物件
var xmlhttp;
if(window.XMLHttpRequest){
    //ie7以上、谷歌、火狐支援
    xmlhttp = new XMLHttpRequest();
}else{
    //老版本的ie5、6使用ActiveX
    xmlhttp = new ActiveXObject();
}
  • 向伺服器傳送請求
    • 　　open(請求型別get/post，傳送地址，同步true/非同步false)
    • 　　send(string僅用於post請求)　　
xmlhttp.open("get","01.txt",true); 
xmlhttp.send();
    • 　　當選擇同步時，規定在響應處於 onreadystatechange(儲存函式，當 readyState 屬性改變時呼叫)事件中的就緒狀態時執行的函式
      • 　　readyState 存有XMLHTTPRequest的狀態
        • 0: 請求未初始化
        • 1: 伺服器連線已建立
        • 2: 請求已接收
        • 3: 請求處理中
        • 4: 請求已完成，且響應已就緒
      • 　　status 儲存

        • 200: “OK”

        • 404: 未找到頁面

xmlhttp.onreadystatechange=function(){
　　//表示響應已就緒
　　if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
　　　　document.getElementById("box").innerHTML = xmlhttp.responseText;
   }
}
    • 　　當選擇非同步時（不推薦，但可用於小型請求），無需編寫 onreadystatechange 函式，把程式碼放到 send() 語句後面即可

注：JavaScript 會等到伺服器響應就緒才繼續執行。若伺服器繁忙或緩慢，應用程式會掛起或停止。

  • get 方式請求資料
<input type="button" id="btn" value="獲取資料">
<div id="box"></div>
<script>
    window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
　　　　　　　    xmlhttp = new ActiveXObject();
            }
            xmlhttp.open("get","01.txt",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    document.getElementById("box").innerHTML = xmlhttp.responseText;
                }
            }
        }
    }
</script>

注：get 方式傳送的請求會有快取現象，為避免這種情況，向url新增一個唯一的ID，如下：

//方法一
xmlhttp.open("get","01.txt?t=" + Math.random(),true);
//方法二
xmlhttp.open("get","01.txt?t=" + new Date().getTime(),true);
  • post 方式請求資料
<input type="button" id="btn" value="獲取資料">
<div id="box"></div>
<script>
    window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject();
            }
            xmlhttp.open("post","02.php",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        　　 　　 　　document.getElementById("box").innerHTML = xmlhttp.responseText;
                }
            }
        }
    }
</script>

注：如需像 HTML 表單那樣 POST 資料，用 setRequestHeader(頭名稱，頭的值) 新增 HTTP 頭。如下：

xmlhttp.open("post","02.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();

3. 伺服器響應格式

  • responseText 獲得字串形式的響應資料，返回字串形式的響應
document.getElementById("box").innerHTML = xmlhttp.responseText;
  • responseXML 獲得 XML 形式的響應資料
<input type="button" id="btn" value="獲取資料">
<div id="box"></div>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject();
            }
            xmlhttp.open("get","03.xml?t=" + Math.random(),true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function () {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    var obj = xmlhttp.responseXML;
                    var arrs = obj.getElementsByTagName("title");
                    var str = "";
                    for(var i = 0;i < titles.length;i++){
                        str += arrs[i].innerHTML;
                        document.getElementById("box").innerHTML = str;
                    }
                }
            }
        }
    }
</script>
  • JSON 格式
<input type="button" id="btn" value="獲取資料">
<ul id="list"></ul>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject();
            }
            xmlhttp.open("get","04.json?t=" + Math.random(),true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function () {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    var res = JSON.parse(xmlhttp.responseText);
                    var arr = res.students;
                    for(var i = 0;i < arr.length;i++){
                        var li = document.createElement("li");
                        li.innerHTML = arr[i].name;
                        document.getElementById("list").appendChild(li);
                    }
                }
            }
        }
    }
</script>

4. Callback 函式

callback 函式是一種以引數形式傳遞給另一個函式的函式。

  • 當存在多個 AJAX 任務時，則為建立 XMLHttpRequest 物件編寫一個標準的函式，併為每個 AJAX 任務呼叫該函式。
function myFunction(){
    loadXMLDoc("ajax_info.txt",function(){
 　　　　if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    　　　　document.getElementById("box").innerHTML = xmlhttp.responseText;
    　　}
  　});
}

 

相關文章