原生Ajax實現頁面局部更新功能

補充：

附一個總的demo

Ajax：Asynchronous Javascript And XML（異步 JavaScript 和 XML）

同步：必須等前面的任務完成，纔可以繼續後面的任務。
異步：不受當前任務影響

使用Ajax發送請求：
1.創建異步（XMLHttpRequest）對象
2.準備發送
3.執行發送動作
4.執行回調函數

分開來一步步看：

1.創建異步（XMLHttpRequest）對象

var xhr=null;
if(window.XMLHttpRequest){
     xhr=new XMLHttpRequest();       //標準創建XMLHttpReques對象
}else{
     xhr=new ActiveXObject('Microsoft.XMLHTTP');    //IE6，兼容處理
}

2.準備發送

三個參數：open（請求方式，請求地址，同步或異步標誌符）
默認是true,異步。false,同步。
get請求：

xhr.open('get','get.php',true);

post請求：

xhr.open('post','get.php',true);      
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    //如果想要使用post提交數據,必須添加此行

如果是get請求，那麼請求參數必須在url中傳遞。
get要注意，IE中要用encodeURI（）對中文編碼，防止亂碼。
例如：

var param='username'+uname+'&password'+pw;
xhr.open=('get','get.php?'+encodeURI(param));

3.執行發送動作

get請求需添加null參數

 xhr.send(null);

post請求參數在這傳遞，且不需要轉碼

 xhr.send(param);

4.執行回調函數

xhr.onreadystatechange=function () {
                if(xhr.readyState==4){       //表示服務器端數據回來了
                    if(xhr.status==200){     //表示數據正常
                        var data=xhr.responseText;          //獲取後臺的字符串
                        var obj=JSON.parse(data);         //json字符串轉爲對象
                        var tag='<div><span>'+obj.name+'</span><span>-------</span><span>'+obj.age+'</span></div>';
                        var info = document.getElementById('info');
                        info.innerHTML = tag;
                        console.log(2);
                    }
                }
            }

補充：

readyState=0,表示xhr創建完成
readyState=1，表示已經發送了請求，調用了xhr.send()
readyState=2，表示瀏覽器已收到服務器響應的數據
readyState=3，正在解析數據
readyState=4，數據已解析完成，可以使用（但不一定正常）

xhr.status==200，表示數據正常
常見的http狀態碼：200 響應成功
                               404 沒找到請求資源
                               403 服務器得到請求，但拒絕執行
                               401 請求需用戶驗證
                               500 服務端錯誤
                               … …

附一個總的demo

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="info"></div>
    <input type="button" id="btn" value="獲取json">
</body>
<script type="text/javascript">
    window.onload=function () {
        var btn=document.getElementById('btn');
        btn.onclick=function () {
            var xhr=null;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else{
                xhr=new ActiveXObject('Microsoft.XMLHTTP');
            }
            xhr.open('get','get.php');
            xhr.send(null);
            console.log(1);
            xhr.onreadystatechange=function () {
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var data=xhr.responseText;          //獲取後臺的字符串
                        var obj=JSON.parse(data);         //json字符串轉爲對象
                        var tag='<div><span>'+obj.name+'</span><span>-------</span><span>'+obj.age+'</span></div>';
                        var info = document.getElementById('info');
                        info.innerHTML = tag;
                        console.log(2);
                    }
                }
            }
            console.log(3);             // 1 3 2回調函數最後 異步的效果
        }

    }
</script>
</html>

get.php

<?php
    header("Content-Type:text/html;charset=utf-8");
    //json字符串，注意是字符串=>   '括起json'
     //$arr='{"name":"ch","age":"22"}';
     //echo $arr;
     
    //數組
    $arr=array("name"=>"ch","age"=>"22");
    echo json_encode($arr);
?>

附圖：

控制檯

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

原生Ajax實現頁面局部更新功能